ReactJS - 創建一個 React 應用程序

你好，未來的 React 開發者！我很興奮能帶領你們踏上創建第一個 React 應用程序的令人興奮的旅程。作為一個教了多年計算機科學的人，我可以向你們保證，React 不僅功能強大，而且學習起來也很有趣。那麼，我們來開始吧！

ReactJS - Creating a React Application

什麼是 React？

在我們開始編程之前，讓我們先來了解 React 是什麼。React 是一個流行的 JavaScript 函式庫，用於建立用戶界面。它由 Facebook 開發，並現在被許多大型公司如 Netflix、Instagram 和 Airbnb 使用。把 React 想像成一套樂高積木，你可以用它們輕鬆地建立複雜的網頁應用程序。

開始使用

要創建一個 React 應用程序，我們需要一些工具。別擔心如果你以前從未使用過這些工具 - 我們會一起走過每一步！

預設條件

Node.js 和 npm（Node 包管理器）
一個代碼編輯器（我推薦 Visual Studio Code）

如果你還沒有安裝這些，請花一會兒時間安裝。這就像在烹飪美味佳肴之前準備好廚房！

使用 Rollup 打包器

讓我們從使用 Rollup 創建 React 應用程序開始。Rollup 是一個 JavaScript 模塊打包器，將小段代碼編譯成更大和更複雜的東西。

步驟 1：設置項目

首先，讓我們為我們的項目創建一個新目錄並初始化它：

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

這將創建一個新文件夾並初始化一個新的 Node.js 項目。這就像為我們的房子打好基礎！

步驟 2：安裝依賴

現在，讓我們安裝必需的包：

npm install react react-dom
npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-replace rollup-plugin-babel @rollup/plugin-babel @babel/preset-react rollup-plugin-terser

別被這些冗長的名稱嚇到。把它們當作我們 React 菜單的食材！

步驟 3：創建配置文件

讓我們創建兩個重要的文件：

rollup.config.js：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
sourcemap: true,
},
plugins: [
resolve(),
commonjs(),
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
babel({
presets: ['@babel/preset-react'],
}),
terser(),
],
};

這個文件告訴 Rollup 如何打包我們的應用程序。這就像給廚師指導如何準備一道菜。

.babelrc：

{
"presets": ["@babel/preset-react"]
}

這個文件配置 Babel，它幫助將現代 JavaScript 翻譯成舊版瀏覽器能夠理解的版本。

步驟 4：創建我們的 React 組件

現在，讓我們創建我們的第一個 React 組件！創建一個新文件 src/App.js：

import React from 'react';

function App() {
return (
<div>
<h1>Hello, React!</h1>
<p>歡迎來到我的第一個 React 應用程序！</p>
</div>
);
}

export default App;

這是我們的主要組件。它就像我們節目中的明星！

接下來，創建 src/index.js：

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

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

這個文件負責將我們的 App 組件渲染到 HTML 中。

步驟 5：創建 HTML 文件

創建一個新文件 public/index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的 React App</title>
</head>
<body>
<div id="root"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>

這是我們的 React 應用程序將被挂载的地方。

步驟 6：將腚本添加到 package.json

更新你的 package.json 以包含以下腚本：

"scripts": {
"build": "rollup -c",
"start": "rollup -c -w"
}

這些腚本將幫助我們構建和運行我們的應用程序。

步驟 7：構建和運行應用程序

現在，讓我們讓我們的創作物活起來！運行：

npm run build

這將創建我們打包的 JavaScript 文件。要查看您的應用程序，請在網頁瀏覽器中打開 public/index.html。恭喜你！你剛剛使用 Rollup 創建了你的第一個 React 應用程序！

使用 Parcel 打包器

既然我們已經看到了如何使用 Rollup，讓我們嘗試另一個流行的打包器：Parcel。Parcel 以其零配置方法而聞名，使其非常容易上手。

步驟 1：設置項目

讓我們創建一個新項目：

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

步驟 2：安裝依賴

安裝 React 和 Parcel：

npm install react react-dom
npm install --save-dev parcel-bundler

步驟 3：創建我們的 React 組件

創建 src/App.js：

import React from 'react';

function App() {
return (
<div>
<h1>Hello, React with Parcel!</h1>
<p>這個應用程序是用 Parcel 打包的。</p>
</div>
);
}

export default App;

創建 src/index.js：

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

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

步驟 4：創建 HTML 文件

創建 src/index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的 Parcel React App</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>

注意我們是如何直接鏈接到我們的 index.js 文件的。Parcel 將為我們處理打包！

步驟 5：將腚本添加到 package.json

更新你的 package.json：

"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html"
}

步驟 6：運行應用程序

現在，讓我們啟動我們的應用程序：

npm start

Parcel 將自動在瀏覽器中打開您的應用程序。您所做的任何更改都會立即反映！

為生產環境構建：

npm run build

這將在 dist 目錄中創建優化的文件。

比較 Rollup 和 Parcel

這裡是我們使用過的兩個打包器的快速比較：

功能	Rollup	Parcel
配置	需要配置文件	零配置
速度	快速	非常快速
打包大小	通常較小	稍微較大
學習曲線	較陡峭	平滑
灵活性	高度可定制	较少可定制

兩個打包器都有其優勢，選擇哪一個通常取決於項目的特定需求。

結論

恭喜你！你現在已經使用 Rollup 和 Parcel 創建了 React 應用程序。記住，千里之行，始於足下，而你已經踏出了進入 React 開發令人興奮世界的第一步。

隨著你繼續學習和成長，你會發現 React 在網頁開發中打開了一個全新的世界。這就像學習繪畫 - 起初，你可能在基本的形狀上挣扎，但很快你就能創作出傑作！

持續練習，保持好奇心，最重要的是，享受樂趣！React 是一個強大的工具，但使用起來也很有趣。快樂編程！

Credits: Image by storyset