react入门，Hello World

最新推荐文章于 2024-08-10 07:31:04 发布
最新推荐文章于 2024-08-10 07:31:04 发布
阅读量1.1k 收藏 3
点赞数
分类专栏： javascript 文章标签： react react入门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/makel12/article/details/54616221
版权

不管React是什么，写个hello world 先。
代码中使用cdn引入了js文件，可以直接在浏览器运行

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

（以上代码在 https://github.com/ruanyf/react-demos 中的demo01）
请注意代码，以上的html文件中引入了三个js文件，

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  1. 其中，==react.js== 是 React 的核心库
  2. ==react-dom.js== 是提供与 DOM 相关的功能
  3. ==Browser.js== 的作用是将 JSX 语法转为 JavaScript 语法

react代码的主要部分，也就是被<script type="text/babel">标签包裹的部分。

 ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );

ReactDOM是react中定义的一个对象，该对象下的render()方法，可以将<h1>Hello, world!</h1>,这个简单的组件写入到id为“example”的标签中，由此实现了组件的渲染。

运行结果：

image

想要学习React的朋友，可以查看
1. 官方文档： https://facebook.github.io/react/docs/hello-world.html
2. 官方入门教程： http://reactjs.cn/react/docs/tutorial-zh-CN.html
2. 阮一峰的《react入门实例教程》：http://www.ruanyifeng.com/blog/2015/03/react.html

史蒂芬李
关注
专栏目录
React入门HelloWorld示例
09-08 1975
1.概论 Facebook构建数据不断变化的大型应用。 数据变化——大量dom操作、逻辑及其复杂 自动dom操作 状态对应内容 特点： 简单 声明式 React的核心是组件，组件的设计目的是提高代码复用率、降低测试难度和代码复杂度。 提高代码复用率：组件将数据和逻辑封装，类似面向对象中的类。 降低测试难度：组件高内聚低耦合，很容易对单个组件进行测试。 2.环境搭建（当
React.js入门实例教程之创建hello world 的5种方式
10-22
<HelloWorld />, document.getElementById('container5') ); ``` 在使用这些示例之前，你需要确保已经引入了React的库文件，可以通过CDN链接或本地模块系统导入。一旦引入了React库，就可以开始使用上述任意一种...
reactHelloWorld
07-08
构建 JSX --> javascript： $ jsx src build [OR] $ jsx watch src build $ jsx --help
React的hello world
m0_72694993的博客
08-20 457
方法：参数1: 要渲染的react元素,参数二 Dom容器对象)学习一个新的语言/框架，我们通常最先让他的输出显示hello world，那么接下来运用react的俩种方式输出hello world。2.在其中function App（）中找到return，将return中的基本样式清空，输入hello world2.使用react构建用户界面(type='text/babel"将代码进行转换，转换为能识别的代码)首先，要引入三行代码，见上一篇，做好准备工作，我们就可以开始正式进行了。
探秘C++React：让C++编程更灵动的响应式库
最新发布
gitblog_00472的博客
08-10 382
探秘C++React：让C++编程更灵动的响应式库 cpp.reactC++React: A reactive programming library for C++11.项目地址:https://gitcode.com/gh_mirrors/cp/cpp.react 在C++的世界里，C++React是一个独特的存在。它是一款基于C++14的反应式编程库，为开发者带来了声明式的数据依赖定义，...
React.js hello world
Stan的专栏
11-22 3267
React 官网上对它的介绍：A JavaScript library for building user interfaces从图书馆借了一本《React 快速上手开发》–Stoyan Stefanov写的，很薄，不到200页，开始啃。从它官网的宣传语可以看出来，React应该侧重点在于构建用户界面，它通过组件的方式来构建，实际开发中应该是根据需要自定义组件，再将这些组件通过一定的方式进行组合，来
react之“hello world”
liuzijiang1123的专栏
03-01 390
我相信大家踏入编程语言的第一步就是“哈喽，我的”。恩，学会这一句，世界就会是我们的了。为了降低学习成本，首先避开了“繁琐”的服务器环境搭建，直接依赖浏览器环境，在客户端先熟悉一下React语法和一些基础知识。 虽然不用配置服务器环境，但是要引入相关JS：react.js, react-dom.js, babel.min.js （不能太懒呀！） 还是我的老风格，预习“知识点”： 1.首
React 的 Hello World
代码小疯子
02-10 1930
1 项目创建 创建项目目录 demo1 ,然后使用 idea 打开 这个项目目录 ，然后打开 idea 的 termial 命令行工具 1.1 初始化项目 npm init 1.2 安装 browser-sync Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面 browsersync使用说明文档 npm inst...
React入门教程之Hello World以及环境搭建详解
10-19
Facebook 为了开发一套更好更适合自己的JavaScript MVC 框架，所以产生了react。...下面这篇文章主要给大家介绍了关于React入门教程之Hello World以及环境搭建的相关资料，需要的朋友可以参考借鉴。
React-1.实现HelloWorld
weixin_43444623的博客
12-06 169
初始化 npm init 简单配置一下package.json； 安装依赖 npm install react react-dom babel-standalone -S react 核心库 react-dom 提供与DOM相关的功能 babel-standalone 将JSX语法转为JS语法 编写一个helloworld.html文件 &lt;!DOCTYPE html&gt; &...
react基础helloWorld
weixin_45664217的博客
04-01 100
编写index.js文件,这个文件就是一个基础文件，基本代码也都是一样的。 编写App.js文件,这个文件可以用Simple React Snippets快速生成。 先输入imrc,再输入ccc 代码如下：
Hello-World-React：一个使用react的简单hello world程序
02-13
该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 相反，它将所有配置文件和传递依赖项（webpack，Babel，ESLint等）直接复制到您的项目中
React学习Hello World！
boysky0015的博客
08-04 245
天才就是无止境刻苦勤奋的能力－－卡莱尔 Hello World! 最简单的React例子，像下面这样： ReactDOM.render( &amp;amp;amp;lt;h1&amp;amp;amp;gt;Hello,World!&amp;amp;amp;lt;/h1&amp;amp;amp;gt;, //这里也可以是一个组件，后面会讲到。比如&amp;amp;amp;lt;Hello /&amp;amp;amp;gt; do
全栈开发技术学习笔记02--React中的HelloWorld
qq_56666242的博客
04-10 317
在React中，组件的返回值是一个React元素（或元素的数组），它是实际展示在页面上内容的描述。React元素是虚拟DOM的一部分，它们是轻量级的JavaScript对象，用来描述真实DOM中的节点。在这个文件中，我们定义了应用的顶层组件，即App组件，它是所有其他React组件的父级。函数组件是一种简洁的编写React组件的方式，当组件没有复杂的状态或生命周期逻辑时，通常推荐使用函数组件。React是一个来自react npm包的默认导出，它包含了创建React元素和组件所需的所有功能。
React学习-HelloWorld
JustDreamer的博客
11-15 108
React React是个前端框架，等等？我一个Java/Go后端写前端干啥？emmm，仅仅是好奇。没错，我要开始学学前端怎么玩了。其实在之前也学过，我当时学的是非常简单的Html，Css，Js，应该是17年左右吧，当时还没怎么听说过Vue，React。只是学了原生的前端三大工具：H5,Css,Js.其实先在虽然发展出了很多前端框架，但是万变不离其宗，浏览器还是只认得这三种标记，只不过简化了很多，但是最后还是被编译成了这三种语法。 DOM DOM这个概念我想有一点前端基础的人都知道，这个是Document
react学习—hello world
xun__xing的博客
04-14 378
hello world一、初用react1、React.createElement2、JSX 一、初用react 1、React.createElement <div id="root"></div> <!-- React的核心库，与宿主环境无关 --> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <!-- 依赖
学习React(2) - 用react 来写Hello World
CHNMSCS
06-22 469
在上一篇的学习React(1) 中已经介绍如何在VS Code中用react, 那么现在就将展示如何用react来写Hello World. 第一步： 先得在src文件夹下，创建一个js文件名, 博主就将这个文件名命名为：HelloWorld.js 。 第二步： 在 HelloWorld.js 文件里写入这几行代码： import React from 'react'; const HelloWorld = (props) => { return( <h1>Hel
react+typescript 编写一个简单的hello world
weixin_43398820的博客
03-27 2396
开发环境配置 利用create-react-app脚手架创建一个支持typescript语法的项目 create-react-app官方文档地址： https://create-react-app.bootcss.com/docs/getting-started 执行安装命令 npx create-react-app my-app --template typescript 注：最新的版本的npm需要加上–template npx是在安装npm5.2.0+时自动安装的 简单了解了一下：npx 会自动查
React 基础篇（二）—— HelloWorld
一个写代码的废物
11-04 126
使用脚手架创建一个 React 项目 通过命令：create-react-app react-demo --use-npm 创建一个项目。 打开项目后，在终端中输入 npm start 就可以看到一个脚手架默认创建的项目。 Hello World 在项目的 App.js 中，修改代码： import React from 'react'; import './App.css'; function...
react入门
05-26
React 是一个用于构建用户界面的 JavaScript 库。它被 Facebook 开发，用于构建 Facebook 和 Instagram 等应用程序的用户界面。React 通过组件化的方式构建用户界面，使得代码更易于维护和复用。下面是一个简单的 React 入门指南： 1. 安装 React React 可以通过 NPM 安装，可以在命令行中执行以下命令来安装 React： ``` npm install react react-dom ``` 2. 创建 React 组件 在 React 中，一个组件就是一个 JavaScript 类。下面是一个简单的组件示例： ```javascript import React from 'react'; class HelloWorld extends React.Component { render() { return <div>Hello World!</div>; } } export default HelloWorld; ``` 这个组件只是简单地渲染一个 `Hello World!` 的文本。 3. 渲染组件 要在页面中渲染组件，需要使用 `ReactDOM.render()` 方法。下面是一个简单的示例： ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import HelloWorld from './HelloWorld'; ReactDOM.render( <HelloWorld />, document.getElementById('root') ); ``` 这个示例中，我们首先导入了 `ReactDOM` 和 `HelloWorld` 组件，然后使用 `ReactDOM.render()` 方法将 `HelloWorld` 组件渲染到页面上。在这个示例中，我们将组件渲染到了一个 ID 为 `root` 的元素中。 这只是 React 的入门，React 还有很多其他的概念和功能，比如 JSX、状态、生命周期等等。如果您想深入了解 React，可以查看 React 官方文档，里面有很多有用的信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值