Skip to content

Translate Сreate a New React App #242

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

Merged
merged 57 commits into from
Mar 13, 2019
Merged
Changes from all commits
Commits
Show all changes
57 commits
Select commit Hold shift + click to select a range
e102d28
Add translation
Mar 7, 2019
df7c9da
Update create-a-new-react-app.md
ChernikAnton Mar 7, 2019
894837e
Update create-a-new-react-app.md
ChernikAnton Mar 7, 2019
34dd775
Update create-a-new-react-app.md
ChernikAnton Mar 7, 2019
a898e54
Update create-a-new-react-app.md
ChernikAnton Mar 7, 2019
631198b
Update create-a-new-react-app.md
ChernikAnton Mar 8, 2019
9ae9d4e
Update content/docs/create-a-new-react-app.md
angryermine Mar 11, 2019
faaad93
Update content/docs/create-a-new-react-app.md
angryermine Mar 11, 2019
f279e85
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
d839fff
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
6b33dd8
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
250b828
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
994b828
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
4369f56
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
baa01cf
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
1b92273
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
06e5a5e
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
a61abbe
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
8f1a08b
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
3955f91
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
a7a5cc0
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
e8482ed
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
eaa21a6
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
b126a80
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
c2f5363
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
e00ce98
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
22190f6
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
92670c2
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
0f9a8a0
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
a530ad7
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
3707560
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
8c6f340
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
6178046
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
b26dd18
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
cbe6218
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
a0d622d
Update content/docs/create-a-new-react-app.md
ntishkevich Mar 11, 2019
c95aeec
Update content/docs/create-a-new-react-app.md
gcor Mar 12, 2019
3891b5e
Update content/docs/create-a-new-react-app.md
gcor Mar 12, 2019
23164ee
Update content/docs/create-a-new-react-app.md
gcor Mar 12, 2019
3788f99
Update content/docs/create-a-new-react-app.md
gcor Mar 12, 2019
5ca3dd4
Update content/docs/create-a-new-react-app.md
gcor Mar 12, 2019
bc65e2b
Update content/docs/create-a-new-react-app.md
gcor Mar 12, 2019
c20563c
Update content/docs/create-a-new-react-app.md
gcor Mar 12, 2019
c9d28c3
Update content/docs/create-a-new-react-app.md
another-guy Mar 13, 2019
34ff745
Update content/docs/create-a-new-react-app.md
another-guy Mar 13, 2019
792292a
Update content/docs/create-a-new-react-app.md
another-guy Mar 13, 2019
b44b179
Update content/docs/create-a-new-react-app.md
another-guy Mar 13, 2019
4bf1c13
Update content/docs/create-a-new-react-app.md
another-guy Mar 13, 2019
276d3ba
Update content/docs/create-a-new-react-app.md
another-guy Mar 13, 2019
c9e76a6
Update content/docs/create-a-new-react-app.md
another-guy Mar 13, 2019
33be1ed
Update content/docs/create-a-new-react-app.md
another-guy Mar 13, 2019
c88799b
Update content/docs/create-a-new-react-app.md
another-guy Mar 13, 2019
23545dc
Update content/docs/create-a-new-react-app.md
another-guy Mar 13, 2019
1895f45
Update content/docs/create-a-new-react-app.md
another-guy Mar 13, 2019
6782b39
Update content/docs/create-a-new-react-app.md
another-guy Mar 13, 2019
f7197d1
Update content/docs/create-a-new-react-app.md
another-guy Mar 13, 2019
e314247
Update content/docs/create-a-new-react-app.md
another-guy Mar 13, 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
88 changes: 48 additions & 40 deletions content/docs/create-a-new-react-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,87 +8,95 @@ 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}

The React team primarily recommends these solutions:
## Рекомендуемый набор инструментов {#recommended-toolchains}

- 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 в первую очередь рекомендует следующие решения:

- Если вы **изучаете React** или **создаёте новое [одностраничное](/docs/glossary.html#single-page-application) приложение**, используйте [Create React App](#create-react-app).
- Если вы создаете **серверный сайт с Node.js,** попробуйте [Next.js](#nextjs).
- Если вы создаете **статический контент-ориентированный сайт,** попробуйте [Gatsby](#gatsby).
- Если вы создаете **библиотеку компонентов** или **интегрируетесь с существующей кодовой базой**, попробуйте [более гибкие наборы инструментов](#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** и лучший способ начать создание **нового [одностраничного](/docs/glossary.html#single-page-application) приложения** на React.

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.js не ниже версии 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 и выше](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 не обрабатывает бэкенд логику или базы данных, он только предоставляет команды для сборки фронтенда, поэтому вы можете использовать его с любым бэкэндом. «Под капотом» используются [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`. Вы можете узнать больше о Creat 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.

Learn Next.js from [its official guide](https://nextjs.org/learn/).
[Next.js](https://nextjs.org/) – это популярный легковесный фреймворк для **статических и серверных приложений**, использующих React. Он включает в себя **готовые решения для стилизации и маршрутизации** и предполагает, что вы используете [Node.js](https://nodejs.org/) в качестве серверной среды.

Узнайте больше о 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, чтобы гарантировать минимальное время загрузки.

Узнайте больше о Gatsby из [его официального руководства](https://www.gatsbyjs.org/docs/) и [галереи стартовых комплектов](https://www.gatsbyjs.org/docs/gatsby-starters/).

### Более гибкие наборы инструментов {#more-flexible-toolchains}
Следующие наборы инструментов предлагают больше гибкости и выбора. Мы рекомендуем их более опытным разработчикам:


- **[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)** хорошо подходит для [публикации 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-приложений.

Learn Gatsby from [its official guide](https://www.gatsbyjs.org/docs/) and a [gallery of starter kits](https://www.gatsbyjs.org/docs/gatsby-starters/).
- **[Parcel](https://parceljs.org/)** – быстрый упаковщик веб-приложений с нулевой конфигурацией, [который работает с React](https://parceljs.org/recipes.html#react).

### More Flexible Toolchains {#more-flexible-toolchains}

The following toolchains offer more flexiblity and choice. We recommend them to more experienced users:
- **[Razzle](https://github.com/jaredpalmer/razzle)** – это фреймворк для серверного рендеринга, более гибкий чем Next.js, но не требующий обязательной настройки.

- **[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/).

- **[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.
## Создание набора инструментов с нуля {#creating-a-toolchain-from-scratch}

- **[Parcel](https://parceljs.org/)** is a fast, zero configuration web application bundler that [works with React](https://parceljs.org/recipes.html#react).
В набор инструментов для сборки JavaScript обычно входят:

- **[Razzle](https://github.com/jaredpalmer/razzle)** is a server-rendering framework that doesn't require any configuration, but offers more flexibility than Next.js.

## Creating a Toolchain from Scratch {#creating-a-toolchain-from-scratch}
* **Менеджер пакетов**, такой как [Yarn](https://yarnpkg.com/) или [npm](https://www.npmjs.com/). Он позволяет вам использовать обширную экосистему сторонних пакетов и легко устанавливать или обновлять их.

A JavaScript build toolchain typically consists of:

* 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.
* **Сборщик**, такой как [webpack](https://webpack.js.org/) или [Parcel](https://parceljs.org/). Он позволяет писать модульный код и объединять его в небольшие пакеты, чтобы оптимизировать время загрузки.

* 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.

* 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).