React 快速入门

本文通过一系列的示例代码,带大家快速入门 React.js。为了更快达成目的并减少困扰,我们会直接引入 react 的 JS 文件,而不使用脚手架或其他工具。因此,你只需要准备一个编辑器和一个浏览器即可开始!

声明:本文示例参考 React Demos(阮一峰),并在此基础上做了一些调整和补充说明。

HTML 模板

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React Demo</title>
    <!-- 加载 React。-->
    <!-- 注意: 部署时,将 "development.js" 替换为 "production.min.js"。-->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">

      // Demo code

    </script>
  </body>
</html>

说明:

  • 引入了 3 个必要的 js 文件,react.development.js 是 React 核心,必须在 react-dom.development.js 之前引入。
  • babel 是 ES6+ 语法的编译器。
  • React 示例代码放在 // Demo code 位置。

示例 1:Render JSX

JSX 是 React 中使用的 JavaScript 扩展库,其目的是在 JavaScript 代码中直接书写 HTML 标签。ReactDOM 是 React 的浏览器 DOM 渲染器,调用 render() 方法时会创建一棵虚拟 DOM 树,并将 JSX 代码转换为 HTML,渲染到真实的 DOM 节点中。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

Leave a Reply