前言

嗨，我是Hogan
目前在經營自己的自媒體 hogan.tech
主要分享一些有關於程式碼、軟體和科技業經驗分享
有興趣的讀者可以進一步關注我，進而獲得更多資訊唷！

未來文章一併更新於此網站 Hogan.B Lab
並且包含多語系 繁體中文、英文、日文、簡體中文
觀看分類：React 白話文運動、其他系列

如果想要快速查找其他文章請點選目錄

成立 hogan.tech 的初衷是
希望每個正在這條路上探索的人，
都可以透過 Hogan.tech 嘗試進入程式領域。

前一篇文章介紹了三個名詞，分別是

1. Babel 是什麼？
2. Webpack 是什麼？
3. Npm 是什麼？

這一篇則是會手把手建立一個React專案

1. 建置環境
2. 建置專案
3. 啟動專案

建置環境

在建立一個React App 有一切工具是需要先從網路上下載的，這些工具在前幾篇文章都有介紹過。

首先是 Node.js

Node.js裡面有內建的npm 服務，可以提供我們快速下載react套件或是其他的套件。

安裝React的工具Create React App就是需要將JavaScript指令在安裝在電腦上運作

來到官網，右上角可以選擇語言，有支援繁體中文介面

• LTS：是一個穩定的版本，由官方長期維護，通常持續30個月以上
• Current：有最新功能，較不穩定

如果要確認是否有安裝成功，不管是Window、MacOS、Linux，皆可以打開終端機（terminal）輸入以下指令，就能知道是否有安裝完成。

node -v

建置專案

Node環境建置好之後，再來就是建置我們第一個React專案，這邊我偏好使用React官網的教學流程來教學，雖然也有其他快速建置專案的方法。

當Node.js確定安裝成功之後，在terminal輸入以下的指令，就可以在對應的位子建立一個my-app的資料夾，裡面放了對應的檔案以及資料夾。

npx create-react-app my-app

以下是資料夾的結構，my-app資料夾中會有三個資料夾以及三個檔案

其中node_modules裡面會放置各種的套件，透過npm install安裝的套件也會放置在這個資料夾。

package.json則是會針對這個專案進行一些設定。

/my-app
	-/public
	-/node_modules      
	-/src
	-package.json    
	-README.md         
	-package-lock.json 

啟動專案

建置完成專案之後，要如何啟動專案呢？

透過下列兩行指令就可以啟動，第一行的指令為進入my-app資料夾，第二行指令為啟動此份專案

cd my-app
npm start

如果成功執行之後，就會有以下畫面

如果成功跑出這個畫面，代表我們已經成功建立自己的第一隻React專案

結語

React白話文運動已經將近十天了，卻才開始建立與啟動React專案。

之所以這麼晚才針對啟動專案做教學，是因為學習React前，就有滿多觀念是相當重要的，包含npm、node.js、webpack、babel都是未來有可能會用到的工具。

未來的文章會繼續講解React相關知識與技術。

如果有任何建議與疑問也歡迎留言！

如果喜歡此系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～