文章目錄
前言
會想寫這系列文，是因為一開始，自己只是知道怎麼用 html/css/js 做出想要做的東西，但很多觀念並不是很清晰，導致當初在學React時遇到了不少困難。近年來框架開始成為前端不可或缺的技能，所以希望能用這系列幫助和我一樣狀況但想入門React的人，能更快上手，另一方面也記錄自己的學習。
建議可以搭配目前網路上其他前輩的React教學文，觀念上會更加清晰。
事前工具安裝
因此我們也會需要下列這幾項工具:
- 套件管理工具(ex: npm/yarn)
- 打包工具(ex: webpack)
- 編譯器(ex: babel)
聽到這裡，你可能會有種用React很麻煩的感覺
所以再強調一次: 殺雞焉用牛刀，請評估自己是否真的需要用框架。
以下是安裝這些工具的方法。
步驟 1 : 安裝npm
npm是「套件管理系統」。
簡單來說，它像是一個能把寫好的程式碼放在上面供別人使用的平台。
前面有提到React是Facebook寫好的函式庫
雖然能透過使用CDN引入
但通常我們都是透過npm使用。
非Unix系統，到這裡進行下載Node.js並安裝
npm會一起被安裝
安裝完請務必重新開機。
步驟 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)，輸入以下指令
npm install -g create-react-app
create-react-app就會透過npm被安裝好。
步驟 3: 安裝vscode
vscode是由微軟推出，這幾年急速竄紅的文字編輯器
( 如果你已經找到適合的編輯工具，可以直接跳過這一步看下一篇 )
- 請到https://code.visualstudio.com/
下載 vscode
- 點選左側Extension
- 搜尋並安裝ESlint
- 搜尋並安裝 JS JSX Snippets
基礎的編輯環境就設定好了。
之後還會有launch.json的設定，在下一篇一起講。
小結
到這邊，需要的tool都已經安裝完畢。下一篇會講述如何用create-react-app建立專案。
