Выразительный React: простые компоненты на сервере

В статье вы познакомитесь с React и создадите первый простой компонент — прямоугольник с собачкой. В этом примере мы не будем запускать код в браузере. Вместо этого напишем простой скрипт, который запустит сервер и отдаст HTML-страницу с компонентом. Эта техника называется рендеринг на стороне сервера (Server-Side Rendering, SSR).

React — это библиотека, которая позволяет создавать переиспользуемые кусочки интерфейса – компоненты. Для описания компонента вы используете JavaScript или TypeScript, специальные правила и синтаксис, который называется JSX.

Комбинируя компоненты, вы создаёте свой уникальный React-мир.

Обычно код React-компонентов запускается в браузере. Так как браузеры не понимают JSX, нужно несколько дополнительных шагов, чтобы показать наш React-мир пользователям:

• Создать компонент с помощью JavaScript/TypeScript и JSX.
• Написать код для отображения компонента.
• Преобразовать весь код в понятный браузеру JavaScript (без JSX).
• Подключить преобразованный код к HTML-странице. (как и любой другой JavaScript, используя тег <script>).

Однако в этой статье мы сделаем всё по-другому 🙃

• Создадим компонент с помощью TypeScript и JSX (тот же самый шаг).
• Напишем скрипт, который запускает сервер и отдаёт HTML-страницу с нашим компонентом.
• Откроем страницу и полюбуемся результатом.

Здесь и далее я предполагаю, что вы работаете на macOS. Для Windows и Linux инструкции не должны отличаться, но если у вас вдруг что-то не заведётся, приносите issues.
Если вы используете Windows, посмотрите в сторону WSL.

Убедитесь, что у вас установлен Node.js. Если Node.js нет, скачайте его с официального сайта программной платформы.

Создайте папку для проекта и перейдите в неё в терминале.

        
          
          mkdir -p expressive-react/rectanglecd expressive-react/rectangle
          mkdir -p expressive-react/rectangle
cd expressive-react/rectangle

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Выполните команду:

        
          
          npx bun init
          npx bun init

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Булочка создаст все нужные файлы и папки.

Выполните команду:

        
          
          npx bun index.ts
          npx bun index.ts

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Полюбуйтесь на «Hello, World!» в консоли.

Теперь установите React.

        
          
          npx bun install react react-dom
          npx bun install react react-dom

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Создайте файл Rectangle.tsx с таким содержимым:

        
          
          const Rectangle = () => <div style={{border: "1px solid brown" }}>🐶</div>;export const rectangleElement = <Rectangle />;
          const Rectangle = () => <div style={{border: "1px solid brown" }}>🐶</div>;

export const rectangleElement = <Rectangle />;

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В этом файле создаётся React-компонент Rectangle. Любой React-компонент — это просто функция, которая возвращает разметку, описанную при помощи JSX.

Затем создадим React-element. React-element — это то, что может отобразить браузер. Вы можете думать о React-компоненте как о шаблоне, а о React-element как о конкретном экземпляре этого шаблона.

Мы экспортировали React-element, чтобы переиспользовать его в другом файле.

Добавим в файл index.ts код, который будет создавать и запускать сервер. В результате работы сервер выдаст HTML-страницу с собачкой в прямоугольнике.

        
          
          import { renderToString } from "react-dom/server";import { rectangleElement } from './Rectangle';const html = `<!DOCTYPE html><html lang="ru"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Собачка в прямоугольнике</title></head><body>  ${renderToString(rectangleElement)}</body></html>`Bun.serve({  port: 8080,  async fetch() {    return new Response(html, {      headers: {        "Content-Type": "text/html",      }    });  },});
          import { renderToString } from "react-dom/server";
import { rectangleElement } from './Rectangle';

const html = `
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Собачка в прямоугольнике</title>
</head>
<body>
  ${renderToString(rectangleElement)}
</body>
</html>`

Bun.serve({
  port: 8080,
  async fetch() {
    return new Response(html, {
      headers: {
        "Content-Type": "text/html",
      }
    });
  },
});

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Запускаем сервер командой:

        
          
          npx bun index.ts
          npx bun index.ts

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Откройте http://localhost:8080, и убедитесь, что собачка видна. Если да, то значит всё получилось, а мне не нужно редактировать эту статью 😊

Разберёмся, что происходит в файле index.ts. Мы импортировали элемент rectangleElement и функцию renderToString из библиотеки react-dom/server. Эта функция преобразует React-элемент в строку, которую можно вставить в HTML.

Мы сделали свой собственный серверный рендеринг с очень ограниченными возможностями. Например, в текущей реализации мы не можем добавить интерактивности собачке ☹️ Здесь нам это и не нужно, мы разберёмся как оживлять React-миры в другой статье.

Дальше мы создали шаблон HTML-страницы, вставили в него наш прямоугольник и собачку. После этого мы вызвали специальное API из нашего инструментария. Bun.serve создаёт сервер, который отдаёт нашу HTML-страницу. Чтобы это сделать, мы определили колбэк fetch, который возвращает ответ Response с нашей страницей.

        
          
          powershell -c "irm bun.sh/install.ps1|iex"
          powershell -c "irm bun.sh/install.ps1|iex"

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          bun --version
          bun --version

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          bun index.ts
          bun index.ts

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать