安裝與設定 React 開發環境

發布於 2024/07/02

作者 Ned Hsu 4 分鐘閱讀

要開始使用 React 開發，您需要設置一個合適的環境。以下是詳細的安裝和設置步驟，帶您一步步建立起一個基礎的 React 開發專案。

React 依賴於 Node.js 和 npm（Node Package Manager）來管理依賴和開發環境。

安裝 Node.js：
- 進入 Node.js 官網。
- 下載並安裝最新的穩定版本（LTS版）。
- 安裝完成後，您可以在終端或命令提示符中使用以下命令來檢查安裝是否成功：
  1 2 node -v npm -v

React 提供了一個官方工具 Create React App，讓開發者能快速地初始化一個React專案，並內建Webpack和Babel等工具。

使用 Create React App 建立專案：
- 打開終端或命令提示符，執行以下命令來全域安裝 create-react-app：
  1 npx create-react-app my-app
  此命令將創建一個名為 my-app 的目錄，其中包含一個預配置的 React 應用。
- 進入專案資料夾：
  1 cd my-app

完成專案創建後，您可以立即啟動開發伺服器來查看應用效果。

啟動開發伺服器：
1 npm start
這會啟動本地開發伺服器，預設情況下會在 http://localhost:3000 打開應用程式。每次更改程式碼後，應用會自動重新整理，並即時反映變更。

打開 my-app 專案後，您會看到以下預設目錄結構：

my-app/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── App.js
│   ├── index.js
├── package.json

public/index.html：React 應用的唯一 HTML 文件，所有 React 組件都會掛載到這個文件中的 <div id="root"> 中。
src/index.js：應用的入口點，負責將 React 組件渲染到 DOM 中。
src/App.js：主組件文件，包含應用的初始邏輯和UI。

您可以開始修改 src/App.js 來更改應用的界面。

例如，將內容更改為以下代碼：

  
function App() {
  return (
    <div>
      <h1>歡迎來到我的 React 應用！</h1>
      <p>這是一個 React 的基礎範例。</p>
    </div>
  );
}

export default App;

保存後，瀏覽器會自動重新加載，並顯示更新後的內容。

VS Code：推薦使用 Visual Studio Code 作為編輯器，並安裝一些 React 擴展工具如 ES7 React/Redux/GraphQL snippets，以提高開發效率。
Browser Developer Tools：大多數現代瀏覽器都提供開發工具來檢查DOM，查看console輸出，和debug JavaScript代碼。

當應用開發完成後，您可以使用以下命令來將應用進行生產構建，準備部署：

npm run build

這將生成一個優化過的靜態文件，位於 build/ 目錄中，可以上傳到伺服器或部署到靜態網站託管平台，如 Netlify 或 GitHub Pages。

通過這些步驟，您已經成功安裝了 React 開發環境，並建立了第一個 React 應用。接下來，您可以開始編寫更多複雜的 React 組件來實現應用功能。

本文章以 CC BY 4.0 授權

熱門標籤