1. react的基本使用
react的安装
在VScode软件中创建了一个名为React_item项目，在React_item项目中选中react文件夹，点击右键，选择“在集成终端中打开”。在终端中输入“npm I react react-dom”来安装react。
图中安装了两个react文件
引入react文件
在html文件中引入react文件
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<title></title>
</head>
注意：必须是
src="./node_modules/react/umd/react.development.js"></script>文件先引入，再引入<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>，顺序不要错了。
创建react元素
- 参数一：要创建元素的名称，其实是html的标签
- 参数二：元素的属性
- 第三个及其以后的参数：元素的子节点（可以是文本节点，也可以是元素节点）。可以有多个节点
React.createElement('h1',null,'Hello React')
声明一个变量来接收一个react元素
const title= React.createElement('h1',null,'Hello React')
渲染react元素
利用
ReactDOM.render()方法来渲染
- 参数一：要渲染的react元素，即之前创建好的react元素。也可以是组件。
- 参数二：挂载点，表示要把元素渲染到页面中的哪个位置，利用
document.getElementById('root')来获取
ReactDOM.render(title,document.getElementById('root'))//其中'root'是一个id
代码实现
<script>
// 创建React元素
// 参数一：要创建元素的名称
// 参数二：元素的属性
// 第三个及其以后的参数：元素的子节点（可以是文本节点，也可以是元素节点）。可以有多个节点
React.createElement('h1',null,'Hello React')
// 声明一个变量来接收一个React元素
const title= React.createElement('h1',null,'Hello React')
渲染react元素：利用ReactDOM.render()方法来渲染
// 参数一：要渲染的react元素
// 参数二：挂载点，表示要把元素渲染到页面中的哪个地方，利用document.getElementById('root')来获取
ReactDOM.render(title,document.getElementById('root'))
</script>
2. react脚手架的使用
使用react脚手架初始化项目
1. 初始化react项目：在VScode终端使用命令：
npx create-react-app my-app（其中may-app是项目名称）来进行初始化。
出现Happy hacking说明初始化成功。
2. 启动项目：在项目的根目录下执行命令：
npm start或yarn start（要安装yarn）来启动项目。终端出现以下代码和自动出现网页说明启动react项目成功。
适用MAC的终端命令：
cd my-app
npm start
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.3.201:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
在脚手架中使用react
在项目my-app->src->index.js的文件中进行操作。
- 导入react和react-dom两个包。
import React from 'react'
import ReactDOM from 'react-dom'
- 调用React.createElement()方法来创建react元素。
const title = React.createElement('h1', null, 'Hello React !!')
- 调用ReactDOM.render()方法渲染react元素到页面中。
ReactDOM.render(title,document.getElementById('root'))
代码实现：
import React from 'react'
import ReactDOM from 'react-dom'
const title = React.createElement('h1', null, 'Hello React !!')
ReactDOM.render(title,document.getElementById('root'))