一、前言

從今天起連續 5 天，我們會專注在前端框架 React 的學習上。學習框架原因不單只是因為專案需求，更多的原因是學框架對于求職來說，已經變成一種標準技能之一。雖然知道用框架很重要，至少必須要學會一種。但是，該怎麼「正確有效的學會框架」呢？就會是一個值得研究的問題了。

對於 React 的學習，如果是直接學習，應該會覺得不好入門，對於 React 的學習，我的方法不一定是最佳路徑，最少知道是可行的，本系列只是入門，希望能幫上，不知道該如何開始的朋友們。

二、環境建置

我學習 React 規劃，順序大概是長這樣子。

1. 收集相關資訊
2. 動手實作
3. 寫下筆記：（使用 Notion）

首先，先收集 React 相關的資料，然後找出 1～2 個資源當作主要的學習目標，重要的是，在學會某一個方法的時候，一定要先筆記下來，記錄的內容主要是操作的手法，也就是SOP，若是沒有紀錄，忘了就等於要再從新學習一次，這樣反而會浪費更多的時間。好歐，學習建議先到這邊，接下來，我們要開始建置環境，本篇的目標是架設 React 專案，並且寫下第一個「Hello World」。

2.1 主要學習資源

主要參考的資料如下：

1. React Tutorial - W3Schools
2. Getting Started（React 官網）

2.2 安裝環境

1. Visual Studio Code
2. Node.js：（建議系統用Windows 10 以上，因為 React 有最低版本限制的問題，Node.js 可以用 LTS 版本，大於 14 版本就 OK 了。建議更新到最新版本）。
   • node -v：檢查 Node.js 當前版本。
   • npm -v：檢查 npm 當前版本。
3. Google Chrome：（React Developer Tools擴充套件，Debug 用）

聽說，建置環境有兩種方式【1】，一種是官方 CRA 建置環境，而另一種是自架環境。CRA 指的是 Create a New React App，雖然用一豪指令可以快速架設，但是會包含一些可能用不到的東西。而本篇主要是採用自架環境的方式，比較能掌握裝了什麼東西。CRA安裝指令可參考這篇【2】或是影片【3】

後來發現大多教學都用都直接用CRA方式，一時之間找不到自建環境的寫法。後來是直接參考這個日文影片【４】來學習，語言不通沒關係，看步驟也能大概知道意思。下一小節我們就會建立好 React 專案，並且開始撰寫我們的第一個「Hello World」。

2.3 直接開始撰寫 Hello World

檢查node和npm版本。

node -v
npm -v

開啟 VS Code，打開 PowerShell（`Ctrl + Shift + ``），並且輸入以下指令：

cd 存放React的資料夾路徑 
mkdir 資料夾名稱 （建立新資料夾）
cd 剛建立的資料夾　（切換到該資料夾）　

建立 React 專案的指令如下。（安裝中途需要按下 Enter 後，繼續執行下一步）

npx create-react-app myproject

myproject是你的專案資料夾名稱（名稱可更改），使用cd指令切換到資料夾後，再輸入npm start。

cd myproject
npm start

只要能跑出下面的頁面，代表基本專案建置成功，其網址為：localhost:3000。

顯示結果：

再來，要完成 Hello World 文字的顯示，找到專案下src資料夾裡面的App.js，修改成以下程式碼即可。

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

function App() {
    return (
        <div className='App'>
            <h1>Hello World</h1>
        </div>
    );
}

export default App;

顯示結果：

太棒了！我們完成了萬事起頭難的「起頭難」了，接下來就只剩下 React 開發要用到的語法和觀念建立了！

2.4 學 React 前的預備知識

這裡提供一些關於 React 的相關知識點。

1. React 發展趨勢和前景【5】：看完後可以對 React 有初步概念。
2. 學習 React 的先決條件【6】
   • 熟悉基本的HTML、CSS。
   • 對JavaScript基本認識（尤其是ES6語法）。
   • 了解DOM的基本用法。
   • 了解Node.js和npm的安裝與使用。
3. 面試官：談談 Vue 和 React 的區別？
4. Angular vs React vs Vue：2022 年框架的最佳選擇是哪個？
5. React 與 Vue — 有了 jQuery 為什麼要有xxx？
6. Vue 、 React 、Angular比較

說是預備知識點，結果寫一寫變成資料存放區了啦．．．（汗）

三、JSX 初探

3.1 什麼是 JSX？

玩 React 多少會聽過JSX ，但是 JSX 是什麼東東？多少會有點困惑，其實，JSX 是一種 JavaScript 的擴充語法，也就是 JavaScript 的功能強化版，JSX 就當作是一個新語法【7】，寫法像是 HTML 或是某種字串，甚至長的更像樣板語言，但是 JSX 又比樣板語言還強，因為它可以允許你使用 JavaScript 的所有功能，所才會說 JSX 是 JavaScript 的強化版。

JSX 是一種很強的新語法，會長的跟 HTML 一模模一樣樣，並且支援 JavaScript 的樣板語言。這樣說會比較好記嗎？

3.2 JSX 怎麼用？

這部分由於我的功力有限，所以就先列上一些不錯的教學。

1. 什麼是 JSX?：「使用 JSX 時需要注意的限制」這個單元有點像經驗談，推薦可以留意這部分。
2. 一看就懂的 JSX 簡明入門教學指南：介紹 JSX 的特性（共有 10 個），好處是可以練習語法的用法，對於熟悉 JSX 語法有幫助。
3. React JSX - W3Schools：一樣是熟悉 JSX 語法的介紹。

看完 W3Schools 的 JSX 才知道，JSX 代表JavaScript XML的意思！

四、推薦資源

1. React篇: 建置React開發環境
2. React 教學，系統性學習 React 的步驟
3. 我與 React 的 30天
4. [Day 01] 沒學過 React 可以從 Hooks 開始嗎？
5. 2022年學React，一篇就夠了！

五、結論

對我來說，React 很難入門的原因，撇除個人懶惰因素，就是學習 React 的先決條件有點繁雜，也就是入門門檻稍高，這也是它不容易學的地方，其實，不只是 React，其他框架也是各自的困難處。我們現在能做的，就是大量閱讀相關資料，從中找到一條最適合自學路徑。不過學起來最有底氣的方式，莫過於自己實際動手做一遍，碰壁個幾次，慢慢就會學會了！那麼今天的內容就到這邊，一起加油吧！（衝）

六、參考資料

1. [React] 學習 React 的第一步，建立初始環境
2. Day11:React環境安裝以及啟動React
3. Create new react project and print Hello World. ReactJs tutorial for beginner
4. #01 5分でHello worldまで説明します!! React アプリ作成と起動までを5分で説明します React Javascriptライブラリのプログラミング説明
5. 2022 最適合你的前端框架： React 發展趨勢和前景！
6. React Tutorial: An Overview and Walkthrough
7. 介紹JSX - React
8. 一看就懂的 JSX 簡明入門教學指南