iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 1
0
Modern Web

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

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

前言

會想寫這系列文,是因為一開始,自己只是知道怎麼用 html/css/js 做出想要做的東西,但很多觀念並不是很清晰,導致當初在學React時遇到了不少困難。近年來框架開始成為前端不可或缺的技能,所以希望能用這系列幫助和我一樣狀況但想入門React的人,能更快上手,另一方面也記錄自己的學習。
建議可以搭配目前網路上其他前輩的React教學文,觀念上會更加清晰。

在這系列的文章,我希望自己能盡量:

  1. 以簡單的方式解釋複雜的東西。
  2. 控制每一篇的篇幅不要太長。
  3. 讓讀者能了解每個步驟的觀念。
  4. 讓讀者不只是學React,而是同時學習js框架的使用邏輯。

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,這三大框架最有名。

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

  1. 編寫程式碼
  2. 輸出網頁程式(html、php......)
  3. 透過伺服器呈現網頁

變成

  1. 載入別人寫好的函式庫(套件)
  2. 編寫程式碼
  3. 將新語法/函式庫的程式碼做「打包、編譯」成瀏覽器認得的程式碼 (preprocessing)
  4. 輸出網頁程式
  5. 透過伺服器呈現網頁

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

  1. 套件管理工具(ex: npm/yarn)
  2. 打包工具(ex: webpack)
  3. 編譯器(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 installnpm i,就能生成與你相同的 node_module資料夾。

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

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

npm install -g create-react-app

create-react-app就會透過npm被安裝好。

Step 3: IDE(文字編輯器)的安裝和設定 - vscode (可跳過)

vscode是由微軟推出,這幾年急速竄紅的文字編輯器
( 如果你已經找到適合的編輯工具,可以直接跳過這一步看下一篇 )

  1. 請到https://code.visualstudio.com/
    下載 vscode

  2. 點選左側Extension

  3. 搜尋並安裝ESlint

  4. 搜尋並安裝 JS JSX Snippets

基礎的編輯環境就設定好了。
之後還會有launch.json的設定,在下一篇一起講。

小結

到這邊,需要的tool都已經安裝完畢。下一篇會講述如何用create-react-app建立專案。


目錄

【React.js入門 - 01】 前言 & 環境設置(上)
【React.js入門 - 02】 環境設置(下) - 使用create-react-app
【React.js入門 - 03】 開始之前應該要知道的DOM和ES6
【React.js入門 - 04】 HelloWorld! - 從ReactDOM開始
【React.js入門 - 05】 JSX (上)
【React.js入門 - 06】 JSX (下)
【React.js入門 - 07】 function component
【React.js入門 - 08】 用props綁定資料
【React.js入門 - 09】 用props綁定函式
【React.js入門 - 10】 夾在中間的props: children
【React.js入門 - 11】 開始進入class component
【React.js入門 - 12】 state 與 詳解setState語法
【React.js入門 - 13】 useState - 在function component用state
【React.js入門 - 14】 Debug利器 : React-Developer-Tools
【React.js入門 - 15】 使用Http request - Fetch Api
【React.js入門 - 16】 React生命週期(1/4): Mount(上)- 在渲染以前
【React.js入門 - 17】 React生命週期(2/4): Mount(下) - 應該多用的componentDidMount
【React.js入門 - 18】 React生命週期(3/4): Unmount - 只有componentWillUnmount
【React.js入門 - 19】 React生命週期(4/4): Update系列一次講完
【React.js入門 - 20】 useEffect - 在function component用生命週期
【React.js入門 - 21】 各階層Component的溝通
【React.js入門 - 22】 元件練習(上) - 在class利用遞迴+state實作動畫
【React.js入門 - 23】 元件練習(下) - 在function利用useEffect遞迴+useState實作動畫
【React.js入門 - 24】 Custom hook - 給我另一個超推React hook的理由
【React.js入門 - 25】 監控瀏覽器長寬 - 以React hook實現
【React.js入門 - 26】 input使用、input與state的互動 (控制組件) 、其他輸入元素
【React.js入門 - 27】 我要更多更多的分頁 - react-router-dom (上)
【React.js入門 - 28】 我要更多更多的分頁 - react-router-dom (下)
【React.js入門 - 29】 使用圖片、使用css檔、新手容易遇到的問題
【React.js入門 - 30】 學了React之後,然後呢?


下一篇
【React.js入門 - 02】 環境設置(下) - 使用create-react-app
系列文
給初入JS框架新手的React.js入門31

尚未有邦友留言

立即登入留言