iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
0
Modern Web

React系列 第 3

React專案目錄介紹

  • 分享至 

  • xImage
  •  

安裝完之後你的目錄底下應該會有這些東西

my-app/
  .gitignore
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

.gitignore: 設定你的專案如果要上傳到git會忽略掉哪些東西,目前有node_module,因為它太大包上傳需要非常久,clone下來之後用npm install抓比較快

README: 讀我檔案,這個東西大概就是弄出這包的作者對這個東西的介紹之類的,沒認真看過

node_module: 這個資料夾裡面裝著一堆開發會用到的node套件,webpack啦babel啦eslint之類的很多很多,作者都貼心的幫你放進去了

pacakge.json: 跟你說建立這個專案的時候node幫你抓了些什麼東西

public: 這個資料夾裡面的index.html是這個React專案的頁面模板,之後會介紹到,你會引入進這個html檔裡面的東西也會放在這裡面

src: 這個資料夾最重要,底下放的是React的元件以及他們的css,index.js是最主要的React元件,記得元件都要放在這個資料夾底下,不然wabpack不會打包到他們,不過如果你跟我一樣有強迫症想稍微分類一下也可以,比如說分成css一個資料夾js一個資料夾,或是一個元件一個資料夾都是沒問題的

順帶一提編輯器推薦VS Code(Visual Studio Code),在專案內使用 ctrl+`可以開啟command line不用自己再另外開,對於需要使用npm指令開啟開發模式的React來說很方便,而且比起同樣是蠻常見的sublime,它不用額外安裝套件就支援JSX語法

因為目前還有其他專案在身,所以每天的篇幅不會太長,在這先跟正在看這篇文章的你道個歉,目前包含安裝以及React介紹的前置講解大概到這邊已經結束,接著就要進入正題,會介紹React的渲染以及元件化特性,還有states跟props還有生命週期的部分,那就明天見囉


上一篇
安裝React
下一篇
React的渲染特性
系列文
React6
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言