iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
自我挑戰組

React自我學習心得30天~系列 第 22

Day22 Create-react-app開發React

  • 分享至 

  • xImage
  •  

昨天介紹完Create-react-app的開發,今天就來介紹一下Create-react-app的環境建立方式。

  1. 建立專案的資料夾
create-react-app hello-world

備註:昨天若是使用官網提供的指令npx create-react-app my-app安裝的話,便會在你的根目錄底下建立my-app資料夾,可以直接當作你的專案資料夾或改成符合本次專案的名字。
2. 移動至建立好的專案資料夾位置,並啟動專案

cd my-app
npm start

移動的指令為cd+(空格)+路徑,成功啟用專案後,編譯器預設瀏覽器就會出現以下的畫面。
https://ithelp.ithome.com.tw/upload/images/20211007/20141241zjXh94lnhw.png
3. 開發程式
進入到開發階段時,由於Create-react-app已經內建好webpack、Babel、ESLint等好用的開發工具,修改好程式碼儲存時便會將寫好的程式渲染到瀏覽器上。
4. 完成專案

npm run build

在終端機輸入完上述的程式後,便會在專案資料夾底下建立一個build的資料夾,build裡面的檔案就是部署網站所需要的靜態檔案,其他檔案在部署階段可以不用上傳。


上一篇
Day21 Create React App
下一篇
Day23 Portal
系列文
React自我學習心得30天~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言