從零開始構建react應用（二）環境配置

環境配置

從零開始，我這裏的零就是指有一臺電腦，其它啥都沒有，由於咱們要作ssr，因此node是必不可少的，還有咱們的編輯器vs code和主語言typescript。

安裝node

1. 用瀏覽器打開node官方下載頁：https://nodejs.org/zh-cn/down...
2. 選擇本身操做系統對應的安裝包下載安裝便可，我這邊選擇當前版本最新功能的macOS Installer (.pkg) 64bit的，地址是 https://nodejs.org/dist/v8.6....，能夠看到版本號是8.6.0
3. 具體安裝方式，雙擊下載下來的node-v8.6.0.pkg，一頓continue就ok啦
4. 安裝完成後可使用npm和node命令

安裝visual studio code

1. 用瀏覽器打開vs code官方下載頁：https://code.visualstudio.com...
2. 選擇本身操做系統對應的安裝包下載安裝，我這邊選擇mac版，點擊下載後是一個zip文件
3. 解壓zip文件獲得的直接就是應用程序，mac這裏直接將其拖進Applications文件夾就ok了
4. 安裝完成後可使用code命令

安裝typescript

1. 用瀏覽器打開typescript官方網站下載介紹部分：https://www.typescriptlang.or...

2. 能夠看到，直接經過命令進行全局安裝便可

   npm install -g typescript

3. 這樣就可使用tsc命令了

PS：若是npm，tsc這些命令不可用的話，要記得看一下本身操做系統的path裏是否是包含了這些命令的軟鏈

建立應用目錄

github你們應該都不陌生，我這邊選擇將這個react應用放到github倉庫上去，這樣也方便後續迭代管理使用。若是有同窗沒有github也沒關係，註冊一個也很快，實在不方便的話，能夠直接在本地建立一個文件夾來做爲應用目錄。

使用github的同窗待會須要拉取倉庫，因此須要使用到git客戶端。

安裝git

1. 用瀏覽器打開git官方下載頁：https://git-scm.com/downloads
2. 選擇本身操做系統對應的安裝包下載安裝，mac版本對應的下載地址是 https://git-scm.com/download/mac
3. 安裝完成後可使用git命令了

建立應用

1. 我在github上新建了一個倉庫叫 react-app，選擇了自動建立node相關的.gitignore文件和MIT許可證，還有一個空的README.md文件
   

2. 在本地Terminal／cmd中執行如下命令來拉取倉庫
   能夠選擇經過ssh方式

   git clone git@github.com:devlee/react-app.git

   或者使用https方式

   git clone https://github.com/devlee/react-app.git

   執行如下命令進入該目錄

   cd react-app

   執行如下命令在vs code中打開這個項目目錄

   code .

項目目錄結構

項目目錄結構沒有什麼特定的標準規定，這裏講一下我經常使用的目錄結構。

src目錄

這個目錄以下圖，在根目錄下，用於存放咱們的源代碼。

1. 經過New Folder小圖標能夠建立一個目錄，點擊後直接輸入目錄名回車便可
   
2. src目錄下面具體又分client，server，webpack三個文件夾
   
3. client目錄下放react相關的客戶端代碼
4. server目錄下放koa相關的服務端代碼
5. webpack目錄下放工程化相關的配置代碼

PS：測試，代碼覆蓋率等會在後續相關篇幅進行追加

public目錄

這個目錄位於項目根目錄下，用於存放靜態資源，好比favicon.ico文件。

@types目錄

這個目錄位於項目根目錄下，用於存放自定義的.d.ts文件，用於typescript的相關檢測。

到此爲止，咱們已經擁有了下面這個空的項目，每一個文件和文件夾的做用也都瞭解了。

Thanks

By devlee