1、React初步认识
React构建Web和原生交互界面的库，相较于其它前端框架的优势，具有丰富的生态跨平台支持。
1.1、React的开发依赖
开发React必须依赖三个库：
- react：包含react所必须的核心代码；
- react-dom：react渲染在不同平台所需要的核心代码 ；
- babel：将jsx转换成React代码的工具；
1.2、VSCode代码片段
- 我们在前面练习React的过程中，有些代码片段是需要经常写的，我们在VSCode中我们可以生成一个代码片段，方便我们快速 生成。
- VSCode中的代码片段有固定的格式，所以我们一般会借助于一个在线工具来完成。
- 具体的步骤如下：
- 第一步，复制自己需要生成代码片段的代码；
- 第二步，https://snippet-generator.app/在该网站中生成代码片段；
- 第三步，在VSCode中配置代码片段；
1.3、案列
- 列表渲染
- 条件渲染
- 事件绑定和传参方式（hooks函数不用绑定this）
<!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>Learn React</title>
</head>
<body><div id="root"></div><script src="./lib/react.js"></script><script src="./lib/react_dom.js"></script><script src="./lib/babel.js"></script><script type="text/babel">// 1.定义根组件class App extends React.Component {constructor() {super()this.state = {message: "Hello App",movies: ["星际穿越", "大话西游", "盗梦空间", "少年派的奇幻漂流"]}}render() {return (<ul>{this.state.movies.map(item => {return <li key={item}>{item}</li>})}</ul>)}}// 2.渲染根组件const root = ReactDOM.createRoot(document.querySelector("#root"))root.render(<App/>)</script></body>
</html><!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>Learn React</title>
</head>
<body><div id="root"></div><script src="./lib/react.js"></script><script src="./lib/react_dom.js"></script><!-- <script src="./lib/babel.js&
