Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(cn): translate content/docs/create-a-new-react-app.md into Chinese #104

Merged
merged 4 commits into from Mar 18, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 41 additions & 41 deletions content/docs/create-a-new-react-app.md
Original file line number Diff line number Diff line change
@@ -1,94 +1,94 @@
---
id: create-a-new-react-app
title: Create a New React App
title: 创建新的 React 应用
permalink: docs/create-a-new-react-app.html
redirect_from:
- "docs/add-react-to-a-new-app.html"
prev: add-react-to-a-website.html
next: cdn-links.html
---

Use an integrated toolchain for the best user and developer experience.
使用集成的工具链,以实现最佳的用户和开发人员体验。

This page describes a few popular React toolchains which help with tasks like:
本页将介绍一些流行的 React 工具链,它们有助于完成如下任务:

* Scaling to many files and components.
* Using third-party libraries from npm.
* Detecting common mistakes early.
* Live-editing CSS and JS in development.
* Optimizing the output for production.
* 扩展文件和组件的规模。
* 使用来自 npm 的第三方库。
* 尽早发现常见错误。
* 在开发中实时编辑 CSS JS
* 优化生产输出。

The toolchains recommended on this page **don't require configuration to get started**.
本页推荐的工具链**无需配置即可开始使用**。

## You Might Not Need a Toolchain {#you-might-not-need-a-toolchain}
## 你可能不需要工具链 {#you-might-not-need-a-toolchain}

If you don't experience the problems described above or don't feel comfortable using JavaScript tools yet, consider [adding React as a plain `<script>` tag on an HTML page](/docs/add-react-to-a-website.html), optionally [with JSX](/docs/add-react-to-a-website.html#optional-try-react-with-jsx).
如果你没有碰到上述的问题,或者还不习惯使用 JavaScript 工具,可以考虑[把 React 作为普通的 `<script>` 标记添加到 HTML 页面上](/docs/add-react-to-a-website.html),以及[使用可选的 JSX](/docs/add-react-to-a-website.html#optional-try-react-with-jsx)

This is also **the easiest way to integrate React into an existing website.** You can always add a larger toolchain if you find it helpful!
这也是**将 React 集成到现有网站最简单的方式**。如果你认为更大的工具链有所帮助,可以随时添加!

## Recommended Toolchains {#recommended-toolchains}
## 推荐的工具链 {#recommended-toolchains}

The React team primarily recommends these solutions:
React 团队主要推荐这些解决方案:

- If you're **learning React** or **creating a new [single-page](/docs/glossary.html#single-page-application) app,** use [Create React App](#create-react-app).
- If you're building a **server-rendered website with Node.js,** try [Next.js](#nextjs).
- If you're building a **static content-oriented website,** try [Gatsby](#gatsby).
- If you're building a **component library** or **integrating with an existing codebase**, try [More Flexible Toolchains](#more-flexible-toolchains).
- 如果你是在**学习 React** 或**创建一个新的[单页](/docs/glossary.html#single-page-application)应用**,请使用 [Create React App](#create-react-app)
- 如果你是在**用 Node.js 构建服务端渲染的网站**,试试 [Next.js](#nextjs)
- 如果你是在构建**面向内容的静态网站**,试试 [Gatsby](#gatsby)
- 如果你是在打造**组件库**或**将 React 集成到现有代码仓库**,尝试[更灵活的工具链](#more-flexible-toolchains)

### Create React App {#create-react-app}

[Create React App](https://github.com/facebookincubator/create-react-app) is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React.
[Create React App](https://github.com/facebookincubator/create-react-app) 是一个用于**学习 React** 的舒适环境,也是用 React 创建**新的[单页](/docs/glossary.html#single-page-application)应用**的最佳方式。

It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 and npm >= 5.2 on your machine. To create a project, run:
它会配置你的开发环境,以便使你能够使用最新的 JavaScript 特性,提供良好的开发体验,并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 6 npm >= 5.2。要创建项目,请执行:

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

>Note
> 注意
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里需要空格吗?我也不太了解,可以统一一下,但是问题不大。

>
>`npx` on the first line is not a typo -- it's a [package runner tool that comes with npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).
> 第一行的 `npx` 不是拼写错误 —— 它是 [npm 5.2+ 附带的 package 运行工具](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b)

Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses [Babel](https://babeljs.io/) and [webpack](https://webpack.js.org/), but you don't need to know anything about them.
Create React App 不会处理后端逻辑或操纵数据库;它只是创建一个前端构建流水线(build pipeline),所以你可以使用它来配合任何你想使用的后端。它在内部使用 [Babel](https://babeljs.io/) [webpack](https://webpack.js.org/),但你无需了解它们的任何细节。

When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents).
当你准备好部署到生产环境时,执行 `npm run build` 会在 `build` 文件夹内生成你的应用的优化版本。你能[从它的 README](https://github.com/facebookincubator/create-react-app#create-react-app--) 和[用户指南](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents)了解 Create React App 的更多信息。

### Next.js {#nextjs}

[Next.js](https://nextjs.org/) is a popular and lightweight framework for **static and server‑rendered applications** built with React. It includes **styling and routing solutions** out of the box, and assumes that you're using [Node.js](https://nodejs.org/) as the server environment.
[Next.js](https://nextjs.org/) 是一个流行的、轻量级的框架,用于配合 React 打造**静态化和服务端渲染应用**。它包括开箱即用的**样式和路由方案**,并且假定你使用 [Node.js](https://nodejs.org/) 作为服务器环境。

Learn Next.js from [its official guide](https://nextjs.org/learn/).
从 [Next.js 的官方指南](https://nextjs.org/learn/)了解更多。

### Gatsby {#gatsby}

[Gatsby](https://www.gatsbyjs.org/) is the best way to create **static websites** with React. It lets you use React components, but outputs pre-rendered HTML and CSS to guarantee the fastest load time.
[Gatsby](https://www.gatsbyjs.org/) 是用 React 创建**静态网站**的最佳方式。它让你能使用 React 组件,但输出预渲染的 HTML CSS 以保证最快的加载速度。

Learn Gatsby from [its official guide](https://www.gatsbyjs.org/docs/) and a [gallery of starter kits](https://www.gatsbyjs.org/docs/gatsby-starters/).
Gatsby 的[官方指南](https://www.gatsbyjs.org/docs/)和[入门示例集](https://www.gatsbyjs.org/docs/gatsby-starters/)了解更多。

### More Flexible Toolchains {#more-flexible-toolchains}
### 更灵活的工具链 {#more-flexible-toolchains}

The following toolchains offer more flexiblity and choice. We recommend them to more experienced users:
以下工具链提供更多的灵活性和选择。我们把它们推荐给更有经验的使用者:

- **[Neutrino](https://neutrinojs.org/)** combines the power of [webpack](https://webpack.js.org/) with the simplicity of presets, and includes a preset for [React apps](https://neutrinojs.org/packages/react/) and [React components](https://neutrinojs.org/packages/react-components/).
- **[Neutrino](https://neutrinojs.org/)** [webpack](https://webpack.js.org/) 的强大功能和简单预设结合在一起。并且包括了 [React 应用](https://neutrinojs.org/packages/react/)[React 组件](https://neutrinojs.org/packages/react-components/)的预设。

- **[nwb](https://github.com/insin/nwb)** is particularly great for [publishing React components for npm](https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb). It [can be used](https://github.com/insin/nwb/blob/master/docs/guides/ReactApps.md#developing-react-apps-with-nwb) for creating React apps, too.
- **[nwb](https://github.com/insin/nwb)** 特别适合于[将 React 组件发布到 npm](https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb)。它也[能用于](https://github.com/insin/nwb/blob/master/docs/guides/ReactApps.md#developing-react-apps-with-nwb)创造 React 应用。

- **[Parcel](https://parceljs.org/)** is a fast, zero configuration web application bundler that [works with React](https://parceljs.org/recipes.html#react).
- **[Parcel](https://parceljs.org/)** 是一个快速的、零配置的网页应用打包器,并且可以[搭配 React 一起工作](https://parceljs.org/recipes.html#react)

- **[Razzle](https://github.com/jaredpalmer/razzle)** is a server-rendering framework that doesn't require any configuration, but offers more flexibility than Next.js.
- **[Razzle](https://github.com/jaredpalmer/razzle)** 是一个无需配置的服务端渲染框架,但它提供了比 Next.js 更多的灵活性。

## Creating a Toolchain from Scratch {#creating-a-toolchain-from-scratch}
## 从头开始打造工具链 {#creating-a-toolchain-from-scratch}

A JavaScript build toolchain typically consists of:
一组 JavaScript 构建工具链通常由这些组成:

* A **package manager**, such as [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/). It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
* 一个 **package 管理器**,比如 [Yarn](https://yarnpkg.com/) [npm](https://www.npmjs.com/)。它能让你充分利用庞大的第三方 package 的生态系统,并且轻松地安装或更新它们。

* A **bundler**, such as [webpack](https://webpack.js.org/) or [Parcel](https://parceljs.org/). It lets you write modular code and bundle it together into small packages to optimize load time.
* 一个**打包器**,比如 [webpack](https://webpack.js.org/) [Parcel](https://parceljs.org/)。它能让你编写模块化代码,并将它们组合在一起成为小的 package,以优化加载时间。

* A **compiler** such as [Babel](https://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers.
* 一个**编译器**,例如 [Babel](https://babeljs.io/)。它能让你编写的新版本 JavaScript 代码,在旧版浏览器中依然能够工作。

If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality.
如果你倾向于从头开始打造你自己的 JavaScript 工具链,可以[查看这个指南](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658),它重新创建了一些 Create React App 的功能。

Don't forget to ensure your custom toolchain [is correctly set up for production](/docs/optimizing-performance.html#use-the-production-build).
别忘了确保你自定义的工具链[针对生产环境进行了正确配置](/docs/optimizing-performance.html#use-the-production-build)
2 changes: 1 addition & 1 deletion content/docs/nav.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
- id: add-react-to-a-website
title: 在网站中添加 React
- id: create-a-new-react-app
title: 创建新的 React App
title: 创建新的 React 应用
- id: cdn-links
title: CDN 链接
- title: 核心概念
Expand Down