使用Create React App创建React应用

Create React App（经常简写为CRA）是一个用于创建新单页应用（SPA）的最佳方式。要使用Create React App创建一个新的项目只需要执行以下命令。

npx create-react-app project-name

其中npx命令是自npm 5.2以后的版本附带的package运行工具。如果不习惯使用npm进行包管理，还可以使用以下基于yarn的命令来创建React应用。

yarn create react-app project-name

如果需要使用Typescript来书写项目，只需要在以上命令后添加参数--template typescript即可。

如果系统中已经安装过旧版本的Create React App，那么可以使用以下命令来删除旧版本的应用，然后再安装新版。

npm uninstall -g create-react-app
yarn global remove create-react-app

执行过以上两个命令之后，就可以保证npx命令会使用最新的Create React App了。

CRA只会创建一个前端项目，不会处理后端逻辑或者操作数据库。其内部使用Babel和Webpack来进行Javascript的转译和编译。创建好的前端项目将只包括react、react-dom和react-scripts三个基础包，如果需要使用redux或者react-router，则需要自行完成后续的安装，创建的项目一般具有以下内容。

• project-name
  • README.md
  • node_modules
  • package.json
  • .gitignore
  • public
    • robots.txt
    • manifest.json
    • logo512.png
    • logo192.png
    • index.html
    • favicon.ico
  • src
    • App.css
    • App.js
    • App.test.js
    • index.css
    • index.js
    • logo.svg
    • serviceWorker.jss

项目创建好以后，可以使用命令npm start以开发模式引动应用，此时工具将会采用热重载技术来针对项目文件的编辑进行实时显示。当项目开发完成，可以使用npm run build命令进行编译打包，编译好的可发布文件将位于dist文件夹中。

如果需要使用反向代理与后端服务整合，可以在package.json文件中增加proxy字段，指定后端服务所在位置即可。proxy字段只支持反向代理HTTP、HTTPS和WebSocket连接，并且需要调整后端服务的CORS设置。如果需要使用自定义的反向代理设置，需要在项目中添加http-proxy-middleware依赖，并在src目录中添加setupProxy.js文件来进行配置，该文件的示例内容格式如下。

const proxy = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    '/api',
    proxy({
      target: 'http://localhost:4000',
      changeOrigin: true
    })
  );
  app.use(
    '/wsapi',
    proxy({
      target: 'http://localhost:4000',
      changeOrigin: false,
      ws: true // 使用ws选项可以开启WebSocket支持
    })
  );
};

虽然setupProxy.js文件建立在src目录下，但是其只在使用Development方式启动应用时起效，并不参与应用的编译。