ReactJS - 安裝：初學者指南

你好，未來的React開發者們！我很興奮能成為你們在ReactJS精彩世界中的引路人。作為一個教了年數計算機科學的人，我可以向你們保證，學習React就像學騎自行車一樣——起初可能會讓人覺得有些困難，但一旦你掌握了要領，你很快就會騎得飛快！

ReactJS - Installation

ReactJS是什麼？

在我們深入安裝之前，讓我們快速了解一下ReactJS是什麼。React是一個流行的JavaScript庫，用於建立用戶界面，特別是單頁應用程序。它關注於創建可重用的UI組件，這些組件管理自己的狀態，使得建立複雜界面變得更容易。

現在，讓我們動手設置React吧！

工具鏈：你的React工具箱

在使用React時，我們會使用一組工具，稱為“工具鏈”。把它想像成你的React瑞士軍刀——它有著構建精彩網頁應用程序所需的一切。

我們工具鏈中的必要工具

工具	用途
Node.js	JavaScript運行時
npm (Node包管理器)	JavaScript的包管理器
Babel	JavaScript編譯器
Webpack	模塊打包器
ESLint	代碼風格檢查器
Jest	測試框架

如果這些術語現在對你來說像外星語一樣，別擔心。我們會在進行的過程中一一探討！

服務靜態服務器：你的本地遊樂場

在我們跳進複雜的設置之前，讓我們從一些簡單的東西開始——一個靜態服務器。這將允許我們在本地上服務我們的React應用程序。

設置一個簡單的靜態服務器

首先，確保你已經安裝了Node.js。你可以從nodejs.org下載。
打開你的終端或命令提示符，並運行：

npm install -g serve

這個命令將'serve'包全局安裝在你的系統上。

mkdir my-react-app
cd my-react-app

創建一個簡單的HTML文件，名為index.html：

<!DOCTYPE html>
<html>
<head>
<title>我的第一個React應用程序</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, React!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>

現在，運行serve命令：

serve

Voila！你應該會看到一個告訴你應用程序正在哪裡被服務的消息。通常，它會在http://localhost:5000。在瀏覽器中打開這個URL，你會看到你的第一個React應用程序！

Babel編譯器：翻譯未來

記得我們工具鏈中的Babel嗎？現在是見到這個神奇翻譯器的時候了！Babel是一個JavaScript編譯器，它讓你可以使用最新的JavaScript特性，即使瀏覽器還不支持它們。

我們為什麼需要Babel？

想像你正在給一個說不同語言的朋友寫信。Babel就像一個能夠立即將你的信翻譯成你朋友語言的翻譯者。在React世界中，Babel將現代JavaScript和JSX（React的語法擴展）翻譯成所有瀏覽器都能理解的JavaScript版本。

在我們的項目中使用Babel

我們其實已在上面簡單的HTML文件中包含了Babel。讓我們分解那部分：

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// 你的React代碼在這裡
</script>

第一行包含了Babel獨立庫。第二行告訴Babel編譯script標籤內的代碼。

Create React App工具鏈：一站式解決方案

現在我們已經在React的水域中涉水了，讓我們使用Create React App工具鏈來深入探討。這是一個舒適、功能豐富的環境，用於學習和構建新的React單頁應用程序。

設置Create React App

打開你的終端並運行：

npx create-react-app my-app

完成後，導航到你的新應用程序：

cd my-app

開發服務器：

npm start

你的新React應用程序應該會自動在你的瀏覽器中打開，通常是http://localhost:3000。

內容是什麼？

Create React App為你設置了一個完全配置好的開發環境。讓我們看一下我們得到了什麼：

功能	描述
React	React核心庫
webpack	打包你的代碼和資源
Babel	編譯現代JavaScript
ESLint	檢查你的代碼中的錯誤
Jest	讓你可以寫測試
熱重載	立即在瀏覽器中看到你的更改

你的第一個組件

讓我們創建一個簡單的React組件。打開src/App.js並將其內容替換為：

import React from 'react';

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

export default App;

保存文件並檢查你的瀏覽器。你應該會看到你的新組件被渲染！

結論

恭喜你！你已經邁出了進入React開發令人興奮世界的第一步。我們已經涉足了許多內容——從設置一個簡單的靜態服務器到使用強大的Create React App工具鏈。

記住，學習React是一段旅程。如果一切不會立即清晰，不要擔心。持續練習，持續建設，最重要的是，持續享受樂趣！

在我們的下一課中，我們將深入研究React組件，並開始構建更複雜的應用程序。在那之前，快樂編程！

Credits: Image by storyset