创建 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 会通过使用多个 标签的形式自动把 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 Applicationtitle>
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 (
Hello, Next.js!
);
}
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」模板即可。创建完成后，进入项目目录，安装依赖：
也可以选择 ant design pro 模板和 vue 模板，选择完成后会自动安装依赖。
最后，启动项目：
cd my-project
npm start
这样，您的第一个 umijs 项目就创建完成了，可以在浏览器中访问 http://localhost:8000 查看效果。
在项目中，您可以编写 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 项目：
- 打开 StackBlitz 网站，并点击右上角的新建按钮。
- 在弹出的新建项目对话框中，选择 React 模板，并输入项目名称，点击确定按钮。
- StackBlitz 会自动创建一个新的 React 项目，并打开编辑器界面。
- 在编辑器中，可以编辑代码，并预览效果。
- 在编辑器中，也可以管理项目的文件，并保存项目的修改。
使用 StackBlitz，开发者无需安装任何软件，即可在线创建、编辑和分享项目，方便快捷。
StackBlitz 中的 React 项目也是使用了 react-scripts 只不过是把 Node 运行在浏览器里面，感兴趣的同学可以看下 WebContainer 介绍
小结
我们可以轻松使用 cli 来创建前端应用， 这样开发者可以更加专注业务开发， 以上便是创建 react 应用的常见 7 种方式，当然还有其他方案，无论使用哪种方式创建 React 项目，都需要了解 Node.js 和底层技术的使用，并且需要了解 React 的基本概念，才能正确使用，您使用哪种方式呢？欢迎在评论区留言。
本文正在参加「金石计划 . 瓜分 6 万现金大奖」
