Skip to content

doc: translate create a new react app #52

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
Apr 20, 2019
Merged

doc: translate create a new react app #52

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
10e10c4
doc: translate create a new react app
fabianlee1211 Apr 19, 2019
472d126
doc: minor changes from review
neighborhood999 Apr 20, 2019
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
View file
Open in desktop
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.
使用綜合的 toolchain 以得到最佳的使用者和開發者體驗。

This page describes a few popular React toolchains which help with tasks like:
本頁將介紹一些受歡迎的 React toolchain，它們有助於以下的工作：

* 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.
* 擴大文件和 component 的規模。
* 使用來至 npm 的第三方函式庫。
* 偵測早期常見的錯誤。
* 實時在開發環境裡編輯 CSS 和 JS。
* 最佳化線上環境輸出。

The toolchains recommended on this page **don't require configuration to get started**.
本頁所建議的 toolchain 都**不需要進行任何設定就能開始使用**。

## You Might Not Need a Toolchain {#you-might-not-need-a-toolchain}
## 你可能不需要 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 的工具，你可以考慮[在 HTML 網頁裡加上 `<script>` 標籤來使用 React](/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 加上到現存網頁裡最簡單的方法**。當你覺得使用大型的 toolchain 對你有幫助，你也可以隨時把它們加入！

## Recommended Toolchains {#recommended-toolchains}
## 推薦的 Toolchain {#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** 或**建立全新的 single-page 應用程式**，請使用 [Create React App](#create-react-app)。
- 如果你正在建立一個**使用 Node.js 的 server-rendered 網頁**，請使用 [Next.js](#nextjs)。
- 如果你正在建立一個**靜態內容的網頁**，請使用 [Gatsby](#gatsby)。
- 如果你正在建立一個 **component 函式庫**或**與現存程式碼倉庫進行接軌**，請使用[更靈活的 Toolchain](#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 建立一個**全新的 [single-page](/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
>提示
>
>`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 並不會處理 backend 邏輯或數據庫；它只會建立一個 frontend build pipeline，以便你配合任何 backend 來使用。基本上，它是使用 [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` 文件夾裡建立一個你的應用程式的最佳化版本，你可以從 Create React App 的 [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)了解更多資訊。

### 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 所建立的**靜態和 server-rendered 的應用程式**。它自身已包括了 **styling 和 routing 的方案**，而且它假設你在使用 [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 component，但會輸出 pre-rendered 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/)和 [starter kit 範例集](https://www.gatsbyjs.org/docs/gatsby-starters/)了解更多。

### More Flexible Toolchains {#more-flexible-toolchains}
### 更靈活的 Toolchain {#more-flexible-toolchains}

The following toolchains offer more flexiblity and choice. We recommend them to more experienced users:
以下的 toolchain 會提供更多的靈活性和選擇。我們推薦給比較有經驗的使用者：

- **[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 component](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 component 發佈到 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/)** 是一個快速、零設定的網路應用程式 bundler，並且[可以配合 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)** 是一個不需要設定的 server-rendering 框架，但它比 Next.js 提供更多的靈活性。

## Creating a Toolchain from Scratch {#creating-a-toolchain-from-scratch}
## 從零開始建立 Toolchain {#creating-a-toolchain-from-scratch}

A JavaScript build toolchain typically consists of:
一個 JavaScript 的建立 toolchain 通常包括：

* 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.
* 一個 **bundler**，例如 [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.
* 一個 **compiler**，例如 [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 toolchain，請[查看這指南](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).
別忘了確保你的自訂 toolchain 有[為線上環境進行正確的設定](/docs/optimizing-performance.html#use-the-production-build)。