React入门

React 开发环境搭建

需要什么文件？

只需要引入以下3个js文件即可：

• react.js : 核心文件，基础文件
• react-dom.js : 渲染页面中的DOM,依赖于react.js文件，引用时必须在react.js的后面引用
• babel.js : ES6语法代码转为ES5，将JSX语法（浏览器不认识）转化为JavaScript语法（浏览器认识）

如何获取这三个文件？

使用npm的方式获取

注意：使用npm需要先安装npm，也就是安装node.js，安装node.js时会顺带安装npm

查看node.js版本 ： node -v

查看npm版本 ： npm -v

• react.js

  npm i react --save

• react-dom.js

  npm i react-dom --save

• bable

  npm i babel-standalone --save

具体操作流程：

（1）新建项目文件夹：

（2）win+R 打开控制台，cd进入项目文件夹

（3）输入如下命令行，创建package.json文件

npm init -y

（3）下载react.js

在项目文件目录下，使用命令行 npm install react --save 或 npm i react --save

使用npm 比较慢，也可使用 cnpm进行下载，下载镜像不同而已

cnpm install react --save

（4）下载react-dom.js

同上 cnpm install react-dom --save
（5）下载babel.js

新建html文件，引入三大文件

（1）新建hello.html文件

（2）引入核心文件react.js

在 react -> umd -> react.development.js

（3）引入react-dom.js和babel.js文件

注意：实际上是引入的文件是react-dom.development.js文件

创建根节点

创建dom根节点：一个页面下需要有一个根节点，这个节点下的内容就会被react所管理，后续内容都在根节点下，一个页面只有一个根节点。

JSX

示例：

let myDom =

你好啊，React!

;

//JSX格式 ： JavaScript和xml结合的一种格式

优点：

JSX格式 ： JavaScript和xml结合的一种格式

• 1.执行的效率更快

• 2.是类型安全的，编译的过程中就能及时的发现错误

• 3.在使用jsx的时候编写模板会更加简单和快速

简单示例和结果展示

代码：

说明：

ReactDOM.render(参数1,参数2)；

参数1：所定义的jsx格式的变量

参数2：目标div

作用：将参数1渲染到参数2所在div

运行结果：

本文章仅作测试使用，从其他编辑器复制过来的，图片无法显示。