- 准备好相关依赖
- 创建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>Hello React</title> </head> <body> </body> </html>
- 创建一个容器
<!-- 准备好员工“容器” --> <div id="app"></div>
- 引入React核心库
<!-- 引入ReactJS核心库 --> <script type="text/javascript" src="../JS/react.development.js"></script>
- 引入React-dom库
<!-- 引入React-DOM核心库，用于操作DOM --> <script type="text/javascript" src="../JS/react-dom.development.js"></script>
- 引入Babel
<!-- 引入Babel，用于编译jsx为js --> <script type="text/javascript" src="../JS/babel.min.js"></script>
- 创建虚拟DOM
<!-- 此处类型为babel --> <script type="text/babel"> // 1、创建虚拟DOM const VDOM = <h1>Hello React</h1> // 此处不能加引号，因为不是字符串 </script>
- 将虚拟dom渲染到页面
// 2、将虚拟DOM渲染到页面 ReactDOM.render(VDOM, document.getElementById('app'))
- 完整的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>Hello React</title> </head> <body> <!-- 准备好员工“容器” --> <div id="app"></div> <!-- 引入ReactJS核心库 --> <script type="text/javascript" src="../JS/react.development.js"></script> <!-- 引入React-DOM核心库，用于操作DOM --> <script type="text/javascript" src="../JS/react-dom.development.js"></script> <!-- 引入Babel，用于编译jsx为js --> <script type="text/javascript" src="../JS/babel.min.js"></script> <!-- 此处类型为babel --> <script type="text/babel"> // 1、创建虚拟DOM const VDOM = <h1>Hello React</h1> // 此处不能加引号，因为不是字符串 // 2、将虚拟DOM渲染到页面 ReactDOM.render(VDOM, document.getElementById('app')) </script> </body> </html>
