接續昨天用 create-react-app 開啟專案之後，
今天要來看看我們的專案資料庫裡面有什麼東西！

What’s in my folders?

1. package.json

package.json是一個 Package Manager，簡單來說當我用npm安裝其他 Library 的時候，他的名字會出現在這裡面。

什麼時候會需要安裝呢？
比如說我想要讓我的圖片有3D的傾斜效果，我其實不需要全部的效果自己寫，可以到NPM網站去搜尋別人寫好的。透過重新使用他的Module，我只需要安裝好之後，import到我的程式碼裡面，按照文件的說明修改，我就不需要自己造輪子，輕鬆地坐上司機開的穩穩的車。（我懷疑你在開車但我....）

當我在下載別人的 Project 的時候，別人的程式可能用了一些我的電腦沒有的 dependency，這時候我也只需要跑一個 npm install，就能讓電腦自己安裝 package.json裡面的種種。是不是很神！

在我們create-react-app的時候，他們自動幫我們安裝了幾個 library，讓我們來看看：

1. React
2. React-DOM
3. React-Scripts：這是一個 library，讓我們不用擔心 Babel 跟 Webpack，其中有四個 Scripts：
   1. start：用來啟動project的預覽，讓你的網頁在本機端的 Localhost 跑，React在你每次存檔的時候都會自動幫你更新預覽，超方便的！
   2. build：能讓在 <src>中我們寫的程式，經過最佳化(Optimize)跟最小化(Minify)，變成在 <public> 裡面的程式碼。前面提過，我們寫的 JAX 瀏覽器是看不懂的，所以透過這個 build 指令，他能幫我把我寫的東西轉換成瀏覽器看得懂的語言，還會順便最佳化、減少檔案大小等。
      提到這裡，也記錄一下上述提到的兩個檔案夾在做什麼：
      • <src>：寫作 src 唸作 source 的資料夾，就像一個工作空間、工作室，是我們的程式的生活範圍
      • <public>：這裡面的程式碼就是要給瀏覽器看的舊版 Javascript，基本上長得就像 gibberish (胡言亂語)。
   3. test：用來跑測試用的，我應該也還不會用到。
   4. eject：這就跟前面提到的Babel & Webpack有關了。如果你想要自己管理而不透過預設的管理的話，這把那些藏起來的 configuration給你 <config>跟<script>檔案。基本上，建議新手不要eject，我這系列應該也還不會用到客製化的設定，只要知道這個指令在幹嘛就好了。

2. App.js

App.js基本上可以說是我們要寫React的中樞，也是我們的主畫布。

在 React 裡面，我們基本上不會碰到 HTML 的檔案，為什麼呢？
因為 React 是個霸道總裁，他會跟你說：
「不要碰 DOM！！我來做這苦差事就好了，你就跟我說你想要做什麼就好！」
「你說要一個金髮混血又長得像水行俠的寶寶，我就會給你一個金髮混血又長得像水行俠的寶寶！」

簡單來說，我們就透過 React + JAX 寫出一個很像 HTML ，又很不像的東西，然後 React 會幫我們翻譯、負責跟 DOM 溝通，做出我們要的樣子，這樣的寫碼方式又叫做 Declarative，不用一步步說要做什麼，只需要畫大餅（誤）。

App.js去掉中間我們不會用到的腸子之後，一開始長這樣：

import React from 'react';	// 從 React import 我們所有需要的東西
import logo from './logo';	// 就是一個連向 logo 檔案的 import
import './app.css';			// 就是一個連向 CSS 檔案

function App () {		// 有一個 function 叫做 App，他 return HTML
	return (
		// 裡面要寫 JAX
		<div className = "App">
			// 不重要的腸子
		</div>
	)
}

架構看起來蠻簡單，但是跟我之前寫過的純 HTML 那些長得都不太一樣！所以要繼續介紹下面這兩個檔案。

3. index.js

這個檔案藏著 React 霸道總裁的小秘密（是說什麼時候定人設的）
——— 總裁的機器人

import React		// 讓我們能寫 JAX
import ReactDOM	// React DOM 擔任總裁的機器人角色，跟上上下下溝通
import './index.css'
import App from './App'	// import App，aka 我們寫的程式

ReactDOM.render(<App />, document.getElementById('root'))
// 用 <App> 來取代掉 ID 叫做 'Root' 的元素，也就是取代掉全部

4. index.html

<div id="root"> <!-- 就是你 Root -->
	<!-- 這裡面不會放東西，放了也會被取代掉 -->
</div>

看到這裡，我們大概知道霸道總裁是怎麼做的了。

簡單來說：
App.js -> index.js -> index.html
我們在 App.js 寫的 code 會傳到 index.js 再取代掉 index.htmlroot 裡面的東西
一個用 javascript 借屍還魂的步驟就這麼簡單，
你就能得到一個金髮混血又長得像水行俠的寶寶囉！（到底）

了解 React 背後發生什麼事之後，下一集我們會討論 class component vs function，

希望我的分享有幫助到你

謝謝你的追蹤
Stay tuned and see you tomorrow!

About Roy

Social Media
Facebook - RoyWannago
Twitter - @roywannago
Instagram 分享設計與程式學習 - @royflwdesign
Instagram 分享 UX 迷因 - @UX_WTF
YouTube 分享美國生活- RoyWannago YouTube