《使用 React 开发新项目》翻译

背景

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

---

原文链接

使用 React 开发新项目

---

译文

创建一个新的 React 应用程序

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

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

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

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

---

您可能不需要工具链

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

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

---

推荐工具链

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

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

Create React App

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

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

npx create-react-app my-app
cd my-app
npm start

Note

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

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

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

Next.js

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

学习Next.js的官方指南。

Gatsby

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

从它的官方指南和入门工具包的画廊学习 Gatsby。

更灵活的工具链

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

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

---

从零开始创建工具链

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

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

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

不要忘记为产品正确地设置自定义的工具链。

---

A little bit of progress every day!Come on!