React 系列一：Hello React

快来加入我们吧！

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

"Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！

前言

这节我们将教你如何导入 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 了。

React 系列一：Hello React

快来加入我们吧！

前言

React 引入方法

实现 Hello React Demo

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

第二步：导入 React 依赖

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

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

小和山的菜鸟们

引用和评论

前端面试系列六：手写程序算法题

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合