【React】react學習筆記09-使用腳手架開發

安裝npm

Npm(Node Package Manager) 是node的包管理工具，每一個包都是一個模塊，因此也能夠說npm是node的模塊管理工具。

網絡上已經有不少的資料，安裝過程比較簡單，這裏不作介紹。

 

經過npm安裝React腳手架

命令以下：

#查看庫所在的目錄
zxdeMacBook-Pro:~ zhangxu$ npm root -g
/Users/zhangxu/.nvm/versions/node/v10.14.1/lib/node_modules
zxdeMacBook-Pro:~ zhangxu$ cd /Users/zhangxu/.nvm/versions/node/v10.14.1/lib/node_modules
zxdeMacBook-Pro:node_modules zhangxu$ ls
@ali		jscodeshift	npm

#下載腳手架
zxdeMacBook-Pro:node_modules zhangxu$ npm install -g create-react-app
/Users/zhangxu/.nvm/versions/node/v10.14.1/bin/create-react-app -> /Users/zhangxu/.nvm/versions/node/v10.14.1/lib/node_modules/create-react-app/index.js
+ create-react-app@3.0.1
added 91 packages from 45 contributors in 23.138s

#進入存放項目的目錄，建立一個新項目
zxdeMacBook-Pro:node_modules zhangxu$ cd /Users/zhangxu/Workspace/
zxdeMacBook-Pro:node_modules zhangxu$ create-react-app helloreact

#進入項目目錄，而後啓動
zxdeMacBook-Pro:node_modules zhangxu$ cd helloreact
zxdeMacBook-Pro:hello_react zhangxu$ npm start

　　

項目啓動後效果：

 

項目結構與描述文件

咱們使用WebStorm打開項目，腳手架生成的目錄結構圖以下：

其中：

node_modules是一些第三方的庫

src文件夾存放咱們的源代碼文件

package.json則是項目的描述文件，如圖描述了項目詳細信息

 

調試IDE工具：

打開設置窗口（macOS ：cmd + ,）

開啓jax格式校驗：

 React提示插件安裝

 

作完這幾個步驟，就能夠開始使用腳手架進行開發了。

Hello React