大匠之風: 5月 2025

用 Vite，別再用 CRA

2025年02月，React 官方公告，建議使用 Vite，所以別再用 CRA (create-react-app)

看了許多 React 的入門資料，還有很多古典資料，大多還是從 create-react-app 專案起始，用久了覺得很不舒服

NPM 編譯經常無預期出錯

NPM 編譯經常無預期出錯，學習 React 免不了會經過一連串試錯的過程

但往往會不經意的出現許多編譯錯誤，例如在安裝某 UI 套件時，就遇到依賴套件版本衝突的問題，錯誤訊息洋洋灑灑一大篇，

指向的卻是 Webpack 內部模組的錯誤，對於當時的我來說，根本無從下手

在無法排除錯誤的情形下，最常做的就是重建 node_modules 內容，次數一多

是在學習 React 還是背誦 NPM i 指令，我已經搞不清楚了

在設計時期，前端和後端 API 網域位置不一致時

只要不是靜態網頁，在前端的開發過程一定會和後端 API 傳遞訊息，尤其是開發網頁應用程式更是必須

在設計時期，只要前端和後端的 Web 服務網域不同，就一定會遇上【跨來源資源共用（Cross-Origin Resource Sharing (CORS)）】這個大魔王

後端就必須進行 CORS 設定，但實際上線又會是在同一網域，只有開發時期才會遇到的 CORS 顯得是非常詭異的歷程。

你以為要從 JavaScript ES6 開始學習，事實上

包含 React 官方網站，很多學習 React 的資料顯示，JavaScript ES6 是必須先學會的基礎，我認為這是造成 React 陡峭的學習曲線的罪魁禍首

許多社團新手遇到的問題大多是編譯 React 時產生的異常狀態，NPM 會回傳非常完整的【長篇報告】，也因為內容非常的多

若直接複製貼上，只會造成有心要幫忙的人在理解前還必須先把整篇報告看過一輪，除錯到心累。

React 三大核心

React 是水很深的函式庫之一，技術中心思想在【狀態的傳遞】，基於中心所延伸出來的有三大核心：

React : 屬性、狀態、事件、元件和元件狀態互動等。
Router : 頁面到頁面間狀態的互動
Redux : 全域狀態管理

React 的問題大多就是狀態問題，Router 和 Redux 都是 React 官方沒做但是推薦的解決方案，都是學習 React 過程中必須學習的技能。

我歸納學習 React 學習資源後，發現從 create-react-app 幾乎就是給新人從入門到放棄的好專案，而我認為學習 React 路線有二：

拿掉 NPM 編譯，純粹的 React
擁抱編譯，從 Vite 開始

使用 esm.sh。拿掉 NPM 編譯，純粹的 React

使用 esm.sh，就可以先專注在 React 的學習，esm.sh 也支援 JSX，範例如下：

<!doctype html>
<html>
<head>
<script type="importmap">
{
  "imports": {
    "react": "https://esm.sh/react@19.1.0",
    "react-dom/client": "https://esm.sh/react-dom@19.1.0/client"   
  }
}
</script>
<script type="module" src="https://esm.sh/tsx"></script>
</head>
<body>
  <div id="root"></div>
<script type="text/babel">
import React from "react";
import { createRoot } from 'react-dom/client';

const rootElement = document.getElementById("root");

const App = <h1>Hello, Eden</h1>;

const root = createRoot(rootElement);
root.render(App);

</script>
</body>
</html>

後面程式碼要使用 React 的時候，瀏覽器就知道要去 esm.sh 下載

esm.sh 讓瀏覽器看懂 JSX 語法

擁抱編譯，從 Vite 開始

在 npm 下，使用 vite cli 指令建立 vite react 專案

npm create vite@latest

接著按精靈指引，依序填入專案名稱、目錄名稱等內容

完成後，進入指定目錄就可以使用 npm 啟動 vite 建立的 React 網站，並開始學習 React 入門

cd Eden-vite-project
npm install
npm run dev

大匠之風

網頁

2025/05/09

還在 React 從入門到放棄？告訴你選擇比努力還重要的事