【React.js入門 - 01】前言 & 環境設置(上) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 1

Modern Web

給初入JS框架新手的React.js入門系列第 1 篇

【React.js入門 - 01】前言 & 環境設置(上)

11th鐵人賽 reactjs javascript

Andy Chang

2019-09-12 16:19:10

111405 瀏覽

分享至

前言

(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的提問

這個系列和我在12屆鐵人賽的React.js系列文最近修訂後和深智數位合作，在天瓏開始預購了，想學React的朋友可以參考看看:
https://www.tenlong.com.tw/products/9789860776188?list_name=srh

Step 0 : 我真的需要React ? React是什麼 ?

如果你的專案大/複雜的時候，再來考慮使用React或是其他框架。

首先，我們要先知道React和framework是什麼。
隨著時代的演進，網頁的功能越來越多、網頁的架構也越來越大。漸漸的，我們的網頁裡面的<script>標籤越來越多，散布在各個html檔裡。有一天，維護網頁的工程師終於受不了了:

X! 就不能把所有的js檔用更有秩序的方式管理嗎?

身為工程師，遇到問題就要用程式解決。工程師心想，如果平常都在用javascript去處理style和html，為何不也用javascript來解決這個問題呢?於是，各家工程師開始編寫處理這個問題的js函式庫，並把這些函式庫稱為框架(framework)。(如果不好理解，可以把框架想像成是「整合html、js和css的格式」)。

其中，又以Google寫的Angular、中國人寫的Vue、和Facebook寫的React，這三大框架最有名。

然而我們的瀏覽器不能平白無故認得這些各家自己寫的函式庫。
因此，當我們使用這些函式庫時，製作網頁的過程從原本的

編寫程式碼

輸出網頁程式(html、php......)

透過伺服器呈現網頁

變成

載入別人寫好的函式庫(套件)

編寫程式碼

將新語法/函式庫的程式碼做「打包、編譯」成瀏覽器認得的程式碼 (preprocessing)

輸出網頁程式

透過伺服器呈現網頁

因此我們也會需要下列這幾項工具:

套件管理工具(ex: npm/yarn)
打包工具(ex: webpack)
編譯器(ex: babel)

聽到這裡，你可能會有種用React很麻煩的感覺
所以再強調一次: 殺雞焉用牛刀，請評估自己是否真的需要用框架。

以下是安裝這些工具的方法。

Step 1 : 安裝npm

npm是「套件管理系統」。
簡單來說，它像是一個能把寫好的程式碼放在上面供別人使用的平台。

前面有提到React是Facebook寫好的函式庫
雖然能透過使用CDN引入
但通常我們都是透過npm使用。

非Unix系統，到這裡進行下載Node.js並安裝
npm會一起被安裝
安裝完請務必重新開機。

Step 2 : 安裝「一次安裝並設定好react、babel、webpack」的create-react-app

跟PowerPoint裡面有提供簡報範本一樣。react官方有在npm上提供我們已經設定好webpack、babel和react的範本程式，也就是create-react-app。

npm安裝套件的方式是透過指令，用 npm install 套件名稱 或 npm i 套件名稱 就能在目錄下安裝指定套件。套件原始碼會存放在目錄底下自動生成的 node_module資料夾內。

如果在指令後方加上--save，安裝的套件資訊會被記錄在專案底下自動生成的 package-lock.json內。因為node_module資料夾通常很大、超大，所以如果別人想要協作這份專案，只需要你的 package-lock.json，再輸入 npm install 或 npm i ，就能生成與你相同的 node_module資料夾。

而在指令中加入 -g 會讓這個套件進行全局安裝 (不管在哪都能使用，像是global和local變數的差別)。
*註: 非必要請不要用 -g ，容易造成套件版本衝突問題。

請打開電腦的終端機(cmd/terminal)，輸入以下指令