在開始 React 學習之前我們先進入官網 https://react.docschina.org/ 看看官方對 React 的解釋：React 是用於構建使用者介面的JavaScript 庫。我們只需要知道這點就夠了，對於其他的解釋當我們深入學習之後就會自然而然地懂了。

本文將按照官網的推薦在 node 開發環境下建立 React 的一個開發例項。所以在開發之前我們我們可以先在控制檯執行：

node -v

來檢查自己本地電腦是否安裝 node ，如果沒有安裝的話可以進入 node 官網 https://nodejs.org/zh-cn/ 進行安裝，安裝過程為傻瓜式安裝，一路確認就可以了。

React 官方推薦我們使用 create-react-app 模組來搭建我們的 react 專案。在安裝上 node 之後我們開啟終端，執行

npm install create-react-app -g

將 create-react-app 模組安裝在我們本地電腦，然後在終端進入到自己平時做開發的一個目錄，執行

npx create-react-app my-app
cd my-app
npm start

即可搭建並開始我們的專案，其中 npx 的使用必須在 Node 版本 >= 6 ，npm 版本 >= 5.2 的情況下才可以使用。 我們也可以使用另一種方法，在終端輸入

npm install yarn -g
yarn -v

來安裝 yarn 模組，然後就可以在自己常用的開發目錄中執行

create-react-app my-app
cd my-app
yarn start

建立的專案預設埠為 3000，如果執行成功的話可以在瀏覽器中輸入 http://localhost:3000 將專案跑起來。

我們接下來看一下我們建立的 react 專案的目錄

node_modules 檔案為我們所用到的一些node模組依賴檔案，我們可以不用去管。

public 檔案是一個公共檔案，其中 index.html 為我們的入口檔案，favicon.ico 為我們的網站的標識圖示。mainfest.json 是允許將站點新增至主螢幕，是 PWA 提供的一項重要功能，當前 manifest.json 的標準仍屬於草案階段，Chrome 和 Firefox 已經實現了這個功能，微軟正努力在 Edge 瀏覽器上實現，Apple 目前仍在考慮中，詳情可以參考：https://lavas.baidu.com/mip/doc/engage-retain-users/add-to-home-screen/introduction ，這裡我們可以不用去管它。

.gitignore 檔案為我們使用 git 上傳時忽略的檔案，

package.json 為我們專案的配置檔案，

readme.md 為專案的一些閱讀說明檔案，

yarn.lock 是我們的一些臨時儲存檔案，

上述這些我們目前都不用去管，我們做開發最重要的 src 目錄，接下來我們的開發主要實在 src 目錄下完成的。

src 目錄中 App.css 和 App.js 是我們的根元件，App.test.js 是一個測試檔案，index.js 和 index.css 是我們的 js 入口檔案，logo.svg 為一張圖片，serviceWorker.js 是一個加快瀏覽器響應速度的檔案。

我們可以看出 src 目錄比較亂，裡面的 js css 圖片等都放在了一起，所以我們在做正式開發之前先將該目錄進行一下整理。

components 用來放置我們所有的 react 元件。

static 用來存放我們所有的靜態資源。如 js css img 等。我們將 src 目錄下的 css 和 圖片分別對應放到 static 的 css 和 img 目錄下。

當然，當我們在將檔案進行歸類後執行專案會報錯，所以我們還需要對這些靜態資源的引用檔案做一下修改。我們需要將 App.js 和 index.js 中的引用到的地方進行一下修改專案就可以繼續運行了。

修改如下：

App.js

import logo from './static/img/logo.svg';
import './static/css/App.css';

index.js

import './static/css/index.css';

我們最後再來看一下瀏覽器的執行專案情況：

沒問題，關於 react 的開發環境搭建就介紹到這裡，在後續中我們將一起學習 react 專案的開發流程。

&n