"小和山的菜鸟们"，为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 (https://xhs-rookies.com/) 进行学习，及时获取最新文章。

前言

这节咱们将教你如何导入 React 并率领你编写出一个简略的 React 页面。

本文会向你介绍以下内容：

  • React 引入办法
  • 实现 Hello React Demo

React 引入办法

React 开发必须依赖三个库，别离是：

  • react：蕴含 react 外围代码
  • react-dom：帮忙 react 在各平台渲染的外围代码
  • babel：将 JSX 转换为 React 代码的工具

React 的这三个依赖有以下几种办法进行引入：

  • 应用 CDN 引入，间接应用 script 标签引入近程的 React 外围代码库
  • 下载 React 外围代码库，应用本地导入
  • 应用脚手架工具，应用包管理工具进行我的项目搭建

React 从一开始就被设计为逐渐采纳，并且你能够依据须要选择性地应用 React。对于初学者，咱们不倡议你间接应用 React 脚手架创立我的项目，所以在这篇教程的前几章，咱们将应用 CDN 引入的形式，缩小你对简单操作的纳闷，先学会 React 和 JSX 语法。

实现 Hello React Demo

Demo 性能介绍：界面中有一个按钮和一个文本框，当你第一次点击按钮，文本框会从 hello React 变成 hello xhs-rookies。

第一步：创立一个容器放入 HTML

<div id="app"></div>

第二步：导入 React 依赖

<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 src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

第三步：编写须要实现的组件

这一步将应用到前面须要学习的 JSX 语法和组件写法，临时你不须要了解这些代码的含意，咱们将很快带你学习。

<script type="text/babel">  class App extends React.Component {    constructor() {      super();      this.state = {        message: 'hello React'      }    }    render() {      return (          <div>            <p>{this.state.message}</p>            <button onClick={() => this.setState({message: 'hello xhs-rookies'})}>点我一下</button>          </div>      )    }  }</script>

此处的 script 标签肯定要定义 type 为"text/babel"，这样 babel 将会解析咱们所写的 JSX 代码。

第四步：将所写的组件挂载到容器上

ReactDOM.render(<App />, document.getElementById('app'))

综上，你的代码将变成这样

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <title>Title</title>  </head>  <body>    <div id="app"></div>    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>    <script type="text/babel">      class App extends React.Component {        constructor() {          super()          this.state = {            message: 'hello React',          }        }        render() {          return (            <div>              <p>{this.state.message}</p>              <button onClick={() => this.setState({ message: 'hello xhs-rookies' })}>                点我一下              </button>            </div>          )        }      }      ReactDOM.render(<App />, document.getElementById('app'))    </script>  </body></html>

接下来让咱们来看看成果：

这是点击前的页面

这是点击后的页面

祝贺你曾经实现了一个简略的 React demo 了。