tags: 鐵人賽 React javascript nodejs vscode

• 挑戰來到第三天。今天我們要針對create-react-app幫我們建立的檔案結構，進行拆解及說明；了解之後，你將能清楚了解，未來該如何在專案中管理你專案的檔案。

探索檔案結構

• 打開vscode並開啟昨天的專案my-app，看到的資料結構如下。
  

編號	資料夾	說明
1	根目錄	存放專案設定檔的地方, ex: package.json
2	node_modules	create-react-app預設安裝的套件區
3	src	!!重要!! React開發的主要位置
4	public	建構的初始html架構及圖片資源，ex: favicon.ico 就是網頁標籤上的React Logo

先從package.json說起：

• 你一定好奇為什麼輸入npm start就能開啟瀏覽器預覽網頁，關鍵就在於這個script指令設定，才能讓我們享受便利的開發！

React的火箭發射器 ReactDOM.render

• 先看看src/index.js，裡面的程式碼最重要的是下面這一段。

// 為了讓各位聚焦我們的講解，我們先把其他的code先隱藏起來
...
import ReactDOM from 'react-dom';
...

ReactDOM.render(
  <React.StrictMode> //<-- React用來檢查component有無錯誤的方式，可先略過 
    <App />  //<-- 你設計的React-component
  </React.StrictMode>,
  document.getElementById('root') //<-- 放入的html中，id叫`root`的位置
);

ReactDOM.render( 參數1: 你設計的React-component, 
                 參數2: 你要放入的html位置 )

• ReactDOM.render 扮演著前端網頁顯示的關鍵角色，負責把你建構好的網頁元件，insert到指定的html位置。
• 就像是你做好了漢堡一樣，ReactDOM.render 負責最後的打包，把漢堡放入盒子裡；客人拿到時，就是一個完整的商品。

你說的漢堡到底在哪裡??

• 打開src/App.js，也就是我們昨天放一段黃色文字進去的地方，整段程式碼就是建構整個畫面的位置。堆疊起來就跟漢堡一樣，一層一層的。
  

結論

• 恭喜你我又邁向了鐵人賽第三天了，記得給自己歡呼一下！
• React幫我們建構好的環境，雖然檔案很多，但細看之後，其實挺簡單的。我們只需在/src/資料夾中進行React-component的開發，最後交給reactDOM.render幫我們打包，就可以看到水水的網頁了。只能說～帥啊~React

參考資源

• create-react-app Folder Structure
• 關於react的嚴格模式StrictMode
• stackoverflow - What exactly is the 'react-scripts start' command?