使用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的转译和编译。创建好的前端项目将只包括reactreact-domreact-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

Tip

如果使用Typescript编写项目,那么生成的.js文件将会被替换为.tsx文件。

项目创建好以后,可以使用命令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方式启动应用时起效,并不参与应用的编译。

Tip

反向代理的配置使用辅助配置工具直接配置Webpack Dev Server会更加便利实用,并且可以直接复用Webpack的配置。