react是一个将数据转换为html的js库
react英文官网：https://reactjs.org
react中文官网：https://react.docschina.org
用react渲染一段文字：
<!DOCTYPE html> <html lang="en"> <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"> <title>hello-react</title> </head> <body> <!-- 准备一个容器 --> <div id="test"></div> <!-- 引入react核心库 --> <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.min.js"></script> <!-- 引入react-dom, 用于支持react操作dom, 需要在核心库之后引入 --> <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script> <!-- 引入babel.js，用于将jsx转化为js --> <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.18.7/babel.min.js"></script> <script type="text/babel">/* 此处一定要写babel jsx */ // 1.创建虚拟dom const VDOM = <h1>hello, react</h1> /* 此处不要写引号，因为不是字符串 */ // 2.渲染虚拟dom到页面 ReactDOM.render(VDOM, document.getElementById('test')) </script> </body> </html>
用js创建虚拟dom（React.createElement）;jsx其实是这种语法的语法糖，jsx会帮我们转换成以下代码，创建虚拟dom。
<!DOCTYPE html> <html lang="en"> <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"> <title>使用js创建虚拟dom</title> </head> <body> <!-- 准备一个容器 --> <div id="test"></div> <!-- 引入react核心库 --> <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.min.js"></script> <!-- 引入react-dom, 用于支持react操作dom, 需要在核心库之后引入 --> <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script> <script type="text/javascript"> // 1.创建虚拟dom // React.createElement(标签名，标签属性，标签内容); const VDOM = React.createElement('h1', { id: 'title' }, 'hello,React'); // 2.渲染虚拟dom到页面 ReactDOM.render(VDOM, document.getElementById('test')) </script> </body> </html>
jsx规则：
（1）jsx全称：javascript xml
（2）react定义的一种 类似于 xml 的js扩展语法： js + xml
（3）本质是React.createElement(component, props, ...children)方法的语法糖。
（4）作用：用来简化创建虚拟DOM
a、写法： var ele = <h1>hello, React</h1>
b、注意1：他不是字符串，也不是HTML/XML标签
c、注意2：他最终产生的是一个js对象
（5）标签名任意：HTML标签或其它标签
（6）定义虚拟DOM时不要写引号
（7）标签中混入js表达式时要用{}
（8）样式的类名指定不要用class，要用className
（9）内联样式要用style={{key:value}}的形式去写
（10）只有一个根标签
（11）标签必须闭合
（12）标签首字母
a、若小写字母开头，则将该标签转换为html标签同名元素，若html没有该标签对应的同名元素，则报错。
b、若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
（13）jsx不能写 单行注释// 多行注释/**/ 可以在{}中写js的单行注释和多行注释
（14）jsx中可以写js表达式，但不能写js语句
js表达式和js语句的区别？
1.一个表达式会产生一个值，可以放在任何一个需要值的地方
用一个变量去接，能接到值的就是表达式， const a = 表达式
比如下面这些都是表达式：
（1） a 变量
（2）a+b
（3）fn(1) 函数调用表达式
（4）arr.map()
（5）function test() {}
<!DOCTYPE html> <html lang="en"> <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"> <title>hello-react</title> <style> .tittle{ width: 200px; background: orange; } </style> </head> <body> <!-- 准备一个容器 --> <div id="test"></div> <!-- 引入react核心库 --> <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.min.js"></script> <!-- 引入react-dom, 用于支持react操作dom, 需要在核心库之后引入 --> <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script> <!-- 引入babel.js，用于将jsx转化为js --> <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.18.7/babel.min.js"></script> <script type="text/babel">/* 此处一定要写babel */ const myId = 'Guigu'; const myData = 'hello, React'; // 1.创建虚拟dom const VDOM = ( <div> <h1 className="tittle" id={myId.toLowerCase()}> <span style={{color:'white', fontSize:'20px'}}>{myData}</span> </h1> <h1 className="tittle" id={myId.toUpperCase()}> <span style={{color:'white', fontSize:'20px'}}>{myData}</span> </h1> <input type="text" /> { // <Good>good标签</Good></Good> jsx不能用 // 单行注释 /**/多行注释 因为jsx会把注释当成内容 } </div> ) // 2.渲染虚拟dom到页面 ReactDOM.render(VDOM, document.getElementById('test')) </script> </body> </html>
jsx小练习，遍历
<!DOCTYPE html> <html lang="en"> <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"> <title>jsx小练习</title> <style> .tittle{ width: 200px; background: orange; } </style> </head> <body> <!-- 准备一个容器 --> <div id="test"></div> <!-- 引入react核心库 --> <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.min.js"></script> <!-- 引入react-dom, 用于支持react操作dom, 需要在核心库之后引入 --> <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script> <!-- 引入babel.js，用于将jsx转化为js --> <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.18.7/babel.min.js"></script> <script type="text/babel">/* 此处一定要写babel */ const data = ['Angular', 'React', 'Vue']; // 1.创建虚拟dom const VDOM = ( <div> <h1>前端js框架列表</h1> <ul> { // 不能用index直接做key，这里先用着 data.map((item,index) => { return <li key={index}>{item}</li> }) } </ul> </div> ) // 2.渲染虚拟dom到页面 ReactDOM.render(VDOM, document.getElementById('test')) </script> </body> </html>
react可以用两种方式定义组件，1：函数式组件 2：类组件
函数组件：
<script type="text/babel">/* 此处一定要写babel */ // 1.创建函数式组件(函数组件，开头必须大写) function Demo() { console.log(this); // undefined babel翻译完了会变成严格模式，严格模式下，进制自定义函数中的this指向window return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2> } // 2.渲染组件到页面 ReactDOM.render(<Demo />, document.getElementById('test')) /** * 执行ReactDOM.render()之后发生了什么？ * 1.React解析组件标签，找到了Demo组件 * 2、发现组件时函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中 * */ </script>
类式组件：（如果组件有状态state，就是复杂组件，就用类式组件,不过在新版本上，hooks让函数式组件也可以玩转props、state、refs）
<script type="text/babel">/* 此处一定要写babel */ // 1.创建类组件(适用于复杂组件) class Demo extends React.Component { render() { console.log(this); // this是Demo类的实例对象 return <h2>我是用类定义的组件，适用于定义【复杂的】组件</h2> } } // 2.渲染组件到页面 ReactDOM.render(<Demo />, document.getElementById('test')) /** * 执行ReactDOM.render()之后发生了什么？ * 1.React解析组件标签，找到了Demo组件 * 2、发现组件是类定义的，随后new出来该类的实例，并通过该实例调用到原型链上的render方法 * 3、将render返回的虚拟DOM转换为真实DOM呈现在页面中 * */ </script>
类中所有方法在内部都开启了 严格模式 use strict
-