Создает драфт статьи

doka-guide · Feb 18, 2024 · 8b43c56 · 8b43c56
1 parent e32790a
commit 8b43c56
Showing 1 changed file with 134 additions and 0 deletions.
diff --git a/js/expressive-react-rectangle/index.md b/js/expressive-react-rectangle/index.md
@@ -0,0 +1,134 @@
+---
+title: "Выразительный React: прямоугольник и собачка"
+description: "Создаем простой компонент на React"
+authors:
+  - hellsquirrel
+tags:
+  - article
+---
+
+Это первая статья из серии "Выразительный React". Здесь мы познакомимся с React и запилим первый простой компонент - прямоугольничек с собачкой. Чтобы нам не было скучно мы даже не будем запускать наш код в браузере. Вместо этого напишем простой скрипт который, который запустит сервер и отдаст HTML страницу с нашим компонентом.
+
+## React в одном абзаце
+React это библиотека которая позволяет создавать переиспользуемые кусочки интерфейса – компоненты. Для описания компонента вы используете JavaScript или TypeScript, специальные правила и синтаксис, который называется JSX.
+
+Комбинируя компоненты вы создаете свой уникальный React-мир.
+
+<aside>
+React можно использовать и без JSX - но это редко когда бывает нужно. Код React-компонента с использванием JSX читать значительно легче.
+</aside>
+
+Самый стандрарный способ использования React запускать его в браузере.
+Так как браузеры не понимают JSX, нужно несколько дополнительных шагов, чтобы показать наш React-мир пользователям:
+* Сначала нужно создать компонент с помощью JavaScript/TypeScript и JSX.
+* Затем нужно написать код для отображения компонента.
+* Потом преобразовать весь код в понятный браузеру JavaScript (без JSX).
+* И наконец подключить преобразованный код к HTML странице (как и любой другой JavaScript, используя тег <script>).
+
+Мы обязательно займемся этим в другой статье. А сейчас сделаем совсем по-другому.
+* Мы создадим компонент с помощью TypeScript и JSX. (тот же самый шаг)
+* Напишем скрипт, который поднимает сервер и отдает HTML страницу с нашим компонентом.
+* Откроем страницу и полюбуемся на результатом.
+
+## Подготавливаем рабочее место
+
+> Здесь и далее я предполагаю что вы работаете на Mac. Для Windows и Linux инструкции не должны отличаться, но если у вас вдруг что-то не заведется приносите issues.
+
+Убедитесь что у вас установлен Node. Если Node нет, утащите его с [официального сайта](https://nodejs.org/en/download).
+
+Создайте папку для проекта и перейдите в нее в терминале.
+
+```bash
+mkdir -p expressive-react/rectangle
+cd expressive-react/rectangle
+```
+
+Выполните команду
+```bash
+npx bun init
+```
+<aside>
+Мы будем использовать набор инструментов из библиотеки [`bun`](https://bun.sh/docs/bundler). Для других сборщиков команды инициализации и установки дополнительных библиотек будут отличаться.
+</aside>
+
+Булочка создаст для вас все нужные файлы и папки.
+
+Выполните команду
+```bash
+npx bun index.ts
+```
+
+Полюбуйтесь на "Hello, World!" в консоли.
+
+Теперь установите React.
+```bash
+npx bun install react react-dom
+```
+
+## Создаем прямоугольник и собачку
+Создайте файл `Rectangle.tsx` вот с таким содержимым:
+
+```tsx
+const Rectangle: FC = () => <div>🐶</div>;
+
+export const rectangleElement = <Rectangle />;
+```
+
+🧐 В этом файле мы создали React-компонент  `Rectangle`
+Любой React-компонент это просто функция которая возвращает разметку, описанную при помощи JSX.
+
+<aside>
+`null` или обычная JavaScript строка это тоже валидная JSX разметка.
+</aside>
+
+Затем мы создали React-element. React-element это то что может отобразить ваш браузер. Вы можете думать о React-компоненте как о шаблоне, а о React-element как о конкретном экземпляре этого шаблона.
+
+Мы экспортировали React-element, чтобы переиспользовать его в другом файле.
+
+## Cобачка отправляется в HTML
+
+Давайте отредактируем файл `index.ts` чтобы он создал сервер, который выдаст HTML страницу с прямоугольником и собачкой.
+
+```tsx
+import { renderToString } from "react-dom/server";
+import { rectangleElement } from './Rectangle';
+
+const html = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Собачка в прямоугольнике</title>
+</head>
+<body>
+${renderToString(rectangleElement)}
+</body>
+</html>`
+
+Bun.serve({
+  port: 8080,
+  async fetch() {
+    return new Response(html, {
+        headers: {
+            "Content-Type": "text/html",
+        }
+    });
+  },
+});
+```
+
+Запускаем:
+```bash
+npx bun index.ts
+```
+Открываем [http://localhost:8080](http://localhost:8080), если вы видите собачку значит у вас все получилось, а мне не нужно редактировать эту статью :)
+
+Разберемся что просходит в файле `index.ts`:
+Мы сделали свой собственный [серверный рендеринг](https://react.dev/reference/react-dom/server) с очень ограниченными возможностями. Например в текущей реализации мы никак не можем добавить интерактивности к нашей собачке :( Здесь нам этого и не нужно, мы резберемся как оживлять React-миры позже.
+
+Мы импортировали наш элемент `rectangleElement` функцию `renderToString` из библиотеки `react-dom/server`. Эта функция преобразует React-элемент в строку, которую можно вставить в HTML.
+
+Дальше мы создали шаблон HTML страницы, вставили в него наш прямоугольник и собачку
+После этого мы вызвали специальное API из нашего инструментария. [`Bun.serve`](https://bun.sh/docs/api/http) создает сервер, который отдает нашу HTML страницу. Чтобы это сделать мы определили колбек `fetch`, который возвращает ответ `Response` с нашей HTML страницей.
+