Logo

菜单

发布于 2026-01-06 7 阅读
0

如何在 2024 年启动和设置 React 项目（基于用例的 7 种不同方法）

如何在 2024 年启动和设置 React 项目（基于用例的 7 种不同方法）

本文是devaradise.com 网站上原文的摘要版本。

作为一款库，React 并没有提供创建 React 应用的内置配置方案。它让我们自行决定如何搭建 React 应用。因此，新手开发者常常对如何搭建项目感到困惑。

本文将介绍三个使用场景。您可以直接跳转到与您的项目相关的场景。

构建单页应用程序/客户端渲染应用程序

单页应用程序完全在客户端运行。有时也称为客户端应用程序。它最适合用于以下类型的 Web 应用程序：

  1. 内部仪表盘应用程序
  2. 一个不重视搜索引擎优化的网站
  3. 需要实时数据更新的Web应用程序（例如股票应用程序、聊天/消息应用程序等）

1. 使用 Vite 进行 React

Vite 目前是打包前端应用的最佳构建工具。它速度如此之快，是因为底层使用了esbuild 。在我用过的所有开发工具中，Vite 的热重载速度也是最快的。

如何使用 Vite 开始 React

以下命令可用于启动和设置带有 Vite 的 React 应用：

# npm 7+, extra double-dash is needed:
npm create vite@latest my-react-app -- --template react-ts

# yarn
yarn create vite my-react-app --template react-ts

# pnpm
pnpm create vite my-react-app --template react-ts
Enter fullscreen mode Exit fullscreen mode

以上命令会在my-react-app文件夹中生成一个支持 TypeScript 的 React 项目（我建议使用 TypeScript）。但是，如果您想移除 TypeScript 支持，请进行相应react-ts更改react。

您可以查看其他库的所有create-vite 模板。您也可以访问 vite 的文档网站了解更多信息。

React with Vite 优势

  • 速度非常快，重量也很轻。
  • 旨在优先考虑SPA/CSR应用
  • 不带偏见的
  • 良好的社区支持
  • 易于学习

React with Vite 的缺点

  • 没有现成的框架，所以你需要自行搭建项目结构和配置库。
  • 对SSR的支持力度不足

2. 创建 React 应用

在 Vite 流行之前，Create React App 是启动 React 项目最常用的方法，几乎​​是当时搭建 React 应用的默认方式。

如何使用 CRA 启动 React 应用

以下命令可用于启动和设置带有 CRA 的 React 应用：

# npx, comes in npm 5.2+
npx create-react-app my-react-app

# npm, available in npm 6+
npm init react-app my-react-app

# yarn, available in Yarn 0.25+
yarn create react-app my-react-app
Enter fullscreen mode Exit fullscreen mode

要支持 TypeScript，只需--template typescript在文件夹名称后添加即可。

npx create-react-app my-react-app --template typescript
Enter fullscreen mode Exit fullscreen mode

您可以访问 Create-React-App 的文档网站了解更多信息。

利用 CRA 优势做出反应

  • 稳定且庞大的社区支持
  • 旨在优先考虑SPA/CSR应用
  • 易于学习

应对 CRA 的缺点

  • 建造速度较慢
  • 没有预置框架，所以你需要自行搭建项目结构和配置库。
  • 不支持SSR

构建全栈网站

采用服务器端渲染 (SSR) 的全栈网站最适合构建中大型网站应用程序，例如：

  1. 电子商务网站
  2. 订阅制网站
  3. 大型多用户网站
  4. SaaS网站
  5. 渐进式 Web 应用程序 (PWA)

1. Next.js

Next.js 是一个基于 React.js 构建的 JavaScript 框架，用于构建全栈 Web 应用程序。Next.js 负责处理应用程序路由、组件渲染、会话管理和数据获取，让您可以专注于使用 React 创建组件。

如何使用 Next.js 启动 React 项目

您可以使用以下命令启动 Next.js 项目：

npx create-next-app@latest
Enter fullscreen mode Exit fullscreen mode

运行此命令后，系统会提示一些有关项目选项的问题。

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*
Enter fullscreen mode Exit fullscreen mode

Next.js 会自动设置项目结构和一些库。您可以在其文档网站上了解更多信息。

Next.js 的优势

  • 表现优异
  • 零配置
  • 自动代码分割
  • 加快初创公司产品上市速度
  • 同时支持SSR和SSG
  • 非常适合搜索引擎优化
  • 强大的社区支持

Next.js 的缺点

  • 自以为是
  • 陡峭的学习曲线
  • SSR 复杂性可能会导致开销

2. 混音

Remix 构建于React Router之上，React Router 是自 React 早期以来最流行的 React 路由库。Remix 还使用 Vite 作为开发服务器，使其速度更快，对开发者更友好。

如何使用 Remix 启动 React 项目

您可以使用包含所有必要组件的项目来安装 Remix。

npx create-remix@latest
Enter fullscreen mode Exit fullscreen mode

但如果您还在学习阶段，建议手动安装，这样您才能了解构成 Remix 项目的每个库。

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

# install runtime dependencies
npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom

# install dev dependencies
npm i -D @remix-run/dev vite
Enter fullscreen mode Exit fullscreen mode

您可以在 Remix的文档网站上了解更多信息。

混音优势

  • 快速且性能卓越
  • 高级路线管理
  • 非常适合搜索引擎优化
  • 对开发者友好（有人说比 Next.js 更好）
  • 学习曲线相对平缓

混音的缺点

  • 知名度较低，因此社区支持也较少。
  • 仅限SSR

构建内容型网站

我们将要讨论的这些框架最适合用于构建以下类型的网站：

  • 博客
  • 作品集网站
  • 公司简介
  • 着陆页/营销网站
  • 文档

1. 天文

Astro 首创并推广了一种名为Islands 架构的前端架构。这种架构能够自动从页面中移除所有未使用和非必要的 JavaScript 代码，从而使 Astro 能够构建轻量级且快速的网页。

如何启动 Astro + React 项目

您可以使用以下命令创建一个新的 Astro 项目：

# create a new project with npm
npm create astro@latest

# then add react integration
npx astro add react
Enter fullscreen mode Exit fullscreen mode

它会提示您进行一些项目配置。

您也可以使用模板创建 Astro 项目。Astro 社区提供了博客、作品集、文档和落地页等常见项目的模板。

# create a new project with an official example
npm create astro@latest -- --template <example-name>

# create a new project based on a GitHub repository’s main branch
npm create astro@latest -- --template <github-username>/<github-repo>
Enter fullscreen mode Exit fullscreen mode

您可以在主题页面浏览天文模板，或在 Github 中搜索。

星象优势

  • 闪电般的速度
  • 非常适合搜索引擎优化
  • 功能齐全，且灵活
  • 学习曲线平缓
  • 与框架无关

天文缺点

  • 由于本质上不使用 JavaScript，因此交互性较低。
  • 社区支持尚不成熟

2. 了不起的盖茨比

Gatsby是静态网站生成器框架的先驱之一。它基于React构建，并且至今仍被React官方文档推荐用于构建基于内容的React应用程序。

如何使用 Gatsby 启动 React 项目

您只需一条命令即可创建 Gatsby 项目：

npm init gatsby
Enter fullscreen mode Exit fullscreen mode

它会提示您定义项目名称、描述、首选语言（JS 或 TS）、CMS、样式工具和其他附加功能。

您还可以从入门模板创建 Fatsby 项目。

npx gatsby new starter-template-name <starter-template-github-repo>
Enter fullscreen mode Exit fullscreen mode

您可以从 Gatsby的官方文档中了解更多信息。

Gatsby 的优势

  • 快速地
  • 搜索引擎友好
  • 庞大的社区支持
  • 丰富的插件和入门指南
  • 通过 GraphQL、Markdown 和 REST API 实现丰富的数据集成

盖茨比的缺点

  • 人气下降
  • 学习曲线相当高

3. 纪录片

Docusaurus 是一个基于 React 构建的静态网站生成器，可以快速构建功能齐全的文档网站。它专为构建静态文档网站而设计。但实际上，您也可以使用 Docusaurus 构建博客和作品集网站。

如何使用 Docusaurus 启动 React 项目

您可以使用以下命令创建 Docusaurus 项目

npx create-docusaurus@latest my-docusaurus-app classic --typescript
Enter fullscreen mode Exit fullscreen mode

您可以根据--typescript需要移除 TypeScript 支持。classic这是一个推荐的 Docusaurus 入门模板。

请在官方文档中了解更多关于 Docusaurus 的信息。

Docusaurus 的优势

  • 功能齐全，适用于文档和博客网站
  • 强大的社区支持
  • 灵活且可定制

Docusaurus的缺点

  • 过于具体的用例
  • CMS/内容编辑选项较少，因为它只支持 Markdown。

结论

以上所有框架都是为不同的使用场景而设计的。因此，在选择框架之前，最好先了解你的项目使用场景。不要因为大家都用就选择某个框架，而要因为你需要它而选择它😁

你还有其他 React 配置可以分享吗？
如果有的话，请在下方评论区留言告诉我哦😄

文章来源：https://dev.to/syakirurahman/how-to-start-setup-a-react-project-in-2024-7- Different-ways-based-on-use-cases-8b6
将您的数据库转换为带身份验证的 M...
CSS 优先级和 !importa...