1、介绍
- React：构建用户界面的JavaScript库，由Facebook出品的JS框架；
- babel.min.js：JS编译器，将JSX转换为标准的JS代码；
- react.development.js：React开发版核心代码，用于创建UI；
- react-dom.development.js：提供与DOM相关的功能，将创建的UI渲染到浏览器中；
2、react的第一个简单程序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React第一个页面</title> </head> <body> <!-- 首先需要一个挂载点 --> <div id="root"></div> <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js"></script> <script src="../js/babel.min.js"></script> <script type="text/babel"> //注意type="text/babel",将解析JSX语法； // 1、创建虚拟DOM var msg = "Hello,React"; var h1 = <h1>{msg}</h1>; //JS语句必须放在{}中 // 2、将虚拟DOM挂载到真实DOM中 ReactDOM.render(h1,document.getElementById("root")); </script> </body> </html>
3、虚拟DOM创建的两种方式：
- 使用JSX，多使用！
<script type="text/babel"> //第一种必须声明type="text/babel" // 1、创建虚拟DOM var msg = "Hello,React"; var h1 = <h1>{msg}</h1>; //JS语句必须放在{}中 // 2、将虚拟DOM挂载到真实DOM中 ReactDOM.render(h1,document.getElementById("root")); </script>
- 使用纯JS创建
<script> // 1、创建虚拟DOM var msg = "纯JS创建虚拟DOM"; var virtualDom = React.createElement('h1',{id:"myID"},msg); // 2、将虚拟DOM挂载到真实DOM中 ReactDOM.render(virtualDom,document.getElementById("root")); </script>