React是用于构建用户界面的JavaScript库，可以应用于web，app(react-native),VR(react 360)

目录

1  安装React

2  简单使用

2.1  在页面上创建一个元素

2.2  React.createElement()

2.3  ReactDom.render()

3  React脚手架

3.1  初始化项目

3.2  启动项目

3.3  使用脚手架

1  安装React

其中react是核心，react-dom包提供DOM相关功能

2  简单使用

2.1  在页面上创建一个元素

每次使用的时候先引用 react 再引用 react-dom

引入后我们简单用一下

• React不允许用户用等号定义全局变量，所以定义变量的时候变量前要加 var,const,let 这种关键字

2.2  React.createElement()

React.createElement()是创建元素用的

第一个参数是创建的标签名称

第二个参数是属性，如果没有属性就像上面一样写null

如果有属性就以对象的方式给属性，可以自定义属性也可以给class,id这种属性

第三个参数是创建元素的子节点，一个元素可以有多个子节点，第三个参数之后的参数都是元素的子节点

比如我们下面再创建的h1元素中再创建一个span元素

2.3  ReactDom.render()

ReactDOM.render()是渲染元素用的，第一个参数是要渲染哪个元素，第二个是要把渲染的元素放在哪里

在脚手架中 ReactDOM.render()这个方法已经快弃用了，后面会用ReactDOM.createRoot().render()替代

另外导入 ReactDOM 的方式也做了一些调整

3  React脚手架

脚手架是项目的管理工具，可以初始化项目，启动项目这些，类似于django中的manage.py

3.1  初始化项目

初始化项目的好处是好多配置已经默认的配置好了

React初始化项目的命令是 npx create-react-app [项目名称]

• 初始化项目需要等待一会儿，如果等待5分钟都没有响应就建议换源，国内的源都可以试一试
• 使用 npm init react-app my-app 与 yarn create react-app my-app 同样可以初始化项目

项目名称不能包含中文，不能包含大写字母

最后出现Happy hacking就代表项目创建成功了

3.2  启动项目

进入到项目的根目录，然后输入 npm start

运行后会自动打开这个网页

3.3  使用脚手架

我们上面看到的页面就是index页面，我们现在对其进行修改

删掉index.html原来的内容，里面只放一个div

删掉index.js原来的内容，里面的代码与 简单使用 中的JS代码相同，导入的方式做了一些改变，但意思不变，意思还是导入React和ReactDOM这两个库

之后你再进入页面，发现页面的内容改变了

• 使用 npm start 打开项目后，每一次修改代码都会对页面造成影响，不需要我们手动重启服务