如何快速开始 ReactJS 开发。第一部分：CRA、Next.js 和 Gatsby

该材料最初发布在 Codica Blog 上，作为文章《如何快速开始 ReactJS 开发：3 个可靠的工具和最佳实践》的一部分。

在本文中，我们将讨论一些最著名的现成解决方案，它们将帮助你轻松开始开发 React 应用。此外，我们还将向你展示 React-Redux 项目结构的最佳实践。这将帮助你正确地构建项目模式，并使项目分解清晰易懂。

React 开发工具：CRA、Next.js 和 Gatsby

首先，我们想讨论一下create-react-app (CRA)、Next.js和Gatsby等开源工具。借助它们，您可以立即开始开发 ReactJS 项目，而无需在设置过程上浪费时间，它们提供了基本的结构模板和基本功能。这样，您将能够快速流畅地启动项目。此外，当然，您还可以根据需要更改应用程序结构配置。

现在让我们概述并比较这些工具，讨论它们的优缺点、具体属性和主要区别。

加拿大税务局

Create-react-app (CRA) 是由 Facebook 设计的一款工具。该解决方案可帮助您快速入门开发 ReactJS 应用程序。它通过创建可维护且易于使用的 React App 脚手架，让您避免耗时的配置过程。该工具会安装所有默认依赖项和软件包，并生成默认目录结构。

要安装该工具并开始开发 React 应用程序，请运行以下命令行：

npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

相关阅读：4 个实用的 Git 命令，让你的生活更轻松

Next.js

简而言之，Next.js是一个轻量级框架，可让您轻松创建服务器渲染的静态 React.js 应用程序。您需要一个服务器来运行项目，它会在运行时生成 HTML。这意味着每次收到新请求时，它都会从服务器生成一个新的 HTML 页面。

为了更好地理解，请详细了解 Next.js 工作流程：

以下是该框架的核心功能：

• 服务器端渲染；
• 静态文件创建；
• 自动代码分割；
• 预取；
• 热模块替换和错误报告。

要安装该工具并开始使用 Next.js 开发 React 应用程序，请运行以下命令行：

npm install --save next react react-dom

然后将脚本添加到你的 package.json 中：

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

最后运行以下命令：

npm run dev

盖茨比

Create-react-app 提供客户端渲染，Next.js 提供服务器端渲染，但Gatsby是一个开源框架，指的是速度极快的静态站点生成器。

如果您不熟悉静态网站生成，我们来讨论一下它的工作原理。静态端生成器是指在“构建”阶段生成 HTML 代码的生成器。实际上，它可以通过从某些 API、Markdown 文件等获取数据来执行。

您可以通过以下方式轻松开始使用 Gatsby 开发 ReactJS 应用程序：

npm install -g gatsby-cli
gatsby new gatsby-site
cd gatsby-site
gatsby develop

CRA 与 Next.js 与 Gatsby：简要比较

为了概括所讨论的开源解决方案的所有方面，让我们看一个简短的比较表。

您可能感兴趣：CSS 处理器在 Web 应用程序开发中的强大功能

最后的话

如果您想跳过耗时的设置过程并快速开始开发 React 应用程序，请使用 CRA、Next.js 和 Gatsby 等丰富的开源工具。这些解决方案旨在帮助您自动安装所有默认依赖项和软件包，从而以正确的方式构建您的项目。

在下一部分中，我们将通过专家提供的代码示例为您提供有关 React-Redux 项目结构的最佳实践。

请继续关注并阅读我们的完整文章：如何快速开始 ReactJS 开发：3 个可靠的工具和最佳实践。