React hello world

饮水思源：尚硅谷2021版React技术全家桶全套完整版

官网上找到一段入门代码修改了一下。

创建一个新的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算法，最小化页面重绘

 

posted @ 2021-12-05 18:37  xkfx  阅读(44)  评论(0)  编辑  收藏  举报