React
React（也稱為React.js或ReactJS）是一個自由及開放原始碼的前端JavaScript工具庫，用於基於UI組件構建使用者介面。
前置作業
首先到 nodejs 官網安裝 Node.js，它是一個後端 Javascript 運行環境，它使我們在瀏覽器之外運行我們的 Javascript 程式碼。
接著，我們需要安裝 vscode 程式碼編輯器，並執行以下步驟。首先創建一個資料夾，並在 vscode 中打開此資料夾，接著打開終端機。
接著在終端機輸入以下指令:
npm create vite@latest接著會要求輸入Project name ，你可以輸入底下常見的名稱:
my-react-app接著，使用上下鍵選擇 React 框架:
按下Enter後，會出現語言選項，一樣使用上下鍵選擇 Javascript 後按下 Enter。
最後按照畫面上的指示依序輸入以下指令:
cd my-react-appnpm installnpm run dev
這樣就大功告成了。最後複製終端機的網址貼到瀏覽器中就可以了。
之後如果我們要重新啟動伺服器，一樣開啟一開始創建的資料夾，打開終端機，依序輸入以下指令，就可以重新啟動囉:
cd my-react-appnpm run dev此時，我們著重在 my-react-app 資料夾，其結構大致如下所示:
node_modules/- 是負責用來存放經由 **npm**安裝過後的套件，該文件包含我們項目所依賴的外部庫(第三方庫)、套件包。
public/- 此目錄包含圖片、影片或其他資源檔。可透過URL使用他們。
src/- 這是你的主要開發資料夾，所有的 React 組件、CSS 和邏輯代碼都會在這裡編寫。
- 常見檔案：
main.jsx：應用的入口文件，負責將 React 組件渲染到 DOM 中。
/* 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>,
)
App.jsx：應用的主要組件，包含應用的核心邏輯。App.css：應用的主要樣式檔案，通常對應App.jsx。index.css：全域的樣式設定。
index.html。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
我們打開 App.jsx ，你會看到以下程式碼:
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
const [count, setCount] = useState(0)
return (
<>
<div>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App
React 的主要觀念是:
- React 應用由多个組件構成，每個组件負責渲染一部分 UI。
- 组件可以嵌套和複用，便于構建複雜的用户界面。
好，接下來我們自己寫一個組件試試看。首先把不需要的東西移除。
把 App.css 刪除，並且修改 App.jsx 程式碼，保留以下架構。
function App() {
}
export default App
然後我們要創建一個新檔案 (對著 src資料夾點右鍵然後按下(New File)，我將它命名為Component.jsx 。並寫入以下程式碼:
function Component() {
return (
<header>
<h1>Test</h1>
<p>Hi, nice to meet you!</p>
</header>
);
}
export default Component
接著，修改 App.jsx程式碼:
import Component from "./Component.jsx"
function App() {
return (
<>
<Component />
</>
);
}
export default App
import Component from "./Component.jsx";：從Component.jsx文件中導入Component組件。App是一個函數組件，是 React 應用的根組件。- 使用 React Fragment (
<></>)：包裹多個組件。 export default App;：將App組件作為預設導出。- 這樣其他文件可以通過
import App from "./App.jsx";來導入並使用App組件。
現在，你會看到網頁上輸出我們想要的內容。而在index.css中若還保有原來程式碼的話，將會套用全域樣式的設定，這部分我們可以先保留之後再做修改。
