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.3Mac中如果上述的环境没有安装可以使用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项目：
