一、React 介紹
React 是一個由 Meta（原Facebook） 開發和維護的 開源JavaScript庫，主要用于構建用戶界面（User Interface, UI）。它是前端開發中最流行的工具之一，廣泛應用于單頁應用程序（SPA）和移動端應用開發中。
1. React 核心特點
a. 組件化開發：
????????React 的 UI 是由一個個小的、可復用的組件構成的，組件可以像積木一樣組合在一起，構建出復雜的用戶界面。
b. 聲明式編程：
????????React 使用聲明式的方式描述 UI。開發者只需要定義組件在不同狀態下的樣子，React 會自動更新和渲染界面。
c. 虛擬DOM：
????????React 使用虛擬DOM（Virtual DOM）來提升性能。當狀態發生變化時，React 會先更新虛擬DOM，然后計算出最小的變更，再將變更應用到真實DOM中。
d. 單向數據流：
????????數據在React中是單向流動的（從父組件流向子組件），這使得數據管理更加清晰和可靠。
e. JSX語法：
????????React 提供了一種類似HTML的語法擴展——JSX，允許開發者在JavaScript中直接編寫HTML結構。
2. React 的生態系統
a. React Router：用于處理路由。
b. Redux 或 Context API：用于狀態管理。
c. Next.js：基于 React 的服務端渲染（SSR）框架。
d. React Native：用于開發跨平臺的移動端應用。
3. React 的優點
a. 高效：通過虛擬DOM優化性能。
b. 靈活：支持與其他庫或框架結合使用。
c. 可維護性高：組件化開發使代碼結構清晰、易于維護。
d. 社區強大：豐富的社區資源和第三方庫支持。
二、開發環境
1.?Node.js 和 npm
- 下載并安裝?Node.js（包含 npm）。
- 驗證安裝是否成功
node -v npm -v
2. 代碼編輯器
- ?推薦使用?Visual Studio Code。
?二、創建 React 項目
最簡單的方式是使用官方工具 Create React App。
1. 創建步驟
- 打開終端或命令行工具，進入你想創建項目的目錄
- 運行以下命令
npx create-react-app my-app
- 等待安裝完成后，進入項目目錄
cd my-app
- 啟動開發服務器
npm start- 瀏覽器會自動打開?
http://localhost:3000，顯示 React 的默認頁面
2. 文件結構說明
my-app/
├── node_modules/ # 項目依賴目錄
├── public/ # 靜態資源目錄
│ ├── favicon.ico # 瀏覽器標簽圖標
│ ├── index.html # 主 HTML 文件，React 掛載到此文件
│ ├── logo192.png # 默認 logo 圖片 (192x192)
│ ├── logo512.png # 默認 logo 圖片 (512x512)
│ ├── manifest.json # PWA 配置文件
│ └── robots.txt # 搜索引擎爬蟲配置
├── src/ # 源代碼目錄
│ ├── App.css # App 組件的樣式文件
│ ├── App.js # 主組件文件
│ ├── App.test.js # App 組件的測試文件
│ ├── index.css # 全局樣式文件
│ ├── index.js # 應用程序的入口文件
│ ├── logo.svg # 默認 logo 文件 (SVG 格式)
│ ├── reportWebVitals.js # 性能監控文件
│ └── setupTests.js # 測試環境的配置文件
├── .gitignore # Git 忽略規則
├── package-lock.json # 鎖定依賴版本的文件
├── package.json # 項目配置文件
└── README.md # 項目說明文檔
三、創建一個React頁面
以下是詳細的教程，包括如何創建頁面組件、路由配置以及頁面樣式等
創建 React 頁面步驟
1. 創建頁面組件
React 中的頁面通常是一個獨立的組件。你可以在 src 目錄下新建一個文件夾（如 pages），用于存放所有頁面組件。
- 在?
src?目錄下創建一個?pages?文件夾。 - 在?
pages?文件夾中創建一個新的頁面組件文件，例如?MyPage.js。
示例代碼：
import React from 'react';
import './MyPage.css'; // 引入樣式文件（可選）const MyPage = () => {return (<div className="my-page"><h1>歡迎來到我的頁面</h1><p>這是一個屬于自己的頁面！</p></div>);
};export default MyPage;
2. 創建樣式文件
為頁面組件添加樣式文件，讓頁面更美觀。
- 在?
pages?文件夾中創建一個樣式文件，例如?MyPage.css。
示例代碼：
.my-page {text-align: center;background-color: #f0f8ff;padding: 20px;color: #333;
}.my-page h1 {font-size: 2rem;color: #007bff;
}.my-page p {font-size: 1.2rem;margin-top: 10px;
}
3.設置路由
在 React 中，路由是由 react-router-dom 提供的。你需要安裝路由庫并配置路由規則。
- 確保安裝了
react-router-domnpm install react-router-dom - 在
src目錄下的App.js中配置路由.
示例代碼：
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import MyPage from './pages/MyPage'; // 引入新頁面
import Home from './Home'; // 假設有一個主頁組件const App = () => {return (<Router><Routes><Route path="/" element={<Home />} /> {/* 主頁 */}<Route path="/my-page" element={<MyPage />} /> {/* 新頁面 */}</Routes></Router>);
};export default App;
4. 啟動項目并訪問頁面
- 啟動開發服務器
npm start- 在瀏覽器中訪問新頁面
主頁：
http://localhost:3000/新頁面：
http://localhost:3000/my-page
5. 可選功能
為了更方便地切換頁面，可以添加一個導航欄
代碼示例：添加導航欄，在src下創建 Navbar.js
import React from 'react';
import { Link } from 'react-router-dom';const Navbar = () => {return (<nav style={{ padding: '10px', backgroundColor: '#007bff', color: '#fff' }}><Link to="/" style={{ margin: '0 10px', color: '#fff', textDecoration: 'none' }}>主頁</Link><Link to="/my-page" style={{ margin: '0 10px', color: '#fff', textDecoration: 'none' }}>我的頁面</Link></nav>);
};export default Navbar;
修改?App.js：
將導航欄添加到頁面中
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './Navbar'; // 導航欄組件
import MyPage from './pages/MyPage';
import Home from './Home';const App = () => {return (<Router><Navbar /> {/* 導航欄 */}<Routes><Route path="/" element={<Home />} /><Route path="/my-page" element={<MyPage />} /></Routes></Router>);
};export default App;
代碼結構：
src/
├── pages/
│ ├── MyPage.js # 新頁面組件
│ └── MyPage.css # 新頁面樣式
├── App.js # 路由配置
├── Navbar.js # 導航欄組件
├── Home.js # 主頁組件（示例）
└── index.js # 應用入口6. 打開頁面
至此，可以成功創建屬于自己的React頁面。
![[目標檢測] YOLO系列算法講解](http://pic.xiahunao.cn/[目標檢測] YOLO系列算法講解)
