Перевод: Build a React App from scratch #1022

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

Jump to bottom

Open

Aki120900 wants to merge 1 commit into reactjs:main

from Aki120900:translation-build-app

Open

Перевод: Build a React App from scratch #1022

Aki120900 wants to merge 1 commit into reactjs:main from Aki120900:translation-build-app

Conversation

@Aki120900

Copy link

@Aki120900 Aki120900 commented Jun 5, 2025

Переведена статья "Build a React App from scratch" (из раздела Learn):

Переведены все заголовки и описания.
С учётом рекомендаций TRANSLATION.md исправлены участки с «нагромождением существительных».

Оригинал: https://react.dev/learn/build-a-react-app-from-scratch

@Aki-chan-12


 Перевод: Build a React App from scratch

20aed67

@vercel

Copy link

vercel bot commented Jun 5, 2025 •

edited

Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
ru-legacy-reactjs-org	⬜️ Ignored (Inspect)	Visit Preview	Jun 5, 2025 6:14am

@vercel vercel bot deployed to Preview – ru-react-dev

June 5, 2025 06:15

View deployment

@Aki120900

Copy link

Author

Aki120900 commented Jun 5, 2025

Здравствуйте!
Это мой перевод статьи из раздела Learn - Build a React App from scratch . Я постаралась учесть все рекомендации из TRANSLATION.md.

Буду признателен(на) за любые замечания и обратную связь.
Спасибо!

dimatitov

dimatitov reviewed

Jun 5, 2025

View reviewed changes

Copy link

Contributor

@dimatitov dimatitov left a comment

Choose a reason for hiding this comment

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

Большое спасибо за качественный и аккуратный перевод! Видно, что вложено много внимания к деталям и стилю.

Я оставил несколько предложений — в основном по терминологии и лёгкому упрощению формулировок, чтобы текст звучал чуть естественнее на русском. Всё по мелочи, общий уровень перевода очень высокий

Спасибо ещё раз за вклад!

src/content/learn/build-a-react-app-from-scratch.md

#### Рассмотрите возможность использования фреймворка {/*consider-using-a-framework*/}

Starting from scratch is an easy way to get started using React, but a major tradeoff to be aware of is that going this route is often the same as building your own adhoc framework. As your requirements evolve, you may need to solve more framework-like problems that our recommended frameworks already have well developed and supported solutions for.

Начать с нуля — это простой способ познакомиться с React, но важно понимать, что такой подход зачастую сводится к созданию собственного, спонтанно сформированного фреймворка. По мере роста требований вам, скорее всего, придётся решать задачи, характерные для фреймворков, для которых в рекомендованных нами решениях уже есть хорошо проработанные и поддерживаемые решения.

Copy link

Contributor

@dimatitov dimatitov Jun 5, 2025

Choose a reason for hiding this comment

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

Предлагаю немного упростить и облегчить восприятие:
"что такой подход зачастую сводится к созданию собственного, спонтанно сформированного фреймворка" -> "что такой подход зачастую сводится к созданию собственного самодельного фреймворка"
Слово "самодельного" звучит естественнее и передаёт ту же идею, не перегружая фразу.

src/content/learn/build-a-react-app-from-scratch.md

Например, если в будущем вашему приложению потребуется поддержка серверного рендеринга (SSR), статической генерации (SSG) или React Server Components (RSC), вам придётся реализовать это самостоятельно. То же самое касается будущих возможностей React, которые требуют глубокой интеграции на уровне фреймворка и которые вам придётся реализовывать самостоятельно, если вы захотите их использовать.

Our recommended frameworks also help you build better performing apps. For example, reducing or eliminating waterfalls from network requests makes for a better user experience. This might not be a high priority when you are building a toy project, but if your app gains users you may want to improve its performance.

Рекомендованные нами фреймворки также помогают создавать более производительные приложения. Например, сокращение или устранение каскадов сетевых запросов улучшает пользовательский опыт. Это может быть не так важно на этапе создания небольшого проекта, но с ростом числа пользователей производительность может стать приоритетом.

Copy link

Contributor

@dimatitov dimatitov Jun 5, 2025

Choose a reason for hiding this comment

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

Вы хорошо перевели данный абзац, но предлагаю его еще немного упростить.
"сокращение или устранение каскадов сетевых запросов" -> "уменьшение количества последовательных сетевых запросов".
Фраза «каскад сетевых запросов» может быть не совсем понятна новичкам.

src/content/learn/build-a-react-app-from-scratch.md

</TerminalBlock>

Parcel supports fast refresh, JSX, TypeScript, Flow, and styling out of the box. See [Parcel's React recipe](https://parceljs.org/recipes/react/#getting-started) to get started.

Parcel поддерживает встроенную поддержку fast refresh, JSX, TypeScript, Flow и стилизацию. Ознакомьтесь с [Parcel's React рецептом](https://parceljs.org/recipes/react/#getting-started), чтобы начать.

Copy link

Contributor

@dimatitov dimatitov Jun 5, 2025

Choose a reason for hiding this comment

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

Предлагаю полностью перевести описание ссылки — вместо «Parcel's React рецептом» написать «руководство по использованию React с Parcel» для большей ясности.

src/content/learn/build-a-react-app-from-scratch.md

### Rsbuild {/*rsbuild*/}

[Rsbuild](https://rsbuild.dev/) is an Rspack-powered build tool that provides a seamless development experience for React applications. It comes with carefully tuned defaults and performance optimizations ready to use.

[Rsbuild](https://rsbuild.dev/) — это инструмент сборки на базе Rspack, который предлагает безупречную систему для разработки React-приложений. Он включает в себя оптимизированные настройки и улучшения производительности.

Copy link

Contributor

@dimatitov dimatitov Jun 5, 2025

Choose a reason for hiding this comment

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

Вы достаточно точно перевели и передали суть.
Могу только предложить упростить формулировку "Он включает в себя оптимизированные настройки и улучшения производительности" -> "Он содержит оптимизированные настройки и улучшенную производительность".
Так звучит менее перегружено и понятно.

src/content/learn/build-a-react-app-from-scratch.md

</TerminalBlock>

Vite is opinionated and comes with sensible defaults out of the box. Vite has a rich ecosystem of plugins to support fast refresh, JSX, Babel/SWC, and other common features. See Vite's [React plugin](https://vite.dev/plugins/#vitejs-plugin-react) or [React SWC plugin](https://vite.dev/plugins/#vitejs-plugin-react-swc) and [React SSR example project](https://vite.dev/guide/ssr.html#example-projects) to get started.

Vite следует определённой философии и поставляется с продуманными настройками по умолчанию. У него также есть богатая экосистема плагинов, поддерживающих fast refresh, JSX, Babel/SWC и других функций. Ознакомьтесь с [React-плагином для Vite](https://vite.dev/plugins/#vitejs-plugin-react) или [React SWC-плагином](https://vite.dev/plugins/#vitejs-plugin-react-swc), а также [примером проекта SSR на Vite](https://vite.dev/guide/ssr.html#example-projects), чтобы начать работу.

Copy link

Contributor

@dimatitov dimatitov Jun 5, 2025

Choose a reason for hiding this comment

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

Предлагаю уточнить перевод термина fast refresh — можно рассмотреть такой вариант, как «быстрая перезагрузка». Возможно, стоит выбрать вариант, который лучше передаёт идею без полной перезагрузки страницы при разработке.

src/content/learn/build-a-react-app-from-scratch.md

</TerminalBlock>

Rsbuild includes built-in support for React features like fast refresh, JSX, TypeScript, and styling. See [Rsbuild's React guide](https://rsbuild.dev/guide/framework/react) to get started.

Rsbuild поддерживает встроенную поддержку fast refresh, JSX, TypeScript и стилизацию. Ознакомьтесь с [Rsbuild's React руководство](https://rsbuild.dev/guide/framework/react), чтобы начать.

Copy link

Contributor

@dimatitov dimatitov Jun 5, 2025

Choose a reason for hiding this comment

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

Предлагаю уточнить перевод термина Fast Refresh — можно рассмотреть такие варианты, как «быстрая перезагрузка», «мгновенное обновление» или «горячее обновление компонентов». Возможно, стоит выбрать вариант, который лучше передаёт идею без полной перезагрузки страницы при разработке.

src/content/learn/build-a-react-app-from-scratch.md

## Шаг 1: Установка инструмента сборки {/*step-1-install-a-build-tool*/}

The first step is to install a build tool like `vite`, `parcel`, or `rsbuild`. These build tools provide features to package and run source code, provide a development server for local development and a build command to deploy your app to a production server.

Первым шагом будет установка инструмента сборки, например, `vite`, `parcel`, или `rsbuild`. Эти инструменты позволяют упаковывать и запускать исходный код, предоставляют локальный сервер разработки и команду сборки для деплоя приложения на продакшн-сервер.

Copy link

Contributor

@dimatitov dimatitov Jun 5, 2025

Choose a reason for hiding this comment

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

Предлагаю заменить «деплой» на «развёртывание» — это более нейтральный и устоявшийся вариант в русскоязычной технической документации.

Labels

None yet

3 participants

@Aki120900 @dimatitov @Aki-chan-12

Перевод: Build a React App from scratch #1022

Are you sure you want to change the base?

Перевод: Build a React App from scratch #1022

Uh oh!

Conversation

@Aki120900 Aki120900 commented Jun 5, 2025

Uh oh!

vercel bot commented Jun 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Aki120900 commented Jun 5, 2025

Uh oh!

@dimatitov dimatitov left a comment

Choose a reason for hiding this comment

Uh oh!

@dimatitov dimatitov Jun 5, 2025

Choose a reason for hiding this comment

Uh oh!

@dimatitov dimatitov Jun 5, 2025

Choose a reason for hiding this comment

Uh oh!

@dimatitov dimatitov Jun 5, 2025

Choose a reason for hiding this comment

Uh oh!

@dimatitov dimatitov Jun 5, 2025

Choose a reason for hiding this comment

Uh oh!

@dimatitov dimatitov Jun 5, 2025

Choose a reason for hiding this comment

Uh oh!

@dimatitov dimatitov Jun 5, 2025

Choose a reason for hiding this comment

Uh oh!

@dimatitov dimatitov Jun 5, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel bot commented Jun 5, 2025 •

edited

Loading