React

JS

第二堂放課 React 初探

講師介紹

姓名：張雲淞

綽號：章魚

社團：建中資訊社 INFOR

職位：外交長兼學術

學術力：JavaScript、網頁前後端、Python、C++

教學課程：上學期放課 Discord.js、下學期社課 JavaScript、下學期放課 React

Instagram

社帳 Instagram

Review

基礎 & 語法複習

基礎語法複習

上一堂課的簡報

基礎語法複習

上學期網頁前端放課 @at

TypeScript

什麼是 TypeScript

TypeScript

  • 微軟開發的程式語言
  • 增加靜態型別系統
  • 需通過編譯為 JavaScript 程式
  • 開發期間偵測錯誤

TypeScript

與 JavaScript 的差異範例

function greet(name) {
  return "Hello, " + name;
}

greet(123); // "Hello, 123"
function greet(name: string): string {
  return "Hello, " + name;
}

greet(123); // 會發生報錯

Set up

環境設置

Node.js

讓 JavaScript 跨平台開發的開源執行環境

React 依賴 Node.js 開發

1. 進入 Node.js 官網

2. 點擊 Get Node.js®

3. 下載安裝程式並執行

4. 安裝完成

Node.js

這樣就安裝完成囉！

Visual Studio Code

微軟開發的文字編輯器

具豐富套件與功能，最常用的程式碼編輯器

1. 進入 VSCode 官網

2. 點擊 Download for Windows

3. 開啟安裝程式 .exe 並執行

4. 安裝完成

(建中電腦預設有安裝)

Visual Studio Code

安裝完成的畫面長這樣！

Build Tool

專案建置工具

Build Tool

  • 建置 React 專案的工具
  • 提供打包、運行的功能
  • 提供本地開發的開發伺服器、部署到伺服器的指令

Vite

Parcel

Rsbuild

Build Tool

Vite

Parcel

Rsbuild

  • 基於 ES Modules，開發時不須預先打包
  • 按需轉譯（on-demand transform），僅處理被請求的模組
  • HMR 單模組更新，更新時僅替換變更部分，不刷新整個頁面
  • Dependency Graph 全量建構，啟動先建構模組依賴圖（graph）
  • 先打包再執行（Bundling-first），完整解析、打包、壓縮後才輸出
  • 完全不須設定 config，自動做轉譯、壓縮、資源處理
  • 基於 Rust 的高效 bundler（Rspack），更為底層，可提高編譯效率
  • 高度並行（Multi-threaded Pipeline），多核心同時編譯、打包
  • Webpack 生態相容（Compatibility Layer），具高擴展性

Build Tool

Parcel

  • Dependency Graph 全量建構，啟動先建構模組依賴圖（graph）
  • 先打包再執行（Bundling-first），完整解析、打包、壓縮後才輸出
  • 完全不須設定 config，自動做轉譯、壓縮、資源處理

Build Tool

Rsbuild

  • 基於 Rust 的高效 bundler（Rspack），更為底層，可提高編譯效率
  • 高度並行（Multi-threaded Pipeline），多核心同時編譯、打包
  • Webpack 生態相容（Compatibility Layer），具高擴展性

Vite

由 Vue 作者尤雨溪開發

利用 ES Modules 提供高效率開發啟動與 HMR

1. 進入 Vite 官網，然後用不到

2. 第二步是第二步，比第一步多一步，此乃一勝

3. 第二步一勝第一步零勝，此乃二勝

4. 第二步完勝

Build a React app

建立 React 專案

快速入門

開啟 Visual Studio code，並開啟一個空的資料夾

快速入門

參照 React dev Learn

npm create vite@latest my-app -- --template react-ts

開啟 Terminal 並輸入以下程式碼，建立 vite 為基礎的專案

快速入門

參照 React dev Learn

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

遇到以上問題時可使用以下指令解決

快速入門

參照 React dev Learn

npm create vite@latest my-app -- --template react-ts

依照步驟安裝所需套件並執行，安裝完成後會自動執行

快速入門

參照 React dev Learn

開啟網址後，如果出現右圖畫面

代表成功建立第一個 React 專案了！

快速入門

參照 React dev Learn

node_modules/

  • 套件安裝到的資料夾
  • 由 npm install 產生
  • 包含 React、Vite、TypeScript…

不須上傳到 git

只要有 package.json 即可完整安裝

快速入門

參照 React dev Learn

public/

  • 網頁的靜態資源
  • 例如 icon、txt、大型靜態圖片等
  • 直接存取，不會被打包，不經過 Vite 處理

快速入門

參照 React dev Learn

src/

  • 主要程式的區域
  • main.tsx:
    • 主程式，把 React 掛到 HTML
    • 渲染 <APP />
  • App.tsx:
    • 一個基本的 React 元件

快速入門

參照 React dev Learn

src/

  • 主要程式的區域
  • index.css:
    • 會全域應用的 CSS 樣式
  • App.css:
    • 僅應用於 App 元件的 CSS 樣式

快速入門

參照 React dev Learn

assets/

  • 存放圖片、svg 等資源
  • 和 public 差別在於會被處理（hash、最佳化）

快速入門

參照 React dev Learn

index.html

整個專案的入口，啟動時先讀 index.html

vite.config.ts

vite 設定檔

package.json

專案設定檔（套件、指令設定）

快速入門

參照 React dev Learn

tsconfig.json

TypeScript 設定，型別檢查等

tsconfig.node.json

對於 vite/node 的 ts 設定

Thanks

歡迎下次再來！

Made with Slides.com