Skip to content

Commit 9d76977

Browse files
seognilQC-L
authored andcommitted
docs(cn): translate content/docs/create-a-new-react-app.md into Chinese (reactjs#104)
1 parent a073aab commit 9d76977

File tree

2 files changed

+42
-42
lines changed

2 files changed

+42
-42
lines changed
+41-41
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,94 @@
11
---
22
id: create-a-new-react-app
3-
title: Create a New React App
3+
title: 创建新的 React 应用
44
permalink: docs/create-a-new-react-app.html
55
redirect_from:
66
- "docs/add-react-to-a-new-app.html"
77
prev: add-react-to-a-website.html
88
next: cdn-links.html
99
---
1010

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

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

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

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

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

25-
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).
25+
如果你没有碰到上述的问题,或者还不习惯使用 JavaScript 工具,可以考虑[ React 作为普通的 `<script>` 标记添加到 HTML 页面上](/docs/add-react-to-a-website.html),以及[使用可选的 JSX](/docs/add-react-to-a-website.html#optional-try-react-with-jsx)
2626

27-
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!
27+
这也是**React 集成到现有网站最简单的方式**。如果你认为更大的工具链有所帮助,可以随时添加!
2828

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

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

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

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

40-
[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.
40+
[Create React App](https://github.com/facebookincubator/create-react-app) 是一个用于**学习 React** 的舒适环境,也是用 React 创建**新的[单页](/docs/glossary.html#single-page-application)应用**的最佳方式。
4141

42-
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:
42+
它会配置你的开发环境,以便使你能够使用最新的 JavaScript 特性,提供良好的开发体验,并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 6 npm >= 5.2。要创建项目,请执行:
4343

4444
```bash
4545
npx create-react-app my-app
4646
cd my-app
4747
npm start
4848
```
4949

50-
>Note
50+
> 注意
5151
>
52-
>`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).
52+
> 第一行的 `npx` 不是拼写错误 —— 它是 [npm 5.2+ 附带的 package 运行工具](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b)
5353
54-
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.
54+
Create React App 不会处理后端逻辑或操纵数据库;它只是创建一个前端构建流水线(build pipeline),所以你可以使用它来配合任何你想使用的后端。它在内部使用 [Babel](https://babeljs.io/) [webpack](https://webpack.js.org/),但你无需了解它们的任何细节。
5555

56-
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).
56+
当你准备好部署到生产环境时,执行 `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 的更多信息。
5757

5858
### Next.js {#nextjs}
5959

60-
[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.
60+
[Next.js](https://nextjs.org/) 是一个流行的、轻量级的框架,用于配合 React 打造**静态化和服务端渲染应用**。它包括开箱即用的**样式和路由方案**,并且假定你使用 [Node.js](https://nodejs.org/) 作为服务器环境。
6161

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

6464
### Gatsby {#gatsby}
6565

66-
[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.
66+
[Gatsby](https://www.gatsbyjs.org/) 是用 React 创建**静态网站**的最佳方式。它让你能使用 React 组件,但输出预渲染的 HTML CSS 以保证最快的加载速度。
6767

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

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

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

74-
- **[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/).
74+
- **[Neutrino](https://neutrinojs.org/)** [webpack](https://webpack.js.org/) 的强大功能和简单预设结合在一起。并且包括了 [React 应用](https://neutrinojs.org/packages/react/)[React 组件](https://neutrinojs.org/packages/react-components/)的预设。
7575

76-
- **[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.
76+
- **[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 应用。
7777

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

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

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

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

86-
* 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.
86+
* 一个 **package 管理器**,比如 [Yarn](https://yarnpkg.com/) [npm](https://www.npmjs.com/)。它能让你充分利用庞大的第三方 package 的生态系统,并且轻松地安装或更新它们。
8787

88-
* 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.
88+
* 一个**打包器**,比如 [webpack](https://webpack.js.org/) [Parcel](https://parceljs.org/)。它能让你编写模块化代码,并将它们组合在一起成为小的 package,以优化加载时间。
8989

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

92-
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.
92+
如果你倾向于从头开始打造你自己的 JavaScript 工具链,可以[查看这个指南](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658),它重新创建了一些 Create React App 的功能。
9393

94-
Don't forget to ensure your custom toolchain [is correctly set up for production](/docs/optimizing-performance.html#use-the-production-build).
94+
别忘了确保你自定义的工具链[针对生产环境进行了正确配置](/docs/optimizing-performance.html#use-the-production-build)

content/docs/nav.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
- id: add-react-to-a-website
66
title: 在网站中添加 React
77
- id: create-a-new-react-app
8-
title: 创建新的 React App
8+
title: 创建新的 React 应用
99
- id: cdn-links
1010
title: CDN 链接
1111
- title: 核心概念

0 commit comments

Comments
 (0)