[Day 19] 如何快速建立最新版 React 專案？ - 嘗試 30 日寫文充版挑戰

前言 - Prologue

嘗試寫 30 天文充實版面 ~~(跳過假日 ლ(́◕◞౪◟◕‵ლ) )~~ 更新文章的 Day 19

React 是目前非常流行的 JavaScript 函式庫之一，被廣泛應用於 Web 開發、移動端應用程式開發等領域。然而，建立一個新的 React 專案可能需要設置許多環境和安裝一些必要的套件，對於初學者來說可能會感到有些困難。

至於規格與環境可參考官方文件，這邊就不多做說明。 ~~(這只是一個筆記，環境應該是基礎前置該做好的(?))~~

官方文件： Create a New React App – React

為了快速建立最新版的 React 專案，本文將介紹使用 create-react-app 工具和手動建立專案的方法，作為筆記記憶使其更快速地開始 React 的學習和開發。

正文 - Main text

要建立一個最新版本的 React 專案，可以使用以下方法：

使用 create-react-app

create-react-app 是官方提供的一個快速建立 React 專案的工具。使用 create-react-app 可以快速建立一個具有最新版本 React 的專案，並且自動設定好專案所需的開發環境。

要使用的話，首先需要在終端機（Terminal）中安裝 create-react-app 工具。

官方文件推薦使用 npx 建立 React 專案，因為 npx 可以直接執行 create-react-app，而不需要先安裝工具。

使用 npx 建立 React 專案的指令如下：

# npx
$ npx create-react-app <app-name>

or 使用 npm。

# npm
$ npm install -g create-react-app

// 已經安裝工具的話，使用以下指令建立專案：
$ create-react-app <app-name>

or 使用 yarn，下列指令會在本地機器上使用 Yarn 下載 create-react-app，然後使用 create-react-app 建立專案。如果尚未安裝，Yarn 則會自動安裝。

# yarn
$ yarn create react-app <app-name>

Q：關於 npm install -g create-react-app 的 -g 是什麼意思呢？
A： npm install 是用來安裝 Node.js 模組的指令。-g 參數是指將安裝的模組全局安裝，而不是只安裝在當前專案的 node_modules 目錄下。

全局安裝的模組可以在終端機的任何地方使用，而不需要在每個專案中都安裝一次。例如，安裝 create-react-app 時使用 -g 參數，就可以在終端機的任何地方使用 create-react-app 指令，而不需要在每個 React 專案中都安裝一次 create-react-app。

需要注意的是，全局安裝的模組可能會影響到其他專案的執行環境，因此建議只全局安裝一些常用的模組，而將其他模組安裝在專案的 node_modules 目錄下。

手動建立專案

如果不想使用 create-react-app，也可以手動建立專案。要手動建立專案，需要先在 Terminal 中建立一個空資料夾，接著在資料夾中執行以下指令，來安裝 React：

$ npm install react react-dom

# or

$ yarn add react react-dom

接著在資料夾中建立一個 index.html 檔案，並加入以下內容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> React App </title>
  </head>
  <body>
    <!-- div#root 是 React 應用程式會渲染到的 HTML 元素 -->
    <div id="root"></div>
    <!-- index.js 則是 React 應用程式的入口檔案 -->
    <script src="index.js"></script>
  </body>
</html>

然後在資料夾中建立一個 index.js 檔案，並加入以下內容：

import React from 'react';
import ReactDOM from 'react-dom';

// App 為一個 React 元件
// 會渲染出一個 h1 標題
// 顯示 Hello, World!
const App = () => {
  return <h1>Hello, World!</h1>;
};

ReactDOM.render(<App />, document.getElementById('root'));

也可以回到第二步驟，安裝完 react-dom 與建立一個 index.html 檔案後，將 index.js 拆分出 App.js 以便可讀性和可維護性。

在建立 React 專案時，一般會把根元件 (root component) 放在 App.js 檔案中，然後在 index.js 檔案中引入並渲染該元件。這樣做的好處是可以清楚地區分出不同層次的元件，使代碼的結構更加清晰。

從第二步驟開始：建立一個 index.js，並在其中引入 React 和 ReactDOM，以及 App.js 模組。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

再來建立 App.js，並在其中建立你的 React 元素。

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

啟動開發伺服器

最後在 Terminal 中執行以下指令，即可啟動開發伺服器，開始開發 React 專案：

$ npm start

# or

$ yarn start

參考資料 - Reference

[1] Create a New React App – React

https://reactjs.org/docs/create-a-new-react-app.html

後記 - Epilogue

React 是當前最受歡迎的 JavaScript 框架之一，它具有高效、靈活、易用等特點，可以用於開發各種類型的 Web 應用程序。

在上方介紹了如何建立最新版本的 React 專案。首先，可以使用 create-react-app 工具快速建立 React 專案，該工具可以自動配置許多常用的開發環境和工具，讓開發者可以更加專注於應用程序的開發。

而在建立 React 專案之後，可以使用 npm 或 yarn 來安裝 React 和相關的庫文件，這些庫文件包括 react 和 react-dom。安裝這些庫文件後，就可以開始編寫 React 代碼，並在開發環境中測試和運行應用程序。

在編寫 React 代碼時，可以將 UI 功能拆分成較小的元件，這樣可以提高代碼的可讀性、可維護性和可重用性。在建立 React 專案時，建議將根元件放在 App.js 檔案中，並在 index.js 檔案中引入該元件。這樣可以使代碼結構更加清晰，並且可以更容易地區分出不同層次的元件。

總之，建立 React 專案並不是一個難事，只需要掌握一些基本的知識和技能即可。

[Day 19] 如何快速建立最新版 React 專案？ - 嘗試 30 日寫文充版挑戰

https:///en/blog/35

Author

Kama

Released

2023-03-09 14:38:47

Agreement

Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)

#React