React 新手路（一）：初識 React、JSX 與 元件

Ozzie發表於2020-01-14
ReactJS元件

小介

初次接觸 react，圍繞一個很小的 demo，初步學習瞭如何寫 react，如何使用 JSX 語法糖、元件、瞭解了 babel 配置等等，哎，期末考試終於結束了哈哈哈 (^▽^)

初識 react 與 JSX

原始寫法

  1. 新建 test.html 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Day1</title>
    <!-- 載入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>
</head>
<body>
    <!-- 存放 react 元件的容器 -->
    <div id="container"></div>
    <!-- 載入你的 React 元件. -->
    <script src="test.js"></script>
</body>
</html>
  2. 新建 test.js 
    'use script'
class HelloMessage extends React.Component {
render() {
    return React.createElement (
            "div",
            null,
            "Hello ",
            this.props.name
        );
    }
}
ReactDOM.render(
    React.createElement( HelloMessage, { name: "Ozzie" } ),
    document.getElementById("container")
)

使用JSX

  1. 簡單瞭解 JSX
    • 相關文件：JSX 、JSX · TypeScript 、JSX 簡介
    • 雖然 JSX 語法糖並不是必須的，但是在 React 官網首頁 中，可以明顯地感受到 JSX 很利於提升開發效率，例如：
      • 未用 JSX 
        class HelloMessage extends React.Component {
    render() {
        return React.createElement (
            "div",
            null,
            "Hello ",
            this.props.name
        );
    }
}
ReactDOM.render(
    React.createElement( HelloMessage, { name: "Ozzie" } ),
    document.getElementById("container")
)
      • 現在我們使用 JSX，在 test.js 中，將上面的程式碼改為： 
        class HelloMessage extends React.Component {
    render() {
        return (
            <div>
            Hello {this.props.name}
            </div>
        );
    }
}
ReactDOM.render(
    <HelloMessage name="Ozzie" />,
    document.getElementById("container")
)
    • 但是，瀏覽器並不能直接解析 JSX 程式碼，我們需要使用 webpack 和 babel 來處理
  2. 初識 babel
    • 相關文件瞭解：Babel
  3. 現在，我們的檔案目錄如下： 
    |-test.html
|-test.js
  4. 安裝 webpack 與 webpack-cli 
    npm init -y
npm install webpack webpack-cli --save-dev
  5. 安裝 babel-loader、babel-core、babel-preset-env、babel-preset-react 
    npm install babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
  6. package.json 中的 "main" 已經是 test.js ，所以此處不做修改
  7. 配置 webpack：新建 webpack.config.js： 
    const path = require('path');
module.exports = {
    mode: 'development',
    entry: './test2.js',
    output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
},
module: {
    rules: [{
            test: /.\js$/,
            exclude: '/node_modules/',
            options: {
                presets: ['@babel/preset-env']
            },
            loader: "babel-loader",
        }]
    }
}
  8. 此時，還需配置一個 babel 規則，新建一個 .babel 檔案： 
    {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

檢視效果

  1. 如今，所有的配置工作都已經完成，我們需要將新的 test.js 打包： 
    npx webpack
  2. 我們現在需要的是 bundle.js 而非 test.js，所以，我們需要將 html 修改一個地方： 
    <!-- 載入你的 React 元件 -->
<script src="./dist/bundle.js"></script>
  3. 開啟 test.html 檢視結果即可

參考資料

  1. webpack 配合 babel 使用
  2. 使用 Babel

將官方連結打包

  1. 我們現在的檔案目錄是： 
    |-dist
    -bundle.js
|-node_modules
|-test.html
|-test.js
|-webpack.config.js
|-package.json
|-package-lock.json
|-.babelrc
  2. 之前為了寫 react ，我們用 script 引入了兩個官方給的兩個連結，實際上，我們可以通過 webpack 將這兩個檔案直接打包到 bundle.js 中
  3. Node.js 提供了 npm 這個極其強大的包管理工具，我們去搜尋 react 再下載即可：NPM
    • 搜尋 react 與 react-dom

  4. 仔細閱讀那上面的說明，我們下載如下： 
    npm install --save react react-dom
  5. 現在直接刪除那兩個連結，然後在 test.js 中修改即可
    • 刪除 test.html 中的那兩個連結
    • 在 test.js 的開始處新增： 
      import React from 'react';
import ReactDOM from 'react-dom';
  6. 再次使用 npx webpack 打包，檢視結果，這與之前加入連結的結果沒有區別

多個元件

功能分開

  1. 上面我們只寫了一個元件，元件的定義和呼叫都集中在 test.js 中，但是當元件多起來之後，我們最好將這兩個功能分開：分別建立專寫元件的和專呼叫元件的檔案

  2. 將 test.js 的內容修改如下：

    import React from 'react';
import ReactDOM from 'react-dom';

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    )
  }
}

//匯出元件
export default HelloMessage;
    • 這裡只保留了定義元件的部分，最後用 export 來將元件匯出

  3. 新建 app.js，這個將作為我們引用元件的檔案

    import React from 'react';
import ReactDOM from 'react-dom';

//引入元件
import HelloMessage from './test2.js';

ReactDOM.render(
  <HelloMessage name="Ozzie" />,
  document.getElementById('container')
)

打包

將 webpack.config.js 的入口檔案修改為 app.js，再打包即可

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章