前言

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

事前工具安裝

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

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

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

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

步驟 1 : 安裝npm

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

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

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

nodejs_download

步驟 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被安裝好。

步驟 3: 安裝vscode

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

  1. 請到https://code.visualstudio.com/
    下載 vscode
    vs code offical website
  2. 點選左側Extension
    vscode plugin
  3. 搜尋並安裝ESlint
    vscode_eslint
  4. 搜尋並安裝 JS JSX Snippets
    vscode jsx_snippets

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

小結

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