官网上找到一段入门代码修改了一下。
创建一个新的HTML页面，在Body的末尾添加上：
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
第一行是react的核心，第二行是dom相关的，需要注意引入顺序。
然后可以加script：
const domContainer = document.getElementById("test");
const vDOM = <h1>hello world</h1>
ReactDOM.render(vDOM, domContainer);
这样子运行不出来会报错。需要<script type= "text/babel">，这样子就不报错了，但是依然不显示，因为没有引入相关的.js文件。这边换一种办法，这个网站https://babeljs.io/有在线工具可以把babel代码转化成浏览器可以运行的js代码，结果如下：
const domContainer = document.getElementById("test");
const vDOM = /*#__PURE__*/React.createElement("h1", null, "hello world");
ReactDOM.render(vDOM, domContainer);
用新代码替换旧代码，这样就可以运行了。完整代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Add React in One Minute</title> </head> <body> <div id="test"></div> <!-- 加载 React。--> <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。--> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <script> const domContainer = document.getElementById("test"); const vDOM = /*#__PURE__*/React.createElement("h1", null, "hello world"); ReactDOM.render(vDOM, domContainer); </script> </body> </html>
react的特点：
- 声明式编码
- 组件化编码（原生JS开发是html js css三个分离，react可以把三个弄在一起）
- React Native编写原生应用
- 高效（优秀的Diffing算法）
react高效的原因：
- 使用虚拟DOM, 不总是直接操作页面真实DOM
- DOM Diffing算法，最小化页面重绘