React是什么？ react.docschina.org/docs/gettin…

React 是一个用于构建用户界面的 JavaScript 库。流行的 React 工具链，它们有助于完成如下任务：

扩展文件和组件的规模。

使用来自 npm 的第三方库。

尽早发现常见错误。

在开发中实时编辑 CSS 和 JS。

优化生产输出。

Create React App 不会处理后端逻辑或操纵数据库；它只是创建一个前端构建流水线（build pipeline），所以你可以使用它来配合任何你想使用的后端。它在内部使用 Babel 和 webpack，但你无需了解它们的任何细节。

前期准备

1.创建一个名为React的文件夹，里面新建内容如图

本文参考React官方文档指引，使用引入JS的方式使用React.js 具体的代码如下：

参考地址：react.docschina.org/docs/add-re…

  <!-- 加载 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>

  <!-- 加载我们的 React 组件。-->
  <script src="like_button.js"></script>

步骤 1： 添加一个 DOM 容器到 HTML

步骤 2：添加 Script 标签

接下来，在 </body> 结束标签之前，向 HTML 页面中添加三个 <script> 标签：

步骤 3：创建一个 React 组件

在 HTML 页面文件的同级目录下创建一个名为 like_button.js 的文件。

把下面的代码复制粘贴到'like_button.js'文件中

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

Vscode 使用F5 打开浏览器进行调试

控制台出现React信息，按钮组件生成，点击按钮，出现文字