React 系列一：Hello React

时间 2021-06-15

标签 html 前端 react babel app dom 工具学习 this spa 栏目 React 繁體版

原文原文链接

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

前言

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

本文会向你介绍如下内容：前端

React 引入方法
实现 Hello React Demo

React 引入方法

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

react：包含 react 核心代码
react-dom：帮助 react 在各平台渲染的核心代码
babel：将 JSX 转换为 React 代码的工具

React 的这三个依赖有如下几种方法进行引入：babel

使用 CDN 引入，直接使用 script 标签引入远程的 React 核心代码库
下载 React 核心代码库，使用本地导入
使用脚手架工具，使用包管理工具进行项目搭建

React 从一开始就被设计为逐步采用，而且你能够根据须要选择性地使用 React。对于初学者，咱们不建议你直接使用 React 脚手架建立项目，因此在这篇教程的前几章，咱们将使用 CDN 引入的方式，减小你对复杂操做的疑惑，先学会 React 和 JSX 语法。app

实现 Hello React Demo

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

第一步：建立一个容器放入 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'))

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

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

接下来让咱们来看看效果：spa

这是点击前的页面

这是点击后的页面

恭喜你已经完成了一个简单的 React demo 了。