ReactJS - 建立 React 應用

上一頁
下一頁

正如我們之前瞭解到的，React 庫可用於簡單和複雜的應用程式。簡單的應用程式通常在其指令碼部分包含 React 庫。在複雜的應用程式中，開發人員必須將程式碼拆分成多個檔案並將程式碼組織成標準結構。在這裡，React 工具鏈提供預定義的結構來引導應用程式。此外，開發人員可以自由使用他們自己的專案結構來組織程式碼。

讓我們看看如何建立簡單和複雜的 React 應用程式：

使用 Rollup 打包器

Rollup 是一個小型且快速的 JavaScript 打包器。讓我們在本節中學習如何使用 Rollup 打包器。

以下是使用 Rollup 打包器建立應用程式的步驟：

步驟 1 - 開啟終端並進入您的工作區。

cd /go/to/your/workspace

步驟 2 - 接下來，建立一個資料夾 expense-manager-rollup 並移動到新建立的資料夾。同時，在您喜歡的編輯器或 IDE 中開啟該資料夾。

mkdir expense-manager-rollup 
cd expense-manager-rollup

然後，建立並初始化專案。

npm init -y

步驟 3 - 要安裝 React 庫 (react 和 react-dom)，請執行以下命令。

npm install react@^17.0.0 react-dom@^17.0.0 --save

然後使用以下命令安裝 babel 及其預設庫作為開發依賴項。

npm install @babel/preset-env @babel/preset-react 
@babel/core @babel/plugin-proposal-class-properties -D

接下來，安裝 rollup 及其外掛庫作為開發依賴項。

npm i -D rollup postcss@8.1 @rollup/plugin-babel 
@rollup/plugin-commonjs @rollup/plugin-node-resolve 
@rollup/plugin-replace rollup-plugin-livereload 
rollup-plugin-postcss rollup-plugin-serve postcss@8.1 
postcss-modules@4 rollup-plugin-postcss

接下來，為非同步程式設計安裝 corejs 和 regenerator runtime。

npm i regenerator-runtime core-js

步驟 4 - 之後，在根資料夾下建立一個 babel 配置檔案 .babelrc 來配置 babel 編譯器。

{
   "presets": [
      [
         "@babel/preset-env",
         {
            "useBuiltIns": "usage",
            "corejs": 3,
            "targets": "> 0.25%, not dead"
         }
      ],
      "@babel/preset-react"
   ],
   "plugins": [
      "@babel/plugin-proposal-class-properties"
   ]
}
rollup.config.js

接下來，在根資料夾中建立一個 rollup.config.js 檔案來配置 rollup 打包器。

import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
import postcss from 'rollup-plugin-postcss'

export default {
   input: 'src/index.js',
   output: {
      file: 'public/index.js',
      format: 'iife',
   },
   plugins: [
      commonjs({
         include: [
            'node_modules/**',
         ],
         exclude: [
            'node_modules/process-es6/**',
         ],
      }),
      resolve(),
      babel({
         exclude: 'node_modules/**'
      }),
      replace({
         'process.env.NODE_ENV': JSON.stringify('production'),
      }),
      postcss({
         autoModules: true
      }),
      livereload('public'),
      serve({
         contentBase: 'public',
         port: 3000,
         open: true,
      }), // index.html should be in root of project
   ]
}
package.json

接下來，更新 package.json 幷包含我們的入口點 (public/index.js 和 public/styles.css) 和構建和執行應用程式的命令。

...
"main": "public/index.js",
"style": "public/styles.css",
"files": [
   "public"
],
"scripts": {
   "start": "rollup -c -w",
   "build": "rollup"
},
...

步驟 5 - 接下來，在應用程式的根目錄下建立一個 src 資料夾，該資料夾將儲存應用程式的所有原始碼。

接下來，在 src 下建立一個資料夾 components 來包含我們的 React 元件。我們的想法是建立兩個檔案，`.js` 來編寫元件邏輯和 `` 來包含元件特定的樣式。

應用程式的最終結構如下：

|-- package-lock.json
|-- package.json
|-- rollup.config.js
|-- .babelrc
`-- public
   |-- index.html
`-- src
   |-- index.js
   `-- components
   |  |-- mycom.js
   |  |-- mycom.css

現在，讓我們建立一個新的元件 HelloWorld 來確認我們的設定工作正常。

HelloWorld.js

在 components 資料夾下建立一個檔案 HelloWorld.js，並編寫一個簡單的元件來發出 Hello World 訊息。

import React from "react";

class HelloWorld extends React.Component {
   render() {
      return (
         <div>
            <h1>Hello World!</h1>
         </div>
      );
   }
}
export default HelloWorld;

index.js

接下來，在 src 資料夾下建立我們的主檔案 index.js 並呼叫我們新建立的元件。

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';

ReactDOM.render(
   <React.StrictMode>
      <HelloWorld />
   </React.StrictMode>,
   document.getElementById('root')
);

在根目錄下建立一個 public 資料夾。

index.html

接下來，建立一個 html 檔案 index.html（在 public 資料夾下*），這將是我們的應用程式的入口點。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Expense Manager :: Rollup version</title>
   </head>
   <body>
      <div id="root"></div>
      <script type="text/JavaScript" src="./index.js"></script>
   </body>
</html>

最後，構建並執行應用程式。

npm start

npm build 命令將執行 rollup 並將我們的應用程式捆綁到單個檔案 dist/index.js 檔案中，並開始提供應用程式服務。dev 命令將在原始碼更改時重新編譯程式碼，並在瀏覽器中重新載入更改。

> expense-manager-rollup@1.0.0 build /path/to/your/workspace/expense-manager-rollup 
> rollup -c 
rollup v2.36.1 
bundles src/index.js → dist\index.js... 
LiveReload enabled 
https://:10001 -> /path/to/your/workspace/expense-manager-rollup/dist 
created dist\index.js in 4.7s 

waiting for changes...

開啟瀏覽器並在位址列中輸入 https://:3000 並按 Enter 鍵。serve 應用程式將提供我們的網頁，如下所示。

Hello World

使用 Parcel 打包器

Parcel 是一個快速且零配置的打包器。它只需要應用程式的入口點，它將自己解析依賴項並打包應用程式。讓我們在本節中學習如何使用 Parcel 打包器。

步驟 1 - 首先，安裝 Parcel 打包器。

npm install -g parcel-bundler

然後，開啟終端並進入您的工作區。

cd /go/to/your/workspace

步驟 2 - 接下來，建立一個資料夾 expense-manager-parcel 並移動到新建立的資料夾。同時，在您喜歡的編輯器或 IDE 中開啟該資料夾。

mkdir expense-manager-parcel 
cd expense-manager-parcel

使用以下命令建立並初始化專案。

npm init -y

步驟 3 - 安裝 React 庫 (react 和 react-dom)。

npm install react@^17.0.0 react-dom@^17.0.0 --save

安裝 babel 及其預設庫作為開發依賴項。

npm install @babel/preset-env @babel/preset-react @babel/core @babel/plugin-proposal-class-properties -D

然後，在根資料夾下建立一個 babel 配置檔案 .babelrc 來配置 babel 編譯器。

{
   "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
   ],
   "plugins": [
      "@babel/plugin-proposal-class-properties"
   ]
}

步驟 4 - 更新 package.json 幷包含我們的入口點 (src/index.js) 和構建和執行應用程式的命令。

... 
"main": "src/index.js", 
"scripts": {
   "start": "parcel public/index.html",
   "build": "parcel build public/index.html --out-dir dist" 
},
...

步驟 5 - 在應用程式的根目錄下建立一個 src 資料夾，該資料夾將儲存應用程式的所有原始碼。

接下來，在 src 下建立一個資料夾 components 來包含我們的 React 元件。我們的想法是建立兩個檔案，<component>.js 來編寫元件邏輯和 <component.css> 來包含元件特定的樣式。

應用程式的最終結構如下：

|-- package-lock.json
|-- package.json
|-- .babelrc
`-- public
   |-- index.html
`-- src
   |-- index.js
   `-- components
   |  |-- mycom.js
   |  |-- mycom.css

讓我們建立一個新的元件 HelloWorld 來確認我們的設定工作正常。在 components 資料夾下建立一個檔案 HelloWorld.js，並編寫一個簡單的元件來發出 Hello World 訊息。

HelloWorld.js

import React from "react";

class HelloWorld extends React.Component {
   render() {
      return (
         <div>
            <h1>Hello World!</h1>
         </div>
      );
   }
}
export default HelloWorld;

index.js

現在，在 src 資料夾下建立我們的主檔案 index.js 並呼叫我們新建立的元件。

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';

ReactDOM.render(
   <React.StrictMode>
      <HelloWorld />
   </React.StrictMode>,
   document.getElementById('root')
);
接下來，在根目錄下建立一個 public 資料夾。

index.html

建立一個 html 檔案 index.html（在 public 資料夾中），這將是我們的應用程式的入口點。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Expense Manager :: Parcel version</title>
   </head>
   <body>
      <div id="root"></div>
      <script type="text/JavaScript" src="../src/index.js"></script>
   </body>
</html>

最後，構建並執行應用程式。

npm start

npm build 命令將執行 parcel 命令。它將立即捆綁和提供應用程式服務。它會在原始碼更改時重新編譯，並在瀏覽器中重新載入更改。

> expense-manager-parcel@1.0.0 dev /go/to/your/workspace/expense-manager-parcel 
> parcel index.html Server running at https://:1234 
√ Built in 10.41s.

開啟瀏覽器並在位址列中輸入 https://:1234 並按 Enter 鍵。

Hello World

要建立應用程式的生產包以將其部署到生產伺服器，請使用 build 命令。它將在 dist 資料夾下生成一個包含所有捆綁原始碼的 index.js 檔案。

npm run build
> expense-manager-parcel@1.0.0 build /go/to/your/workspace/expense-manager-parcel
> parcel build index.html --out-dir dist

&sqrt;  Built in 6.42s.

dist\src.80621d09.js.map    270.23 KB     79ms
dist\src.80621d09.js        131.49 KB    4.67s
dist\index.html                 221 B    1.63s
列印頁面
上一頁
下一頁
廣告