輕鬆建立React專案,超簡單詳細安裝流程,10分鐘內就能輕鬆完成

學了基本的HTML跟CSS還有JavaScript之後,我接下來要開始學習前端框架,在三大前端框架React、Vue.js、Angular中,我選擇React來學習,沒有特別原因,主要就是學習線上課程的老師建議可以先學React

安裝環境

安裝node.js

要安裝React前必須先安裝node.js,因為安裝React會用到終端機。過去的JavaScript只能在瀏覽器上運作,推出了node.js之後,只要安裝好就可以在本機電腦上執行JavaScript

安裝React的工具Create React App就是需要將JavaScript指令在安裝在電腦上運作

來到官網,右上角可以選擇語言,有支援繁體中文介面

  • LTS長期維護版:由官方長期維護,通常持續30個月以上
  • Current最新版本:具有現在最新功能,但可能會有變更,較不穩定

※建議選擇LTS長期維護版即可

檢查是否安裝完,打開你的終端機Windows搜尋cmd(命令提示字元)

輸入指令:就會出現版本號,代表安裝成功

code -v

安裝React

來到React官網,可以依照自己喜歡的語言模式到右上角的”languages”,我是選擇”繁體中文模式”

接下來到導覽列中的”文件”,並選擇右邊的”建立全新的 React 應用程式”

拉到下面看到程式碼”Create React App”,並且看到下面的程式碼,這是快速安裝React開發環境的指令

建立一個要編輯專案的資料夾(建立資料夾就不示範了),並且打開你的編輯器(我使用VSCode),到你的專案資料夾當中,打開終端機

輸入官網上面Create React App的相關指令

  • 建立一個名為 my-app 的react專案, my-app可以更改
  • cd進入某個路徑,你剛剛的專案,示範是my-app
  • 啟動react專案
npx create-react-app my-app
cd my-app
npm start

當你輸入後npm start,看到跳出原本專案安裝的預設畫面,就成功了

結論

在學習一套新的語言或是框架前,安裝環境往往都讓人覺得直接想放棄,所以把步驟簡單化,至少可以開始學習之後,再來去了解更多詳細的內容

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *