Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
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
Prev Previous commit
Next Next commit
add minor improvements based on open discussions
  • Loading branch information
Maxim Titov committed Apr 28, 2023
commit d368590e66b275be4201f2e29cec4a334167f256
12 changes: 6 additions & 6 deletions src/content/learn/start-a-new-react-project.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Создаём новый проект с React
title: Начать новый React-проект
---

<Intro>
Expand All @@ -18,15 +18,15 @@ title: Создаём новый проект с React

### Next.js {/*nextjs*/}

**[Next.js](https://nextjs.org/) -- универсальный фулстек-фреймворк.** С его помощью вы можете создавать сайты любого размера от простого статического блога до сложного динамического приложения. Для создания нового Next.js проекта выполните команду в терминале:
**[Next.js](https://nextjs.org/) -- универсальный фулстек-фреймворк.** С его помощью вы можете создавать сайты любого размера от простого статического блога до сложного динамического приложения. Для создания нового Next.js-проекта выполните команду в терминале:

<TerminalBlock>
npx create-next-app
</TerminalBlock>

Узнайте больше о Next.js из [официальной документации.](https://nextjs.org/learn/foundations/about-nextjs)

Команда [Vercel](https://vercel.com/) постоянно улучшает Next.js. Вы можете [развернуть Next.js приложение](https://nextjs.org/docs/deployment) на облачном хостинге с Node.js или бессерверными вычислениями, а также на вашем собственном сервере. [Полностью статические Next.js приложения](https://nextjs.org/docs/advanced-features/static-html-export) могут быть опубликованы на любом статическом хостинге.
Команда [Vercel](https://vercel.com/) постоянно улучшает Next.js. Вы можете [развернуть Next.js-приложение](https://nextjs.org/docs/deployment) на облачном хостинге с Node.js или бессерверными вычислениями, а также на вашем собственном сервере. [Полностью статические Next.js-приложения](https://nextjs.org/docs/advanced-features/static-html-export) могут быть опубликованы на любом статическом хостинге.

### Remix {/*remix*/}

Expand Down Expand Up @@ -72,7 +72,7 @@ npx create-expo-app

И вот почему.

Даже если поначалу вам не понадобились маршрутизация или загрузка данных, скорее всего вы захотите добавить библиотеки для их поддержки позже. Ваш JavaScript бандл будет расти вместе с вашим приложением, и вам придётся задуматься как разделять код для разных маршрутов. Ваше приложение будет загружать всё больше данных, и в итоге вы можете столкнуться с каскадными запросами, которые замедлят ваше приложение. Среди ваших пользователей появятся те, кто пользуется низкоскоростным интернетом или старыми устройствами, и вы захотите генерировать HTML на сервере или во время сборки. Поменять настройки большого проекта так, чтобы запускать код на сервере, может оказаться затруднительным.
Даже если поначалу вам не понадобились маршрутизация или загрузка данных, скорее всего, вы захотите добавить библиотеки для их поддержки позже. Ваш JavaScript-бандл будет расти вместе с вашим приложением, и вам придётся задуматься как разделять код для разных маршрутов. Ваше приложение будет загружать всё больше данных, и в итоге вы можете столкнуться с каскадными запросами, которые замедлят ваше приложение. Среди ваших пользователей появятся те, кто пользуется низкоскоростным интернетом или старыми устройствами, и вы захотите генерировать HTML на сервере или во время сборки. Поменять настройки большого проекта так, чтобы запускать код на сервере, может оказаться затруднительным.

**Эти проблемы не являются специфичными для React. У Svelte есть SvelteKit, у Vue -- Nuxt, и т.д.** Чтобы решить эти проблемы, вам придётся интегрировать ваш бандлер с выбранными библиотеками для маршрутизации и загрузки данных. Сделать первичную настройку и заставить всё это работать вместе может оказаться не так сложно, но вам придётся поддерживать производительность приложения по мере его роста и узнать о множестве подводных камней. Вы захотите отправлять как можно меньше кода, и в то же время уменьшить количество взаимодействий между клиентом и сервером, а ещё параллельно загружать необходимые для страницы данные. Вы можете захотеть, чтобы страница была интерактивной ещё до запуска Javascript-кода, и пользователи любых браузеров могли работать с ней одинаково. Или вам потребуется добавить папку статических HTML-файлов для маркетинговых страниц, которые могут работать с отключённым на странице Javascript. Поддержка этих возможностей требует большого труда.

Expand All @@ -91,7 +91,7 @@ npx create-expo-app

**[Маршрутизатор приложения Next.js (Next.js App Router)](https://beta.nextjs.org/docs/getting-started) -- обновлённый API Next.js, отвечающий тому, как команда React видит архитектуру фулстек-приложений сегодня.** Маршрутизатор позволяет загружать данные в асинхронных компонентах на сервере или во время сборки.

Команда [Vercel](https://vercel.com/) постоянно улучшает Next.js. Вы можете [развернуть Next.js приложение](https://nextjs.org/docs/deployment) на облачном хостинге с Node.js или бессерверными вычислениями, а также на вашем собственном сервере. Next.js также поддерживает [статический экспорт](https://beta.nextjs.org/docs/configuring/static-export), который не требует сервера.
Команда [Vercel](https://vercel.com/) постоянно улучшает Next.js. Вы можете [развернуть Next.js-приложение](https://nextjs.org/docs/deployment) на облачном хостинге с Node.js или бессерверными вычислениями, а также на вашем собственном сервере. Next.js также поддерживает [статический экспорт](https://beta.nextjs.org/docs/configuring/static-export), который не требует сервера.

<Pitfall>

Expand All @@ -113,7 +113,7 @@ async function Talks({ confId }) {
// 1. Это серверный код, вы можете напрямую обратиться к вашей базе данных без запросов к API.
const talks = await db.Talks.findAll({ confId });

// 2. Добавьте любую логику рендеринга. Это не увеличит ваш JavaScript бандл.
// 2. Добавьте любую логику рендеринга. Это не увеличит ваш JavaScript-бандл.
const videos = talks.map(talk => talk.video);

// 3. Передайте данные ниже по дереву в компонент, который будет запускаться в браузере.
Expand Down
2 changes: 1 addition & 1 deletion src/sidebarLearn.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"path": "/learn/installation",
"routes": [
{
"title": "Создаём новый проект с React",
"title": "Начать новый React-проект",
"path": "/learn/start-a-new-react-project"
},
{
Expand Down