React的安裝
React的安裝可以支持直接在HTML中的使用，或者創建整體的React App前端工程與另外的服務端項目進行交互。前者比較適合於簡單的React項目，後者適合前後端分類的大型項目的構建。
在HTML中使用React
React支持通過靜態引入的方式進行使用，所以在HTML頁面中使用React時，可以首先加入如下的靜態依賴：
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生產環境中不建議使用 -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
然後就可以在該HTML頁面中使用React了：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"> </script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</head>
<body>
<div id="example"></div>
</body>
</html>
該頁面的顯示如下：
使用npm使用React
查看nodejs和npm是否安裝：
Yitian-MacBook-Pro:~ yitian$ node -v
v12.9.1
Yitian-MacBook-Pro:~ yitian$ npm -v
6.10.3
Mac中如果上述的環境沒有安裝可以使用brew工具進行安裝，npm會隨node一同安裝：
brew install node
國內使用 npm 速度很慢，你可以使用淘寶定製的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm：
Yitian-MacBook-Pro:~ yitian$ npm install -g cnpm --registry=https://registry.npm.taobao.org
Yitian-MacBook-Pro:~ yitian$ npm config set registry https://registry.npm.taobao.org
安裝cnpm之後就可以使用如下的方式安裝模塊了：
cnpm install [name]
使用create-react-app快速構建項目
create-react-app 是來自於 Facebook，通過該命令我們無需配置就能快速構建 React 開發環境。create-react-app 自動創建的項目是基於 Webpack + ES6 。可以執行以下命令快速創建React的項目：
# 安裝create-react-app命令
Yitian-MacBook-Pro:~ yitian$ cnpm install -g create-react-app
# 進入到指定的目錄快速創建React項目
Yitian-MacBook-Pro:ReactProjects yitian$ create-react-app my-react-app
Creating a new React app in /Users/yitian/Documents/IDEAWorkspaces/ReactProjects/my-react-app.
...
# 查看項目結構
Yitian-MacBook-Pro:ReactProjects yitian$ cd my-react-app/
Yitian-MacBook-Pro:my-react-app yitian$ ls
README.md package-lock.json public
node_modules package.json src
創建完成後，可以直接使用如下的命令啓動該React項目：
Yitian-MacBook-Pro:ReactProjects yitian$ npm start
運行成功後，會自動在瀏覽器中打開如下的頁面：
下面使用編輯器嘗試修改一下頁面中提示的src/App.js頁面，如下：
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>開始自己的第一個的React項目</h2>
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
可以看到頁面會自動重新加載，得到修改後的如下頁面：
退出start命令，可以使用：
ctrl+c
使用IDEA導入my-react-app項目進行開發
上述創建的項目可以使用IDEA將其導入以方便開發工作，下面截圖爲具體的導入過程，首先選擇如下的選項，導入剛纔創建的my-react-app項目：
然後根據提示將項目進行導入，這裏不用選擇external model進行導入：
後續的過程保持默認即可：
導入完成後，就可以在IDEA中對上述創建的項目進行開發：
在IDEA中的Terminal窗口中可以使用命令行的方式對該項目進行啓動，start命令和上述一樣：
Yitian-MacBook-Pro:ReactProjects yitian$ npm start
這樣就可以在IDEA中基於上述創建的項目進行後續的開發和學習工作。
使用IDEA構建React開發環境
除了上述使用create-react-app命令創建React項目，也可以使用IDEA自動創建一個React項目進行開發。在完成上面node和npm的環境安裝後，通過下面的過程在IDEA中創建React項目：
選擇新疆的React App項目進行創建：
輸入自己想要創建的項目名稱，其他的保存默認即可：
點擊finish後，idea會完成與create-react-app命令相同的運行過程，待運行完成後，IDEA中就會創建完成如下的react-learning-app項目：
該項目的目錄結構與上述創建的my-react-app的相同。如果啓動該項目，同樣也可以使用npm start命令進行啓動。也可以通過IDEA的啓動選項進行啓動：
在項目的右上角的啓動按鈕進行項目的啓動:
啓動完成後，瀏覽器中同樣會打開相同的啓動頁面，在此基礎上可以完成自己的開發工作：
IDEA中插件nodejs的安裝（按需安裝）
以上的過程暫時都不需要nodejs的插件。當需要nodejs插件時，在IDEA中搜索nodejs，對如下的插件進行安裝並重啓IDEA即可。
安裝並重啓完成後，在新建Project時即會多出如下的創建選項，此時可以創建Node.js項目：
