Создайте приложение React с использованием шаблона-заготовки

React — это наиболее широко используемая JavaScript-библиотека для фронтенда.

В этом руководстве мы создадим простое приложение React с использованием Deno. Приложение будет отображать список динозавров. При нажатии на динозавра вы будете перенаправлены на страницу динозавра с более подробной информацией. Вы можете увидеть репозиторий готового приложения на GitHub.

В этом руководстве будет использоваться Vite для локального запуска приложения. Vite — это инструмент сборки и сервер разработки для современных веб-проектов. Он хорошо сочетается с React и Deno, используя ES-модули и позволяя вам импортировать компоненты React напрямую.

Шаблон-заготовка

Мы подготовили шаблон-заготовку для вашего использования. Это позволит создать базовое приложение-заготовку с React, Vite и файлом deno.json для настройки вашего проекта. Перейдите в репозиторий GitHub по адресу https://github.com/denoland/react-vite-ts-template и нажмите кнопку "Использовать этот шаблон", чтобы создать новый репозиторий.

После создания нового репозитория по шаблону клонируйте его на свой локальный компьютер и перейдите в директорию проекта.

Клонирование репозитория локально

git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name

Установка зависимостей

Установите зависимости проекта, выполнив команду:

deno install

Запуск сервера разработки

Теперь вы можете запустить ваше новое приложение React, выполнив команду:

deno run dev

Это запустит сервер Vite. Щелкните ссылку на вывод для localhost, чтобы увидеть ваше приложение в браузере.

О шаблоне

Клонированный репозиторий шаблона содержит базовое приложение React. Приложение использует Vite в качестве сервера разработки и предоставляет сервер статических файлов, созданный с помощью oak, который будет обслуживать готовое приложение при развертывании. Приложение React находится в папке client, а сервер back-end — в папке server.

Файл deno.json используется для настройки проекта и определения разрешений, необходимых для запуска приложения. Он содержит поле tasks, которое определяет задачи, которые можно выполнить с помощью deno run. В нем есть задача dev, которая запускает сервер Vite, задача build, которая собирает приложение с помощью Vite, и задача serve, которая запускает сервер back-end для обслуживания собранного приложения.

Добавление back-end API

Мы добавим API в сервер, предоставленный шаблоном. Именно здесь мы будем получать данные о динозаврах.

В каталоге server вашего нового проекта создайте папку api. В этой папке создайте файл data.json, который будет содержать данные о динозаврах в виде жестко закодированных данных.

Скопируйте и вставьте этот файл JSON в файл api/data.json. (Если бы вы создавали реальное приложение, вы, вероятно, получали бы эти данные из базы данных или внешнего API.)

Мы собираемся разработать несколько маршрутов API, которые будут возвращать информацию о динозаврах на сервер, который поставляется с шаблоном. Нам потребуется cors middleware для включения CORS.

Используйте команду deno install для добавления зависимости cors в ваш проект:

deno install jsr:@tajpouria/cors

Далее, обновите server/main.ts для импорта необходимых модулей и создания нового экземпляра Router для определения некоторых маршрутов:

import { Application } from "jsr:@oak/oak/application";
import { Router } from "jsr:@oak/oak/router";
import { oakCors } from "@tajpouria/cors";
import routeStaticFilesFrom from "./util/routeStaticFilesFrom.ts";
import data from "./api/data.json" with { type: "json" };

export const app = new Application();
const router = new Router();

После этого в том же файле определим два маршрута. Один на /api/dinosaurs для возврата всех динозавров и /api/dinosaurs/:dinosaur для возврата конкретного динозавра на основе имени в URL:

router.get("/api/dinosaurs", (context) => {
  context.response.body = data;
});

router.get("/api/dinosaurs/:dinosaur", (context) => {
  if (!context?.params?.dinosaur) {
    context.response.body = "No dinosaur name provided.";
  }

  const dinosaur = data.find((item) =>
    item.name.toLowerCase() === context.params.dinosaur.toLowerCase()
  );

  context.response.body = dinosaur ?? "No dinosaur found.";
});

В конце того же файла подключим только что определенные маршруты к приложению. Также необходимо включить сервер статических файлов из шаблона, и, наконец, запустим сервер, слушающий порт 8000:

app.use(oakCors());
app.use(router.routes());
app.use(router.allowedMethods());
app.use(routeStaticFilesFrom([
  `${Deno.cwd()}/client/dist`,
  `${Deno.cwd()}/client/public`,
]));

if (import.meta.main) {
  console.log("Server listening on port http://localhost:8000");
  await app.listen({ port: 8000 });
}

Вы можете запустить сервер API с помощью команды deno run --allow-env --allow-net server/main.ts. Мы создадим задачу для выполнения этой команды в фоновом режиме и обновим задачу разработки для запуска как приложения React, так и сервера API.

В файле package.json обновите поле scripts следующим образом:

{
 "tasks": {
+   "dev": "deno run -A --node-modules-dir=auto npm:vite & deno run server:start",
   "build": "deno run -A --node-modules-dir=auto npm:vite build",
   "server:start": "deno run -A --node-modules-dir --watch ./server/main.ts",
   "serve": "deno run build && deno run server:start"
}

Если вы запустите deno run dev сейчас и перейдете по адресу localhost:8000/api/dinosaurs в своем браузере, вы увидите JSON-ответ со всеми динозаврами.

Обновление точки входа

Точка входа для приложения React находится в файле client/src/main.tsx. Наша будет очень простой:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
  <StrictMode><App /></StrictMode>,
);

Добавление маршрутизатора

Приложение будет иметь два маршрута: / и /:dinosaur.

Мы будем использовать react-router-dom для построения логики маршрутизации, поэтому нам нужно добавить зависимость react-router-dom в ваш проект. В корне проекта выполните команду:

deno install npm:react-router-dom

Обновите файл /src/App.tsx для импорта и использования компонента BrowserRouter из react-router-dom и определения двух маршрутов:

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Index from "./pages/index.tsx";
import Dinosaur from "./pages/Dinosaur.tsx";
import "./App.css";

function App() {
  return (
    <BrowserRouter><Routes><Route path="/" element={<Index />} /><Route path="/:selectedDinosaur" element={<Dinosaur />} /></Routes></BrowserRouter>
  );
}

export default App;

Прокси для переадресации запросов API

Vite будет обслуживать приложение на порту 3000, а наш API работает на порту 8000. Поэтому нам нужно настроить прокси, чтобы маршрутизатор мог обращаться к путям api/. Добавьте настройку прокси в vite.config.ts.

export default defineConfig({
 root: "./client",
 server: {
   port: 3000,
+   proxy: {
+     "/api": {
+       target: "http://localhost:8000",
+       changeOrigin: true,
+     },
+   },

Создание страниц

Мы создадим две страницы: Index и Dinosaur. На странице Index будет отображаться список всех динозавров, а на странице Dinosaur — подробная информация о конкретном динозавре.

Создайте папку pages в каталоге src и внутри нее создайте два файла: index.tsx и Dinosaur.tsx.

Типы

Обе страницы будут использовать тип Dino для описания формы данных, которые они ожидают от API. Поэтому создадим файл types.ts в каталоге src:

export type Dino = { name: string; description: string };

index.tsx

На этой странице будет извлекаться список динозавров из API и отображаться в виде ссылок:

import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { Dino } from "../types.ts";

export default function Index() {
  const [dinosaurs, setDinosaurs] = useState<Dino[]>([]);

  useEffect(() => {
    (async () => {
      const response = await fetch(`/api/dinosaurs/`);
      const allDinosaurs = await response.json() as Dino[];
      setDinosaurs(allDinosaurs);
    })();
  }, []);

  return (
    <main><h1>Welcome to the Dinosaur app</h1><p>Click on a dinosaur below to learn more.</p>{dinosaurs.map((dinosaur: Dino) => {
        return (
          <Link
            to={`/${dinosaur.name.toLowerCase()}`}
            key={dinosaur.name}
            className="dinosaur"
          >{dinosaur.name}</Link>
        );
      })}</main>
  );
}

Dinosaur.tsx

На этой странице будет извлекаться информация о конкретном динозавре из API и отображаться в абзаце:

import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { Dino } from "../types";

export default function Dinosaur() {
  const { selectedDinosaur } = useParams();
  const [dinosaur, setDino] = useState<Dino>({ name: "", description: "" });

  useEffect(() => {
    (async () => {
      const resp = await fetch(`/api/dinosaurs/${selectedDinosaur}`);
      const dino = await resp.json() as Dino;
      setDino(dino);
    })();
  }, [selectedDinosaur]);

  return (
    <div><h1>{dinosaur.name}</h1><p>{dinosaur.description}</p><Link to="/">🠠 Back to all dinosaurs</Link></div>
  );
}

Стиль списка динозавров

Поскольку мы отображаем список динозавров на главной странице, давайте немного отформатируем его. Добавьте следующее в конец файла src/App.css, чтобы отобразить список динозавров упорядоченно:

.dinosaur {
  display: block;
}

Запуск приложения

Для запуска приложения используйте ранее настроенную задачу.

deno run dev

Перейдите по ссылке на локальный сервер Vite в вашем браузере (localhost:5173), и вы увидите отображаемый список динозавров, по которому можно переходить к каждой записи.

Сборка и развертывание

Клонированный шаблон содержит задачу serve, которая собирает приложение и запускает его с сервером back-end. Выполните следующую команду для сборки и запуска приложения:

deno run serve

Если вы перейдете по адресу localhost:8000 в своем браузере, вы должны увидеть работающее приложение!

Вы можете развернуть это приложение на своем любимом облачном провайдере. Мы рекомендуем использовать Deno Deploy для простого и удобного развертывания.

Для развертывания в Deno Deploy перейдите на панель управления Deno Deploy и создайте новый проект. Затем вы можете развернуть приложение, подключившись к своему репозиторию GitHub и выбрав нужную ветку.

Дайте проекту имя и убедитесь, что build step установлено в значение deno run build, а Entrypoint равно ./server.main.ts.

Нажмите кнопку Deploy Project и ваше приложение будет доступно онлайн!

🦕 Теперь вы можете создать и разрабатывать приложения React с использованием Vite и Deno! Вы готовы создавать быстродействующие веб-приложения. Надеемся, вам понравится изучение этих передовых инструментов, и мы с нетерпением ждём, что вы создадите!