iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
1
Modern Web

被 React react 的後端工程師系列 第 3

[DAY03] 上帝視角之路徑之熟門熟路老司機之資料夾說明

  • 分享至 

  • xImage
  •  

我想說的是:
快速了解各個資料夾內資料的用處

用框架的好習慣就是先搞清楚各個資料夾的用處
就像是你今天出國去了國外的合法賭場,至少要先知道人家的規矩跟行情
知道籌碼哪裡可以換、每一桌的金額大小等等
若是不清不楚的,就只能四處拿拿免費的果汁飲料當自助吧了

上一篇建立了第一個 React 專案
我們就來看看到底 React 專案中的資料夾裡賣的是什麼膏藥

這是新專案中預設的內容
https://ithelp.ithome.com.tw/upload/images/20190915/20121016caPjAA5WZv.png

  • README.md:有在使用 github 的人都知道這個 看我.媽的 檔案就是對後人的專案介紹。不管是安裝說明或是專案介紹都可以使用 Markdown 語法來編排,鐵人賽的編輯器也是用 Markdown 語法喔!
  • package.json:這個是 webpack 指令配置和第三方套件管理文件
  • yarn.lock 或是有些人是 package-lock.json:這個檔案用一句話來解釋,就是鎖定(lock)安裝時的版本號,並且需要上傳到git,來保證其他人再 npm install 時使用的套件版本能保證一致。因為常常套件升級,舊的專案就爆了...所以需要一個設定檔來告訴程式,要安裝的套件版本
  • node_modules:第三方套件包 a.k.a 黑洞。
    https://ithelp.ithome.com.tw/upload/images/20190915/20121016CPoZ5TwyHm.png
  • gitignore:會用 git 就知道這個是幹嘛的了,會把 node_modules 資料夾加入
  • public:共用文件,有一些圖示和一些共用的模板
    • favicon.ico:就是個 favicon.ico
    • index.html:首頁的模板
    • manifest.json:碰到再說
  • src:主要 React 程式都寫在這
    • index.js:React 程式的入口
    • index.css:這個是 index.js 用到的CSS檔案
    • app.js:一個 component,使用 export default App; 讓他在 index.js 被調用
    • serviceWorker.js:PWA 會用到這個檔案,有了這個檔案,就相當於有了離線瀏覽的功能

以上就是 react 新專案的基本資料夾介紹


上一篇
[DAY02] 套路開始
下一篇
[DAY04] 你好世界
系列文
被 React react 的後端工程師30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
PeterLiao
iT邦新手 4 級 ‧ 2019-09-17 13:04:56

README.md 的翻譯太絕了/images/emoticon/emoticon01.gif

我要留言

立即登入留言