本文共 1640 字，大约阅读时间需要 5 分钟。

背景

响应号召！开始学习使用 React 前端开发项目，在同事的帮助下也在浏览器上添加了很多关于 React 学习的书签，这篇译文应该是我的第二篇译文。个人觉得是比较有意义的，于是特地记录一下，也顺便宣告新技术的学习正式开始。

原文链接

译文

创建一个新的 React 应用程序

使用集成的工具链获得最佳的用户和开发人员体验。

这个页面描述了一些常用的 React 工具链，它们可以帮助完成以下任务:

• 扩展到多个文件和组件
• 使用来自npm的第三方库
• 尽早发现常见错误
• 开发中实时编辑 CSS 和 JS
• 优化生产产量

上面提到的推荐的工具链不需要配置就可以启动。

您可能不需要工具链

如果您还没有遇到上面描述的问题，或者还不习惯使用 JavaScript 工具，可以考虑 adding React as a plain <script> tag on an HTML page ，与 JSX 可选。

这也是将 React 整合到现有网站的最简单方法。如果您觉得有帮助，您总是可以添加更大的工具链!

推荐工具链

React 团队主要推荐以下解决方案:

• 如果您正在学习 React 或创建一个新的应用程序，请使用
• 如果您正在使用Node.js构建服务器呈现的网站，试试
• 如果您正在构建一个静态的面向内容的网站，试试
• 如果正在构建组件库或与现有代码库集成，试试

Create React App

是一个舒适的学习 React 的环境，也是在React中创建一个新的应用程序的最佳方式。

它设置了您的开发环境，以便您可以使用最新的JavaScript特性，提供良好的开发人员体验，并优化您的应用程序以用于生产。您的机器上需要支持 Node >= 6和 npm >= 5.2。创建一个项目，使用：

npx create-react-app my-appcd my-appnpm start

Note

第一行的npx不是一个拼写错误 —— 它是npm 5.2+附带的一个包运行器工具。

Create React App不处理后台逻辑和数据库;它只是创建一个前端构建管道，所以您可以将它用于任何您想要的后端。在引擎上，它使用了 和 ，但你不需要知道任何关于它们的东西。

当您准备将其部署到生产环境中时，运行npm run build将在 build 文件夹中创建应用程序的优化构建。你可以从Create React App的和中了解更多信息。

Next.js

是一个流行的轻量级框架，适用于使用React构建的静态和服务器呈现的应用程序。它包括样式化和路由解决方案，并假设您使用 作为服务器环境。

学习Next.js的。

Gatsby

是创建带有React的静态网站的最佳方式。它允许您使用 React 组件，但输出预呈现的 HTML 和 CSS，以确保最快的加载时间。

从它的和学习 Gatsby。

更灵活的工具链

下面的工具链提供了更多的灵活性和选择。我们向更有经验的用户推荐:

• 将
  的强大功能与预置的简单性相结合，并包含一个用于 和 的预置
• 特别适合。它也创建React应用程序
• 是一个 的快速、零配置的web应用程序捆绑器
• 是一个服务器呈现框架，它不需要任何配置，但是比Next.js提供了更多的灵活性

从零开始创建工具链

JavaScript构建工具链通常由以下部分组成：

• 软件包管理器，如 或 。它允许您利用第三方软件包的巨大生态系统，并轻松地安装或更新它们
• 模块化打包器，如 或 它允许您编写模块化代码并将其打包成小的包，以优化加载时间。
• 编译器，如 。它允许您编写在旧浏览器中仍然有效的最新 JavaScript 代码

如果您喜欢从头开始建立自己的 JavaScript 工具链，请查看以下指南，其中重新创建了Create React 应用程序的一些功能。

不要忘记自定义的工具链。

A little bit of progress every day!Come on!

转载地址：https://imxiaoqi.blog.csdn.net/article/details/88420379 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！