react 安裝

React 是一個用于構建用戶界面的 JavaScript 庫。以下是安裝 React 的步驟：

使用 Create React App

Create React App 是一個官方支持的命令行工具，用于快速搭建 React 應用。

1. 安裝 Node.js 和 npm

   確保你的計算機上安裝了 Node.js 和 npm。可以通過以下命令檢查是否已安裝：

   node -v
   npm -v
   

   如果未安裝，可以到 Node.js 官網 下載并安裝。

2. 安裝 Create React App 工具

   打開終端或命令提示符，運行以下命令：

   npm install -g create-react-app
   

   對于創建新的 React 應用，現在推薦使用以下幾種更現代的方案：

   1. Vite（推薦）：

   npm create vite@latest my-react-app -- --template react  
   

   2. Next.js（如果需要服務端渲染）：

   npx create-next-app@latest my-react-app  
   

   這些方案比 create-react-app 有以下優勢：

   • 更快的開發服務器啟動時間
   • 更快的熱模塊替換（HMR）
   • 更小的安裝包體積
   • 更現代的開發體驗

3. 創建一個新的 React 應用

   使用 Create React App 創建一個新的項目，把 my-app 替換為你的項目名稱：

   create-react-app my-react-appnpx create-react-app@latest my-react-app
   

4. 啟動開發服務器

   進入項目目錄并啟動開發服務器：

   cd my-react-app
   npm start
   

   這將自動打開瀏覽器并訪問 http://localhost:3000，你會看到默認的 React 頁面。

手動安裝 React

如果你想手動設置 React 開發環境，可以按照以下步驟操作：

1. 創建項目目錄并初始化 npm

   mkdir my-react-app
   cd my-react-app
   npm init -y
   

2. 安裝 React 和 ReactDOM

   npm install react react-dom
   

3. 安裝開發服務器和 Babel

   為支持 JSX 和現代 JavaScript 特性，你需要安裝 Babel 和一個開發服務器：

   npm install @babel/preset-react @babel/preset-env babel-loader webpack webpack-cli webpack-dev-server
   

4. 配置 Webpack 和 Babel

   創建 Webpack 和 Babel 配置文件（webpack.config.js 和 .babelrc），以處理 JavaScript 和 JSX 文件。

   示例內容可以在網上找到，通常設置包含輸入輸出路徑配置，插件，加載器設置等。

5. 創建基礎文件結構

   創建 src 目錄并添加入口文件，比如 index.js 和 index.html。在 index.js 中編寫 React 代碼并在 index.html 中提供一個容器，如 <div id="root"></div> ^{1 2}。

6. 運行開發服務器

   修改 package.json 中的 scripts 部分，添加啟動命令：

   "scripts": {"start": "webpack serve --mode development"
   }
   

   然后運行：

   npm start
   

以上是 React 安裝的基本步驟。根據需要，安裝和配置其他包和工具以補充你的開發環境，例如 Redux, React Router 等。

相關js 庫

• react.js:React 核心庫。
• react-dom.js:提供操作 DOM 的react 擴展庫。
• babel.min.js:解析JSX 語法代碼轉為JS 代碼的庫。

在 React 開發中，有許多常用的 JavaScript 庫可以幫助你更高效地構建應用。以下是一些流行的相關庫：

1. 狀態管理

   • Redux: 復雜應用的狀態管理
   • MobX: 簡單、可擴展的狀態管理
   • Recoil: Facebook 開發的狀態管理庫
   • Zustand: 輕量級狀態管理庫

2. 路由

   • React Router: 最常用的 React 路由庫
   • Reach Router: 輕量級的路由庫

3. 表單處理

   • Formik: 簡化表單處理和驗證
   • React Hook Form: 高性能、靈活的表單庫
   • Final Form: 高性能的表單狀態管理庫

4. UI 組件庫

   • Material-UI: 實現 Google Material Design 的 React 組件
   • Ant Design: 企業級 UI 設計語言和 React 組件庫
   • Chakra UI: 簡單、模塊化的組件庫
   • React Bootstrap: Bootstrap 的 React 實現
   • Styled-components：使用現代 JavaScript 為組件定義樣式的工具。
   • Emotion：一種可實現 CSS-in-JS 的庫

5. 數據獲取

   • Axios: 基于 Promise 的 HTTP 客戶端
   • SWR: 用于數據獲取的 React Hooks 庫
   • React Query: 強大的異步狀態管理和數據獲取庫

6. 動畫

   • React Spring: 彈簧物理學動畫庫
   • Framer Motion: 生產就緒的動畫和手勢庫
   • React Transition Group: 動畫過渡組件

7. 圖表

   • Recharts: 基于 D3 的圖表庫
   • Victory: 模塊化的圖表庫
   • React-Vis: 數據可視化組件

8. 工具類

   • Lodash: 提供各種實用函數的工具庫
   • Moment.js 或 Day.js: 日期處理庫
   • Immer: 簡化不可變狀態更新

9. 測試

   • Jest: JavaScript 測試框架
   • React Testing Library: React 組件測試工具
   • Enzyme: React 組件測試工具（較老但仍在使用）

10. 開發工具

    • ESLint: JavaScript 代碼檢查工具
    • Prettier: 代碼格式化工具
    • Storybook: UI 組件開發環境

11. 國際化

    • react-i18next: 國際化框架
    • react-intl: React 的國際化庫

12. 性能優化

    • React.memo: React 內置的性能優化 API
    • useCallback 和 useMemo: React Hooks 用于性能優化

13. 服務端渲染

    • Next.js: React 的服務端渲染框架
    • Gatsby: 靜態站點生成器

這些庫可以根據項目需求選擇使用。在開始一個新項目時，建議仔細評估需求，選擇適合的庫，避免過度使用導致項目變得臃腫。同時，要注意保持依賴的版本更新，以獲得最新的功能和安全修復。

在開發 React 應用程序時，經常會使用一些流行的 JavaScript 庫和工具來增強功能、管理狀態、路由和進行 API 操作等。這些是一些常見的 React 相關 JavaScript 庫和工具：

1. React Router

   • 用于在 React 應用中實現客戶端路由。
   • 提供了動態路由、嵌套路由、路徑參數等功能。
   • 官網: React Router

2. Redux

   • 一種狀態管理工具，用于管理復雜應用的狀態。
   • 通過使用 actions 和 reducers 來實現全局狀態管理。
   • Redux Toolkit 是官方推薦的 Redux 配套工具，提供更簡單的 API 和開發體驗。
   • 官網: Redux

3. Axios

   • 基于 Promise 的 HTTP 客戶端，用于執行異步 HTTP 請求（例如 GET, POST 等）。
   • 支持取消請求、請求和響應攔截器。
   • 官網: Axios GitHub

4. styled-components

   • 允許在 React 應用中使用 CSS-in-JS 的方式編寫樣式。
   • 提供了更好的樣式組件化和可復用性。
   • 官網: styled-components

5. Formik

   • 用于構建和管理表單的庫。
   • 簡化了表單驗證、處理和提交的流程。
   • 官網: Formik

6. Yup

   • JavaScript 對象模式驗證庫，通常與 Formik 一起使用以實現表單驗證。
   • 提供了聲明式和可組合的驗證規則。
   • 官網: Yup GitHub

7. React Query

   • 提供數據獲取、緩存、同步、更新和服務器狀態管理功能。
   • 支持復雜的異步數據操作，適用于 RESTful 和 GraphQL。
   • 官網: React Query

8. React Hook Form

   • 提供高性能、靈活和可擴展的表單管理。
   • 輕量級并支持驗證、錯誤處理。
   • 官網: React Hook Form

9. MobX

   • 另一種狀態管理工具，使用響應式編程模型。
   • 提供更易于使用和直觀的狀態管理方式。
   • 官網: MobX

10. Material-UI

    • 基于 Material Design 的 React UI 組件庫。
    • 提供了豐富的、開箱即用的 UI 組件庫。
    • 官網: Material-UI

這些庫和工具可以根據項目需求和個人喜好選擇使用，幫助你簡化開發流程，提高代碼的可維護性和擴展性。

參考:

---

1. React.Component ??

2. React.Component ??