Published on

创建 React 应用的 7 种方式，你用过几种？

创建 React 应用的 7 种方式，你用过几种？

一：Create-React-App

首先，我们第一个是想到的是 react 官方团队提供的脚手架工具 Create React App(cra)

npx create-react-app my-app
cd my-app
npm start

还可以选择 typescript 模板

npx create-react-app my-app --template typescript

项目是零配置的，在 package.json 中，我们可以看到以下几个命令，Create React App 将构建代码封装在 react-scripts 中。

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },

有时候，我们需要修改脚手架的默认配置，比如：我们想要修改入口模式为多入口（webpack entry）， 或者让 Create React App 支持 less ，此时 react-scripts 的默认配置就无能为力了。

eject 弹出配置

我们可以在命令行运行 eject 命令

npm run eject

将所有配置弹出，弹出后所有的依赖，比如 Webpack, Babel, ESLint 等，都会在 package.json 中安装， 然后就可以在 config/webpack.config.js 修改 webpack 相关配置了。

也可以在 package.json 中修改 babel、jest、eslint 等相关配置。

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  }

如果说，你只想修改 config/webpack.config.js 中的配置，那么 package.json 中的代码，会变得非常冗长，单 jest 配置代码就超过 1 屏。

因此社区中提供了一些可配置的 cra 方案，craco、react-app-rewired

craco 可配置的 cra

这里以 craco 为例，首先需要安装 @craco/craco

yarn add @craco/craco

我们只需要将 react-script 替换为 craco

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

然后在项目根目录创建一个 craco.config.js 用于修改默认配置。

/* craco.config.js */
module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      webpackConfig.entry = {
        index: './src/index.js',
        other: './path/to/my/entry/file.js',
      }
      return webpackConfig
    },
  },
}

上面代码就是修改 webpack 为多入口， craco 的官网也非常清晰，还提供了 plugin 模式，若你想覆盖 cra 的配置，可以先在 plugins 里面找找，比如上面提到的，让项目支持 less，就可以直接使用 craco-less 这个插件。

如果说对于上面的配置你不知所措，我想你有必要了解下，如何从零创建一个 webpack react 工程，这将帮你修改 webpack 工程更加得心应手。

二：从零创建 webapck react 工程

初始化项目

首先使用 npm init 创建一个前端项目

mkdir my-app
cd my-app
npm init -y

安装 webpack

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
  • webpack - 前端构建工具
  • webpack-cli - 让 webpack 支持命令行执行
  • webpack-dev-server - 开发模式下启动服务器，修改代码，浏览器会自动刷新。

安装到 devDependencies 中，因为这些只是构建工具

安装 babel

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader
  • babel： 可以将 es6 代码转变为 es5，
  • @babel/preset-react： 让 babel 支持 react 的预设
  • babel-loader：是让 webpack 支持 babel 的加载器

在项目更目录新建一个 babel.config.js 文件，将安装的 babel 写入这个文件，babel 会在运行前读取这份配置文件。

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
}

安装 CSS 加载器

webpack 默认不会处理 css 文件，为了让项目能够支持 css，我们需要安装 style-loader和css-loader。

npm i -D style-loader css-loader

css-loader 用于解析 css 文件； style-loader 会通过使用多个 <style></style>标签的形式自动把 styles 插入到 DOM 中。

安装 react 和 react-dom

npm i react react-dom

安装到 dependencies 中，因为react和react-dom 是运行时的依赖项

建一个 index.html 文件

创建一个在public目录，并且在下面新建一个index.html 文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Application</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

新建一个 index.js 文件

创建一个名为 src 的文件夹，所有源代码都放在该目录下，在src目录下，创建index.js文件，该文件也就是 webpack 构建的入口文件

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

创建 App 组件

新建一个 App.js 文件

// ./src/App.js
import React from 'react'
import './App.css'
const App = () => {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  )
}
export default App

新建一个 App.css 文件

// ./src/App.css
h1 {
  color: red;
}

创建 webpack config 文件

在项目根目录创建一个 webpack.config.js 文件，webpack.config.js 是 webpack 的默认配置文件名

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.js',
    clean: true,
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
}

更新 package.json 文件

"start": "webpack-dev-server --mode development --hot --open",
"build": "webpack --mode production"

webpack 有 2 种模式，分别是 development 和 production，告知 webpack 使用相应模式的内置优化， 可以从 CLI 参数中传递。 -hot 参数允许代码热更新（代码改动，浏览器会自动更新），-open参数允许 Webpack 帮我们自动打开浏览器窗口。

运行 npm run start 启动脚本时， React 应用程序应该在端口 8080 上运行，此时我们可以在本地开发 react 应用了

配置 proxy 代理

开发时，需要请求接口，而接口往往是由后端同学完成的，接口需要通过访问后端的 IP 地址来访问，若直接访问会存在跨域问题。

那么我们可以在 webpack.config.js 中配置 proxy。

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/auth', '/api'],
        target: 'http://localhost:3000',
      },
    ],
  },
}

现在，对 /api/users 的请求会将请求代理到 http://localhost:3000/api/users 上。

三：Vite

如果你的项目代码量比较大，或者你厌恶了 webpack 的打包速度，那么你可以选择使用 vite 来创建你的 React 应用。

vite 采用浏览器支持 ES 模块来解决开发时构建缓慢的问题，使用 esbuild 预构建依赖（开发时不会变动的纯 JavaScript 代码，一般是 node_modules 中的第三方包）。

vite 不但支持 vue 还支持 react、preact、svelte 等框架和原生 js。

使用 create-vite 创建应用

使用 vite 创建项目也非常简单

npm create vite@latest

我们可以在命令行中选择需要使用的的框架

选择使用 JavaScript 还是 typescript 开发

使用 npm run dev 启动，开发端口启动在 http://127.0.0.1:5173/

vite 的启动速度和热更新速度都很快，远超过 webpack，新项目完全可以使用 vite 来代替 cra。

老项目迁移会存在一定成本，可以参考我之前的文章《将 React 应用迁移至 Vite》

四：Gatsby

Gatsby 不仅仅是一个静态网站生成器，它更是一个渐进式 Web 应用生成器。通过 Gatsby 建立的网站，很容易被搜索引擎检索到，而且页面的渲染性能非常好，完美支持个人网站、博客、文档网站，甚至是电子商务网站。

创建 gatsby 应用

npm init gatsby

在命令行中选择开发语言，是否使用 CMS、是否支持、md、mdx 等

创建完成后，在命令行运行 npm run dev，打开 http://localhost:8000/ 看下效果

打开 http://localhost:8000/___graphql 运行 graphql 语言查询

比如创建一个博客列表，可以在代码中直接导出一个 graphql 查询语言，然后在函数中使用查询的数据进行渲染。

import * as React from 'react'
import { graphql } from 'gatsby'
import Layout from '../components/layout'
import Seo from '../components/seo'

const BlogPage = ({ data }) => {
  return (
    <Layout pageTitle="My Blog Posts">
      <ul>
        {data.allFile.nodes.map((node) => (
          <li key={node.name}>{node.name}</li>
        ))}
      </ul>
    </Layout>
  )
}

export const query = graphql`
  query {
    allFile {
      nodes {
        name
      }
    }
  }
`

export const Head = () => <Seo title="My Blog Posts" />

export default BlogPage

Gatsby 的优势：

  • ✅ 页面渲染性能优秀
  • ✅ 对 SEO 友好
  • ✅ 对打包文件进行了优化
  • ✅ 轻松部署到 CDN（基于出色的扩展功能）
  • ✅ 丰富的插件系统

Gatsby 的劣势：

  • ⛔️ 使用起来相较于 CRA 更为复杂
  • ⛔️ 需要了解 GraphQL 和 Node.Js 的相关知识
  • ⛔️ 配置繁重
  • ⛔️ 构建时间会随着内容的增加而变长
  • ⛔️ 云服务需要付费

值得强调的是，丰富的插件系统是选择 Gatsby 的重要原因，比如 Gatsby 提供许多博客主题插件，其他例如谷歌分析、图片压缩、预加载插件等等。

五：Next.js

Next.js 是一个基于 React 的服务端渲染框架，它提供了约定式路由、多种渲染方式、静态导出等功能。

渲染方式

  • CSR - 客户端渲染。也就是我们常说的 SPA（single page application），使用 useEffect 获取接口数据。
  • SSR - 服务器端渲染
  • SSG - 静态站点生成。
  • ISR – 增量静态再生，可以再次从 API 获取数据，并且生成静态页面，最适合常见的资讯类、新闻类网站。
  • Server component- 也是 SSR 的一种， 但互补了 SSR 的不足，让网页拥有流式渲染的能力。

创建 Next.js 应用

npx create-next-app@latest --ts

在项目中，您可以编写 react 组件，并使用 Next.js 提供的 API 进行路由配置、服务端渲染等操作。例如，您可以在 pages 目录下创建一个 index.js 文件，用于编写组件：

import React from 'react';

function Home() {
  return (
    <div>
      <h1>Hello, Next.js!</h1>
    </div>
  );
}

export default Home;

这样，您就可以在项目中使用 Next.js 实现服务端渲染和组件开发了。更多关于 Next.js 的用法，请参考官方文档，也可以参考我的 《Next.js 全栈开发实战》 专栏

优点：

  • 提供了服务端渲染，可以提升首屏加载速度。例如，在 Next.js 中，可以使用 getServerSideProps 方法获取数据，并在服务端渲染页面，提升首屏加载速度。
  • 支持静态导出，可以提升 SEO。例如，在 Next.js 中，可以使用 next export 命令，将项目打包为静态文件，并发布到 CDN 上，让搜索引擎更容易抓取页面。
  • 提供了代码拆分、路由约定等优化方案，可以提升应用的加载速度和运行效率。例如，在 Next.js 中，可以使用 dynamic 导入组件，实现代码拆分；
  • 可以使用 next/link 组件，实现客户端路由跳转，提升用户体验等。

六：UmiJS

Umi 作为一个可扩展的企业级前端应用框架，在蚂蚁集团内部已经已直接或间接地服务了 10000+ 应用，它提供了路由、状态管理、插件体系等功能。

创建 umi 应用

如果要快速上手 umijs，可以使用它提供的脚手架工具 create-umi

npx create-umi@latest

在创建过程中，会提示选择模板，选择「Simple App」模板即可。创建完成后，进入项目目录，安装依赖：

image.png

也可以选择 ant design pro 模板和 vue 模板，选择完成后会自动安装依赖。

最后，启动项目：

cd my-project
npm start

image.png

这样，您的第一个 umijs 项目就创建完成了，可以在浏览器中访问 http://localhost:8000 查看效果。

未命名4.png

在项目中，您可以编写 react 组件，例如，您可以在 src/pages 目录下创建一个 Home.js 文件.

import React from 'react'

function Home() {
  return (
    <div>
      <h1>Hello, umijs!</h1>
    </div>
  )
}

export default Home

创建完成后就可以直接生成路由，访问 http://localhost:8000/home页面。这样，您就可以在项目中使用 umijs 实现路由配置和组件开发了。更多关于 umijs 的用法，请参考它的文档

优点：

  • 提供了丰富的插件，可以快速搭建应用。例如，Qiankun 微前端插件， 插件可以帮助开发者快速创建微前端应用；dva 插件可以帮助开发者解决状态管理；国际化插件可以帮助开发者实现多语言支持等。
  • 支持路由约定，可以让开发者专注于业务逻辑。例如，在 umijs 中，/src/pages 目录下的文件会自动生成路由，无需手动配置。
  • 提供了按需加载、代码拆分等优化方案，可以提升应用的加载速度和运行效率。

七：在线开发

或许你疲倦了 cli 创建 react 应用的方式，因为有时候，只想演示一个简单应用示例，那么 https://stackblitz.com/ 和 https://codesandbox.io/ 这 2 个网站可以快速你创建应用。

若以上两个网站访问速度较慢，那么掘金的码上掘金也可以帮助你创建在线 React 示例应用。

以 StackBlitz 为例

StackBlitz 是一个在线的开发环境，它可以帮助开发者快速创建、运行和分享前端项目, 并且支持协作开发。

StackBlitz 支持多种前端框架，如 React、Angular、Vue、Next.js、Nodejs 等，并提供了自动构建、热更新、代码预览等功能。

例如创建一个 React 项目：

  1. 打开 StackBlitz 网站，并点击右上角的新建按钮。
  2. 在弹出的新建项目对话框中，选择 React 模板，并输入项目名称，点击确定按钮。
  3. StackBlitz 会自动创建一个新的 React 项目，并打开编辑器界面。
  4. 在编辑器中，可以编辑代码，并预览效果。
  5. 在编辑器中，也可以管理项目的文件，并保存项目的修改。

使用 StackBlitz，开发者无需安装任何软件，即可在线创建、编辑和分享项目，方便快捷。

StackBlitz

StackBlitz 中的 React 项目也是使用了 react-scripts 只不过是把 Node 运行在浏览器里面，感兴趣的同学可以看下 WebContainer 介绍

小结

我们可以轻松使用 cli 来创建前端应用， 这样开发者可以更加专注业务开发， 以上便是创建 react 应用的常见 7 种方式，当然还有其他方案，无论使用哪种方式创建 React 项目，都需要了解 Node.js 和底层技术的使用，并且需要了解 React 的基本概念，才能正确使用，您使用哪种方式呢？欢迎在评论区留言。

本文正在参加「金石计划 . 瓜分 6 万现金大奖」

runjs-cool
关注微信公众号，获取最新原创文章（首发）View on GitHub