启动一个新的react项目

如果您要开始一个新项目，我们建议您使用工具链或框架。 这些工具提供了舒适的开发环境，但需要在本地安装 Node.js。

内容预告

• 工具链与框架有何不同
• 如何使用最少的工具链开始一个项目
• 如何使用功能齐全的框架启动项目
• 流行的工具链和框架中包含什么

选择你自己的冒险

React 是一个库，可让您通过将 UI 代码分解为称为组件的部分来组织 UI 代码。 React 不负责路由或数据管理。 这意味着有几种方法可以启动一个新的 React 项目：

• 从一个 HTML 文件和一个脚本标签开始。 这不需要安装Node.js，但提供有限的功能。
• 从一个最小的工具链开始，在你进行的过程中为你的项目添加更多的功能。（非常适合学习！）
• 从一个呆板的框架开始，该框架具有内置的数据获取和路由等通用功能。

以最少的工具链开始

如果您正在学习 React，我们建议您使用 Create React App。 这是尝试 React 和构建新的单页客户端应用程序的最流行方式。 它是为 React 制作的，但对路由或数据获取并不呆板。
首先，安装 Node.js。 然后打开你的终端并运行这一行来创建一个项目：

npx create-react-app my-app

运行

cd my-app
npm start

更多信息，参见官方指南

Create React App 不处理后端逻辑或数据库。 您可以将它与任何后端一起使用。 当你构建一个项目时，你会得到一个包含静态 HTML、CSS 和 JS 的文件夹。 由于 Create React App 无法利用服务器，因此无法提供最佳性能。 如果您正在寻找更快的加载时间和路由和服务器端逻辑等内置功能，我们建议您改用框架。

流行的替代方案

• Vite
• Parcel

使用功能齐全的框架构建

如果你想开始一个生产就绪的项目，Next.js 是一个很好的起点。 Next.js 是一种流行的轻量级框架，适用于使用 React 构建的静态和服务器呈现的应用程序。 它预打包了路由、样式和服务器端渲染等功能，可让您的项目快速启动和运行。

Next.js 基础教程很好地介绍了如何使用 React 和 Next.js 进行构建。

流行的替代方案

• Gatsby
• Remix
• Razzle

自定义工具链

您可能更愿意创建和配置自己的工具链。 工具链通常包括：

• package manager允许您安装、更新和管理第三方包。 流行的包管理器：npm（内置于 Node.js 中）、Yarn、pnpm。
• compiler允许您编译现代语言特性和附加语法，如 JSX 或浏览器的类型注释。 流行的编译器：Babel、TypeScript、swc。
• bundler可让您编写模块化代码并将其捆绑到小包中以优化加载时间。 流行的打包工具：webpack、Parcel、esbuild、swc。
• minifier使您的代码更紧凑，从而加载速度更快。 流行的压缩器：Terser、swc。
• server处理服务器请求，以便您可以将组件呈现为 HTML。 热门服务器：Express。
• linter 检查您的代码是否存在常见错误。 流行的 linters：ESLint。
• test runner让您可以针对您的代码运行测试。 流行的测试跑步者：Jest。

如果您更喜欢从头开始设置自己的 JavaScript 工具链，请查看这个指南，它重新创建了一些 Create React App 功能。 框架通常还会提供路由和数据获取解决方案。 在较大的项目中，您可能还希望使用 Nx 或 Turborepo 等工具在单个存储库中管理多个包。