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

這是點擊前的頁面