EP01 | React 18 全家桶複習 - 創建 React 項目

發表於 更新於 分類於 ，

相關配置說明

本次練習的 React 版本為 v18 並以 function component 作為主要講解及練習。

創建第一個 React 項目

  • 全局安裝

    1
    2
    npm i -g create-react-app
    create-react-app 項目名

  • 局部安裝

    1
    npx create-react-app 項目名

過程中會安裝 react(react 頂級庫)、react-dom(web 的運行環境)、react-scripts(react 運行及打包腳本配置)

此處可能遇到的問題
如果無法順利安裝，請確定是否有成功安裝 Node.js 及 npm (node -v 檢查)
如果都有順利安裝，則可再檢查環境變數 Path 路徑是否設定正確，可否正確地找到 node 指令的位置(%NODE_PATH%\npm-global)

成功安裝的畫面
:arrow_down:

1
2
3
4
5
6
|—— README.md 使用方法檔案
|—— node_modules 所有依賴安裝的文件夾
|—— package-lock.json 鎖定安裝時的版本號，確保下載時的依賴能一致
|—— package.json
|—— public 靜態公共目錄
|—— src 源代碼位置

自製 src 內源代碼

  1. 刪除除 index.js 外的其他文件。

  2. 檢視 index.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    import React from 'react';
    import ReactDOM from 'react-dom/client'; //
    import './index.css';
    import App from './App'; // 原始畫面
    //import reportWebVitals from './reportWebVitals'; //暫時不需要，可以刪除

    const root = ReactDOM.createRoot(document.getElementById('root'));

    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );

React-DOM v18 版本

React.StrictMode 作用

JSX 語法

  • JavaScript Expression 及屬性都用 {expression || 屬性} 包裹

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function APP() {
      let name = "Celeste";
      let img = {name: "照片", src: "http://..."}
      return (
        <div>
          使用 JSX
          {name}
          {img.src}
        </div>
      )
    }

  • 用大括號 {} 將 map() function 迭代包含在 JSX 裡面

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function APP() {
      const numbers = [1, 2, 3, 4, 5];

      return (
        <div>
          <ul>
            {
              numbers.map((number) =>
                <li>{number}</li>
              )
            }
          </ul>
        </div>
      )
    }

  • 指定樣式屬性名不能用 class ，須改用 className。

  • 在 HTML 標籤中使用 style 屬性時，要用 style={{ key: value }(object)} 的形式去寫。

  • 自訂義標籤必須閉合， 是錯誤的，才正確。

    • 自訂義標籤須以大寫字母開頭， react 才能去渲染相應的 Component。
    • 小寫字母開頭，會被視為是 HTML 中的同名元素。

注意： 多行 JSX 須用括號包裹來避免遇到自動分號補足的麻煩(避免與他行相連造成 JS 不必要的誤認)。

函式組件

本次練習主要集中在 Function Component (FC)，關於 Class Component 就不另介紹。

Component 的目的是透過將 UI 拆分成各個獨立且可複用的程式碼。

透過 FC 返回 JSX 代碼，React 就能夠渲染這些代碼產生的畫面。
注意： FC 是沒有 this 的，所以在 FC 中是不會出現 this。

1
2
3
4
5
6
7
function APP() {
  return (
    <div>
      我會變成一個組件 <APP />，之後就可以放置在畫面中囉!!!
    </div>
  )
}