1、介绍
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创建的两种方式：
<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>
<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>
原文：https://www.cnblogs.com/minyDong/p/12465046.html