使用 React.js 建立 Web 應用程式的教程

React.js 是一個流行的前端開發庫，用於建立互動式使用者介面 (UI)。它由 Facebook 開發，已被包括 Instagram、Airbnb 和 WhatsApp 在內的眾多知名公司採用。如果您正在尋找建立高效、快速且響應迅速的Web 應用程式的方法，React.js 或許是您的理想之選。

介紹

在開始之前，請確保您的電腦上已安裝 Node.js 和 npm（Node 套件管理器）。 Node.js 和 npm 至關重要，因為它們提供了使用 React.js開發 Web 應用程式所需的環境和工具。

步驟 1：初始化 React 項目

要建立一個新的 React.js 應用，我們可以使用 Create React App，這是一個應用程式建立工具，可以最大程度地簡化初始配置。在終端機或命令提示字元中執行以下命令：

“‘重擊
npx create-react-app我的應用
cd我的應用
npm開始
“

這條指令會建立一個名為 `my-app` 的新目錄，下載並安裝所有必要的依賴項，然後啟動開發伺服器。現在你可以打開瀏覽器並訪問 `http://localhost:3000` 來查看預設的 React.js 應用程式。

步驟二：資料夾結構

讓我們來看看 Create React App 建立的資料夾結構：

“
我的應用/
│ ...
│ │ 公共/
│ └── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
“

– `node_modules/`：包含專案的所有依賴項。
– `public/`：包含靜態文件，包括作為應用程式入口點的 `index.html`。
– `src/`：您將花費大部分時間在這裡。包含 React 元件、CSS 檔案和其他資源。

步驟三：刪除不必要的文件

為了從零開始，我們先刪除一些不必要的檔案。刪除 `src/` 資料夾下的 `logo.svg` 和 `App.test.js` 檔案。然後，開啟 `App.css` 和 `index.css` 文件，刪除其中的所有 CSS 程式碼，以便建立一個全新的樣式表。

步驟 4：建立您的第一個元件

React.js 是基於元件的。元件是建立 Web 應用程式的基本單元。讓我們修改 `App.js` 檔案來建立我們的第一個元件。

打開 `src/App.js` 文件，並將其替換為以下程式碼：

“`jsx
從“反應”導入反應；
導入'./App.css'；

函數應用程式（）{
返回（

);
}

導出預設應用程式；
“

使用 JSX（JavaScript XML）初始化 `App.js` 中的 React 程式碼，JSX 允許我們在 JavaScript 中編寫類似 HTML 的語法。儲存變更並在瀏覽器中查看結果。

步驟 5：新增組件

現在我們來新增一些新元件。在 `src` 資料夾內建立一個名為 `components` 的新資料夾。然後在 `components` 資料夾中建立一個名為 `HelloWorld.js` 的新檔案。

“`jsx
從“反應”導入反應；

function HelloWorld() {
返回（

);
}

export default HelloWorld;
“

開啟 `App.js` 文件，並匯入我們剛剛建立的 `HelloWorld` 元件：

“`jsx
從“反應”導入反應；
導入'./App.css'；
import HelloWorld from './components/HelloWorld';

函數應用程式（）{
返回（

);
}

導出預設應用程式；
“

現在，`App.js` 在主頁上渲染 `HelloWorld` 元件。

步驟 6：使用 useState 新增狀態管理

React 提供了非常強大的 Hooks 來管理狀態。讓我們為應用程式添加一些狀態。例如，新增一個計數器，每次點擊按鈕時計數器都會增加。

開啟 `HelloWorld.js` 文件，新增 state 和 `useState` hook：

“`jsx
import React, { useState } from 'react';

function HelloWorld() {
const [count, setCount] = useState(0);

const incrementCount = () => {
設定計數(計數 + 1)；
}

返回（

);
}

export default HelloWorld;
“

`count` 狀態的初始值為 0，每次按一下按鈕時，`incrementCount` 函數都會增加此值。

步驟 7：新增樣式

要新增樣式，我們可以在 `App.css` 檔案中使用 CSS，也可以使用像 styled-components 這樣的 CSS-in-JS 函式庫。不過，我們暫時先使用標準的 CSS。

打開 `App.css` 檔案並添加一些樣式：

“`CSS
。應用程式 {
文本對齊：中心;
}

.App-header {
背景顏色：282c34；
最小高度：100vh；
顯示：flex;
flex-direction：列;
align-items：居中;
對齊內容：居中；
字體大小：calc(10px + 2vmin);
白顏色;
}

按鈕 {
填充：10px 20px;
margin-top：20px;
font-size：16px;
}
“

步驟 8：使用 React Router 新增路由

為了在應用程式的不同頁面之間添加導航，我們可以使用 React Router。執行以下命令即可安裝 React Router：

“‘重擊
npm 安裝 react-router-dom
“

然後，在 `components` 資料夾中建立兩個新元件：`Home.js` 和 `About.js`。

`Home.js`：
“`jsx
從“反應”導入反應；

function Home() {
返回（

);
}

導出預設首頁；
“

`About.js`：
“`jsx
從“反應”導入反應；

function About() {
返回（

);
}

導出預設關於;
“

接下來，打開 `App.js` 檔案並設定路由：

“`jsx
從“反應”導入反應；
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
導入'./App.css'；
import HelloWorld from './components/HelloWorld';
import Home from './components/Home';
import About from './components/About';

函數應用程式（）{
返回（

);
}

導出預設應用程式；
“

這樣，我們就為應用程式的不同頁面之間添加了基本的導航功能。

關閉

這是一個使用 React.js 建立 Web 應用程式的基礎教學。我們涵蓋了專案設定、元件建立、狀態管理、樣式和路由。 React.js 擁有豐富的生態系統，其中包含眾多程式庫和工具，可協助您建立更複雜的 Web 應用程式。

祝你好運，希望這篇教學能幫助你開啟 React.js 的學習之旅！