React 環境建置與初步使用
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中若還保有原來程式碼的話，將會套用全域樣式的設定，這部分我們可以先保留之後再做修改。
3會員
33內容數
在當今數位時代，電資領域人才需求爆發式成長，不論是前端網頁設計、嵌入式開發、人工智慧、物聯網還是軟硬體整合，這些技術都在改變世界。而掌握 C/C++、Python、數位邏輯、電路學與嵌入式開發等大學電資領域的課程，正是進入這個高薪、高需求產業的關鍵！
留言
留言分享你的想法！
你可能也想看
Google News 追蹤
※ 補充說明：
※ npm 常用指令：
◦ npm init–y：快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。
◦ npm info 套件名稱 version：快速查詢指定 npm 套件的最新版本號。
◦ npm install套件名稱：用來安裝
本章節將引導你如何建立一個TypeScript開發環境，這包括安裝Node.js、npm和TypeScript，建立一個TypeScript項目，設置編輯器，以及編寫和編譯TypeScript代碼。在完成這些步驟之後，你將能夠編寫、編譯和運行TypeScript代碼。
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識，包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外，本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Express 是一個流行的 web 框架，使用 JavsScript 實現，執行在 node 環境上，主要用來寫後端應用。
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
※ Express 專案步驟筆記清單
Node.js 環境建置核對
新增專案資料夾
設定 package.json
npm init -y
設定程式入口為 app.js
安裝 Express：npm install express
設定主程式 app.js
建構應用程式伺服器
設定
前言
create react app 是一個可以快速設定 react 專案的一個工具，在建立專案時已經把 babel，webpack 都已經預先封裝設置好，如果我們要修改 webpack alias 設定該如何設定呢
什麼是 alias
alias 在 webpack 設定意義叫做，檔案路徑
※ 補充說明：
※ npm 常用指令：
◦ npm init–y：快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。
◦ npm info 套件名稱 version：快速查詢指定 npm 套件的最新版本號。
◦ npm install套件名稱：用來安裝
本章節將引導你如何建立一個TypeScript開發環境，這包括安裝Node.js、npm和TypeScript，建立一個TypeScript項目，設置編輯器，以及編寫和編譯TypeScript代碼。在完成這些步驟之後，你將能夠編寫、編譯和運行TypeScript代碼。
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識，包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外，本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Express 是一個流行的 web 框架，使用 JavsScript 實現，執行在 node 環境上，主要用來寫後端應用。
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
※ Express 專案步驟筆記清單
Node.js 環境建置核對
新增專案資料夾
設定 package.json
npm init -y
設定程式入口為 app.js
安裝 Express：npm install express
設定主程式 app.js
建構應用程式伺服器
設定
前言
create react app 是一個可以快速設定 react 專案的一個工具，在建立專案時已經把 babel，webpack 都已經預先封裝設置好，如果我們要修改 webpack alias 設定該如何設定呢
什麼是 alias
alias 在 webpack 設定意義叫做，檔案路徑