什么是react？ 定位：一个快速构建前端视图的javaSrcipt库。
基本使用
目录结构
下载相关插件及配置 npm i webpack webpack-cli @babel/core @babel/cli @babel/plugin-transform-react-jsx -D npm i react react-dom -S
react的包
react：react的核心语法 比如，如何创建虚拟domreact-dom：提供了转换能力，把react的虚拟dom转换成真实dom的能力npm i babel-loader css-loader style-loader -D
webpack.config.js文件配置
let path = require('path') module.exports = { //入口文件 entry: path.join(__dirname, 'src/index.js'), //出口文件 output: { filename: '[name].js', path: path.join(__dirname, 'dist') }, mode: 'development', module: { rules: [{ test: /\.(js)$/, use: ['babel-loader'] }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }] } }.babelrc文件：
{ "plugins": [ ["@babel/plugin-transform-react-jsx", { "pragma": "React.createElement", // default pragma is React.createElement "pragmaFrag": "Preact.Fragment", // default is React.Fragment "throwIfNamespace": false // defaults to true }] ] }index.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"></div> </body> </html> <script src="./dist/main.js"></script>src文件下新建index.js：
import React from 'react' import ReactDom from 'react-dom' //创建虚拟dom 语法：React.createElement(type,props,children) const app = React.createElement('div',{ className:'vDom' },'23333') console.log(app) //把虚拟dom转换成真实dom ReactDom.render() ReactDom.render(app,document.getElementById('app'),()=>{ console.log('渲染成功') })创建虚拟dom 语法：React.createElement(type,props,children) 本质是一个对象 第一个参数type，必填，传入的是html标签名 div等 第二个参数props 一个对象，必填，写的是属性 如：{className:‘box’} 第三个参数children 子节点，选填，要显示的内容 对象
把虚拟dom转换成真实dom ReactDom.render() 第一个参数：虚拟dom 第二个参数：想要挂载到的节点 第三个参数：回调 挂载完成后要做什么事情
最后执行npx webpack -w生成打包后的js文件，到html里引入查看效果
jsx jsx不是合法的js语法，不能正确执行 以jsx的语法表示虚拟dom更加方便和形象(和真实dom差不多) 需要使用babel进行转码
import React from 'react' import ReactDom from 'react-dom' //创建虚拟dom 语法：React.createElement(type,props,children) //const app = React.createElement('div',{ // className:'vDom' //},'23333') //console.log(app) const myStyle = {fontSize:20,color:'red'} const myClassName = ['user','box','content'] const app = <div id="root" className="users" style={myStyle} className={myClassName.join(' ')}> //因为在react里没有for循环，假如有一个数组需要循环渲染 需要加key { [1,2,3].map((item,index)=><li key={index}>{item}</li>) } </div> //把虚拟dom转换成真实dom ReactDom.render() ReactDom.render(app,document.getElementById('app'),()=>{ console.log('渲染成功') })react中的jsx的一些注意事项：
class属性都要写成classNamefor属性要写成htmlFor循环列表的时候，需要加key key={index} jsx中属性写法：一种是引号，一种是大括号style和class接收一个样式对象表达式{ { color:’red’ } }
jsx语法特性： 使用{}去区分xml环境和js环境 遇到{}就会解析js代码 遇到<>就会解析xml语法 当渲染内容是一个数组的时候，会自动展开 {[1,2,3,4]} → 1234 jsx中一定要写能被渲染的内容(数字、字符串、数组、虚拟dom) jsx不是合法的js语法，所以不能被js引擎执行
