來自 o Hero 的 React：課程入門

開發者們大家好，

歡迎來到我們的從0到英雄系列的第一課！在本教程中，我們將介紹 React 入門所需的絕對基礎知識。在本課程結束時，您將在電腦上安裝並運行 React，並且您將了解使 React 成為構建現代 Web 應用程式的強大庫的核心概念。

---

什麼是反應？

React 是 Facebook 建立的 JavaScript 函式庫，用於建立動態的互動式使用者介面。它專注於創建可重複使用的元件——它們是小的、獨立的程式碼片段——可以在整個應用程式中重複使用。 React 的聲明性本質使得建立複雜的 UI 變得簡單而高效，並且在 Web 開發社群中得到了廣泛採用。

---

為什麼要學習 React？

• 可重複使用元件：寫一次，隨處使用。 React 元件可讓您的程式碼更具可維護性和可擴充性。
• 快速且有效率：React 使用虛擬 DOM 來有效率地更新和渲染應用程式中需要更改的部分。
• 強大的社群：React 擁有龐大的工具和庫生態系統，是當今最受歡迎的前端框架之一。

---

第 1 步：安裝 Node.js 和 npm

在深入研究 React 之前，我們需要安裝 Node.js 和 npm （節點套件管理器）。這些將幫助我們管理依賴關係並運行 React。

如何安裝 Node.js 和 npm：

1. 下載 Node.js：前往 Node.js 官方網站並下載最新的穩定版本 (LTS)。安裝程式也將包含 npm。
2. 安裝 Node.js：執行安裝程式並依照指示操作。
3. 驗證安裝：安裝後，打開終端機或命令提示字元並鍵入以下命令以確保一切正常：

   node -v
   npm -v

您應該會看到 Node 和 npm 列印的版本。

---

第 2 步：設定您的第一個 React 應用程式

React 提供了一個名為 Create React App 的工具，它允許您快速建立一個新的 React 項目，而無需配置建置工具。

如何建立 React 應用程式：

1. 開啟終端機或命令提示字元。
2. 執行以下命令全域安裝Create React App：

   npx create-react-app my-first-react-app

這將建立一個名為 my-first-react-app 的新資料夾，其中包含開始使用所需的所有內容。

1. 導航到您的新專案目錄：

   cd my-first-react-app

1. 啟動你的 React 應用程式：

   npm start

這將開啟一個開發伺服器，您的預設瀏覽器應該會自動開啟一個選項卡，其中新的 React 應用程式在 http://localhost:3000/ 上運行。

---

第三步：探索專案結構

讓我們來看看Create React App建立的檔案和資料夾：

• public/：此資料夾包含 HTML 檔案和其他靜態資源（圖片、圖示等）。
• src/：這是所有 React 元件和主程式碼的位置。您將在這裡度過大部分時間。
• package.json：此檔案列出了專案的所有依賴項和腳本。

---

第 4 步：你的第一個 React 元件

現在，讓我們深入研究 src/App.js 文件，它定義了應用程式的主要元件。元件是一個傳回類似 HTML 程式碼的 JavaScript 函數（稱為 JSX）。預設組件如下所示：

import React from 'react';

function App() {
  return (
    <div classname="App">
      <h1 id="Hello-React">Hello, React!</h1>
      <p>Welcome to your first React app.</p>
    </div>
  );
}

export default App;

您可以編輯 App.js 檔案來自訂它。嘗試將標題更改為其他內容：

<h1 id="Welcome-to-React-from-to-Hero">Welcome to React from 0 to Hero!</h1>

儲存文件，您的瀏覽器將自動更新以顯示您的變更。

---

結論

恭喜！ ？您已經成功設定了您的第一個 React 應用程式並進行了第一個元件變更。這是你的 React 之旅的開始。在下一課中，我們將深入研究 React 元件，並學習如何管理 state 和 props 來建立動態使用者介面。

歡迎在下面留下評論或問題，敬請關注第二課！

---

接下來是什麼？

在下一課中，我們將介紹：

• 更深入了解組件
• 如何處理使用者互動
• 狀態和道具簡介

繼續編碼:)

以上是來自 o Hero 的 React：課程入門的詳細內容。更多資訊請關注PHP中文網其他相關文章！