在上一週談到ReactJS的核心概念 - 元件，就像一塊樂高積木能重複用在不同的情況（重用性）、與其他元件組合在一起（組合性），以及稍微淺談如何使用JSX建構最基本的元件－Hello World!

function oldFriend() {
		const greeting = "Hello, World!"
    return <h1>{greeting}</h1>;
}

所以今天讓我們用最完整的流程示範，如何建立一個元件並把它放在瀏覽器上呈現出來！

安裝ReactJS

ReactJS是基於Node.js的前端框架，所以想要有一個ReactJS專案就必須先有一個Node.js。

1. 建立Node.js容器

   打開我們的桌面板Docker應用程式，在搜尋欄輸入NodeJS，找到官方建立的Node.js Image

   

   下載完後，點擊Image就會出現剛剛下載的node image

   

   之後就要使用終端建立容器，這裡不用桌面版圖形介面建立容器，是因為NodeJS官方團隊只提供簡易的建立模式，只能設定容器名稱、掛載資料夾路徑和環境變數的輸入欄位

   

   若直接使用圖形介面建立容器，輸入

   容器名稱：ReactJSProject

   掛載資料夾路徑：（能直接在本地資料夾連接容器內資料夾的功能）

   • Host path：/home/ubuntu/ReactJSProject
   • Container path：/app

   點擊Run後，建立好的容器只會運行一下就立即停止了！不會一直運行！

   做到這裡的夥伴可能會認為自己做錯了，開始慌張了，但先冷靜別激動！這是這正常現象！

   因為雖然NodeJS成功安裝與運行了，但是新建立的NodeJS中沒有任何專案可以讓它一直跑，所以沒事幹的NodeJS跑完自己的程式碼就收工休息了，所以才會形成點擊start後便立即停止的狀況。為了避免這種情況只能在終端手動建立容器

   docker run --name ReactJSProject -it --volume /home/ubuntu/ReactJSProject:/app --publish 8000:80 node
   

   以下依依介紹每個參數在做甚麼

   • --name：為新建立的容器命名，我命名成ReactJSProject
   • -it：為新建立的容器建立虛擬終端，這樣容器建立好自動運行時，就能透過終端命令NodeJS了，讓它有事情做！
   • --volume：讓本地的資料夾與容器內的資料夾連結。這樣容器停止運行時我們可以透過本地資料夾查看我們在容器內建立的ReactJS專案程式碼。/home/ubuntu/ReactJSProject是我在本地建立的資料夾，ReactJSProject資料夾的內容就是容器內/app資料夾的內容
   • --publish 5173:5173：讓容器與本地有個資料傳輸的窗口，讓本地能夠訪問容器中運行的虛擬瀏覽器，5173為Vite預設的port

   實際運行的結果如下圖

   

   可以發現已經進入Node.js的REPL 模式，測試Javascript是否能正常編譯

   

   回到我們的Docker桌面板，可以發現ReactJSProject容器有正常建立與運行了！

   

2. 用VScode連結Docker容器

   1. 開啟VSCode，安裝Dev Containers插件，這樣我們才能用VScode遠端連結Docker容器

   2. 在VScode左下角有個><藍底按鈕，點擊後上方搜尋欄會跳出可執行的指令

      

   3. 選擇Attach to Running Container，會顯示當前正在運行的容器清單，選擇我們剛剛建立的容器

      

   這樣會自動開啟新的VSCode並且左下角從><變成><Container node(ReactJSProject)

   這樣就成功讓VScode連結Docker容器了~

3. 安裝ReactJS

   我們可以先在VScode的終端輸入 node --version與npm --version ，檢查NodeJS與NPM套件管理器是否有成功安裝

   

   <aside> ☝

   在安裝ReactJS之前別忘了把當前目錄導到/app資料夾，這樣我們才能從本地的/home/ubuntu/ReactJSProject資料夾內查看我們的專案程式碼

   </aside>

   <aside> 💡

   root@3a60b605a347，代表已經進入Docker容器內部的Linux環境了！3a60b605a347代表該容器的ID

   </aside>

   在終端執行

   npm create vite@latest reactjsproject -- --template react
   

   <aside> 💡

   這是基於Vite開發的ReactJS模板，能夠完全支持ReactJS，之所以用這個，是因為create-react-app 這個套件的社群維護網絡並不興盛，已經有許多不再支持的依賴套件，所以在執行npx create-react-app 時會跳出警告

   

   官方也在今年2月14日聲明該套件即將停用，所以我們改用Vite建構ReactJS專案

   </aside>

   

   可以發現左側出現reactjsproject資料夾，之後依照終端指示執行 npm install

   這邊要注意的是因為我們是使用Docker容器，必須使用

   npm run dev -- --host
   

   啟動Vite伺服器並讓其綁定0.0.0.0，讓容器能夠接收主機的任何IP，以下是有加host與沒加host的差別

   	npm run dev	npm run dev -- --host
   Vite 綁定位址	127.0.0.1:5173（僅限 container 內部自己用，主機無法用）	0.0.0.0:5173（開放所有網卡與 IP 都能連）
   Docker 外部能否連線？	❌ 不行，因為主機連不到 container 裡的 127.0.0.1	✅ 可以，因為主機連到 container 的 0.0.0.0
   瀏覽器 localhost:5173 是否正常？	❌ 無法連線	✅ 正常載入

   如果不想要每次啟動伺服器時都加host，可以在package.json中新增host。在package.json找到以下這段程式碼

   "scripts": {
       "dev": "vite --host", //新增--host
       "build": "vite build",
       "lint": "eslint .",
       "preview": "vite preview"
     },
   

   這樣只要輸入 npm run dev即可

   在瀏覽器網址處輸入 localhost:5173，就能成功運行ReactJS了

   

建立元件

建立名為Helloworld.jsx的檔案，其路徑在reactjsproject/src/components/HelloWorld/Helloworld.jsx。這樣能有效管理每個元件

<aside> 💡

ReactJS 使用小寫名稱識別為 HTML 標籤，所以如果使用小寫作為元件名稱，React 會將其視為 HTML，而非自定義元件

</aside>

<aside> ☝

一定要建立副檔名為.jsx而不是.js，要不然ReactJS無法把它視為JSX編譯

</aside>

function Helloworld() {
    const greeting = "Hello World";
    return <h1>{greeting}</h1>;
}

export default Helloworld;

匯入元件到根元件中

每一個ReactJS專案一定會有一個預設的根元件，根元件是所有 React 應用的基礎，所有其他元件都必須嵌套於根元件之中。

根元件通常位於src資料夾中，根元件檔案名稱可能會依照安裝ReactJS的方式的不同而有些微差距。

如果是使用create-react-app套件，則檔案名稱為index.js

如果是使用npm create vite@latest reactjsproject -- --template react，則檔案名稱為main.jsx

根元件預設狀態如下

//main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
     <App />
  </StrictMode>,
)