react 工程起步安裝chrome 開發調試工具 react developer tools 及初建一個react 項目

本文轉載自查看原文 2018-09-05 17:46 11146

1.安裝react 開發工具

1.下載 chrome react developer tools

下載地址：https://pan.baidu.com/s/1eSZsXDC 下載好是一個crx 格式的文件。

2.安裝：打開chrome 瀏覽器==>更多工具==》擴展程序

將插件拖入在詳細信息中點擊啟用即可； react developer tools 安裝完畢。

2.現在開始新建一個react項目：

1.確保電腦中已經安裝好node npm

如何確定已經安裝好node--打開命令工具輸入cmd==》輸入node -v 如出現版本號，則說明node已經安裝好，詳情請看之前關於“安裝node及相關配置”的文章

npm同理。

方案一：

方案一會幫你打包你的代碼，為你提供一個開發服務器，但是需要自己添加所需依賴。

安裝全局包。
在WebStorm的左下角點擊Terminal，輸入：npm i react-scripts -g。
初始化。
繼續輸入： npm init，然后安靜等待，當出現下圖划線部分時（如果你的項目名不是英文小寫，請自覺輸入），否則一直狂按回車鍵就好。
在新創建的項目下新建一個名為public的文件夾，並在該文件夾下新建一個名為index.html的文件。
在新創建的項目下新建一個名為src的文件夾，並在該文件夾下新建一個名為index.js的文件。
添加依賴。
點回左下角的Terminal，繼續輸入：npm i react react-dom -S。
打開index.html文件，在代碼行中輸入！，再按tab鍵，可快捷生成html文檔。之后在body標簽對中添加：
```
<div id="app" />
```
打開package.json文件，將下圖中的內容進行替換：

替換后：
在src文件夾下新建一個組件App.js，其代碼如下：

import React from 'react';

class App extends React.Component {
  render () {
    return (
      <div>
        Hello React!
      </div>
    );
  }
}

export default App;

打開index.js文件，在代碼行中輸入：

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('app'));

運行。
點回左下角的Terminal，輸入：npm start，即可運行我們寫的Hello React! 小應用啦~

方案二：

方案二的方法更方便，使用create-react-app包，然后幾行命令就搞定了，只是可能會比較慢== (在cmd命令行中)進入某盤f:回車即可，進入某個路徑 f:\react和回車即可
你可以在GitHub上面詳細了解這個包。
create-react-app會幫你下載項目的模板文件，比如public/index.html和src/index.js這些，然后會幫你執行npm install來安裝項目依賴。
這里就不按步驟依次截圖了，在左下角的Terminal中按序鍵入下列命令就好，其他的都不用做：