從零開始建立一個React.js專案- create-react-app, vite

Sean Yeh

Published in

Web Design Zone

12 min readMay 9, 2023

認識React

React是一個JavaScript函式庫，是由Facebook開發，用於建立使用者界面的開源工具。其主要目的是提高應用程式的效率和執行速度，並且使程式碼更容易維護和測試。

React的特點還包括模組化、虛擬DOM和單向數據流等等。這些特色使得React成為一個強大且靈活的工具，可用於構建各種類型的網頁應用程式（Web App），包括網站、手機應用程式（Mobile App）和桌面應用程式等。

Why React?

那麼，為何需要使用React來架設網站呢？

使用React可以使我們的程式碼得到下面的好處：

讓程式更加的模組化和可重複利用，並且更有利地掌握應用程式的狀態和資料流。
提供更好的性能和速度，因為它使用了虛擬DOM和優化的渲染方式。
具有開發者社群良好的支援以及廣泛的生態系，使開發者得以更快地學習和開發React應用程式。

反之，若不使用React來架設網站，則可能會面臨一些缺點。例如，程式碼可能會變得複雜且難以維護，並且有可能會影響應用程式的性能和速度。此外，如果使用傳統的DOM操作方式，則可能會面臨較低的開發效率和較差的生產力。

綜上所述，React是一個非常強大的工具，可以幫助我們構建高效能、靈活且易於維護的Web網頁應用程式。在本文中，將讓大家開始瞭解如何使用React來開啟架設網站的專案。

開始動手：建立新的React專案

開始使用React前，需要先進行一些環境設置。首先，需要確保您的電腦上已安裝了Node.js和NPM（NPM為Node.js的套件管理工具）。

接下來，您可以使用create-react-app工具來快速建立一個新的React專案。(也可以使用vite建立新專案。在文章最後我們亦提供使用vite建立新React專案的步驟)在此之前，您需要先安裝create-react-app套件。打開您的終端機（Terminal）並輸入以下指令：

npm install -g create-react-app

如果在安裝時碰到下面有關於權限的錯誤訊息，請在指令前面加上sudo來執行：

sudo npm install -g create-react-app

安裝完成後，您就可以使用以下指令來建立一個新的React專案：

create-react-app my-app

輸入這個指令會在您的電腦上建立一個名為my-app的新資料夾，並將所有必要的React檔案和設定檔加入該資料夾中。如果想要建立其他的專案名稱，可以將my-app換成您想要的名稱。

當React專案建立完成後，您應該會在您的終端機螢幕上看到類似上圖的提示訊息。這時候，就可以使用以下指令進入您的新專案：

cd my-app

在輸入cd指令進入您的新專案後，您可以再輸入以下指令啟動開發者伺服器，並在瀏覽器中輸入網址（http://localhost:3000），查看您的React應用程式：

npm start

現在，您已經成功建立了一個全新的React專案！

打開專案的根目錄中，您可以看到一些基本的檔案和資料夾。下圖是VS Code編輯器上面的截圖，您可以看到執行create-react-app指令後，一開始幫我們預先建立好的專案。

我們可以將上面的圖簡化，抽出較重要的檔案，如下所示：

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── ...
├── package.json
└── ...

它們是React專案中的基本結構，您可以借此為基礎，在日後開發React應用程式時，不斷地進行修改和擴充。後續部分，將會進一步介紹這些檔案和資料夾，並且建立一個完整的React應用程式。

牛刀小試：建立第一個React元件

讓我們開始建立第一個React元件吧！

在React中，元件是構建UI的基本單元。元件可以是簡單的UI元素，如按鈕或標籤；也可以是複雜的元素，如整個應用程式的頁面。在本節中，將建立一個簡單的React元件，並將它們組合起來，建立一個簡單的頁面。

首先，需要建立一個新的React元件。在src資料夾中建立一個新的檔案，命名為HelloWorld.js。

打開此檔案編輯它，讓檔案中包含以下程式碼：

// HelloWorld
import React from 'react';

function HelloWorld() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default HelloWorld;

在這個程式碼中，我們從react模組中匯入React函式庫來使用。

import React from 'react';

然後，定義了一個新的函式HelloWorld。這個函式會返回（return）一個包含了一個h1元素的div元素。最後，將HelloWorld元件匯出（export default），以便在其他檔案中使用它。

function HelloWorld() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default HelloWorld;

接下來，就可以建立一個新的檔案，命名為App.js，並將以下程式碼寫到檔案中：

// App

import React from 'react';
import HelloWorld from './HelloWorld';

function App() {
  return (
    <div>
      <HelloWorld />
    </div>
  );
}

export default App;

在這個程式碼中，我們除了像前面一樣匯入了React外，並且將先前建立的HelloWorld元件也匯入這個檔案。

import React from 'react';
import HelloWorld from './HelloWorld';

然後，定義一個新的函式元件App，它返回一個包含了HelloWorld元件的div元素。最後，將App元件匯出，以便在其他檔案中使用它。

function App() { 
    return 返回div元件
}
export default App;

現在，我們已經完成了第一個React元件和應用程式，接著可以啟動開發者伺服器，並在瀏覽器中查看它。

在終端機中輸入以下指令以啟動開發伺服器：

npm start

接著，您可以在瀏覽器中輸入以下網址，以查看應用程式：

http://localhost:3000

恭喜您！您已經成功建立了第一個React應用程式，並且完成了一個簡單的頁面。一個只有Hello, World!的頁面。

接下來，再來增添一些內容到應用程式中。我們在App.js中，將HelloWorld元件替換為以下程式碼：

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          歡迎使用React應用程式！
        </p>
        <a
          className="App-link"
          href="https://reactjs.org/"
          target="_blank"
          rel="noopener noreferrer"
        >
          了解更多關於React
        </a>
      </header>
    </div>
  );
}

export default App;

在此程式碼中，我們新增了一個className屬性為”App”的div元素，並在其中插入了一個header元素。

在header元素中，除了增加一個svg圖片外，還有一段歡迎語句和一個超連結，用以引導使用者了解更多關於React的知識。

接下來，需要一些CSS來美化我們的應用程式。在src資料夾中，建立一個新的檔案，命名為App.css。在此檔案中，添加以下程式碼：

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}