Начните с Ultra, нового веб-фреймворка React

Ultra — это современный потоковый React-фреймворк, созданный с помощью Deno, который в значительной степени полагается на встроенную функциональность вашего браузера. Он использует ES-модули, карты импорта и веб-потоки в будущем. При этом он поддерживает некоторые отклонения от нормы, которые по каким-то причинам нравятся многим обычным людям (JSX и TypeScript). Ultra использует Deno и React и фокусируется на использовании веб-потоков и нативных функций в браузере.

Давайте рассмотрим некоторые причины, по которым вам стоит рассмотреть возможность использования Ultra для вашего следующего проекта.

Модуль разрешений: Ultra имеет модуль безопасности на основе разрешений Deno, позволяющий устанавливать разрешения для запуска приложений.
Ленивая маршрутизация: Ultra использует для создания маршрутов маршрутизатор Wouter a small Hooks на основе текущих проектов React и Preact.
Выборка данных из Suspense: Ultra использует SWR от Vercel с Suspense, чтобы позволить вам получать данные в любом месте ваших компонентов.
Service Workers: Ultra использует ванильные Service Workers для обслуживания, кэширования и оптимизации вашего сайта.
Динамический MDX: Ultra имеет поддержку MDX, что позволяет генерировать динамический MDX в ваших приложениях.

Содержание

Настройка проекта
Структура проекта
Обновление app.tsx
Воспроизведение сеансов с открытым исходным кодом
Создание компонента «Книга
Создание компонента BookList
Добавление маршрутов
Заключение

Настройка проекта

Давайте создадим небольшое приложение для книжного магазина с помощью Ultra.

Сначала нам нужно создать новый проект Ultra, выполнив в терминале следующие команды.

git clone https://github.com/exhibitionist-digital/create-ultra-app
cd create-ultra-app
deno task dev

Войти в полноэкранный режим Выйти из полноэкранного режима

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

**create-ultra-app**
 ┣ src
 ┃ ┣ api
 ┃ ┃ ┗ example.ts
 ┃ ┣ app.tsx
 ┃ ┣ favicon.ico
 ┃ ┗ style.css
 ┣ .gitignore
 ┣ README.md
 ┣ deno.json
 ┣ importMap.json
 ┣ package-lock.json
 ┗ server.ts

Войти в полноэкранный режим Выйти из полноэкранного режима

Рассмотрим структуры папок подробнее в следующем разделе. Затем запустите приложение по адресу http//:localhost:8000/books.

Структура проекта

Ultra создает следующие структуры папок.

Server.ts: Этот код запускает сервер Ultra.
src: Это папка, в которой находится код вашего проекта.
app.tsx: Это корневой файл для каждого проекта Ultra.
importMap.json: Здесь документируются зависимости для проекта.
deno.json: Здесь находится файл конфигурации, позволяющий настроить встроенные компилятор, форматер и линтеры TypeScript.

Обновление app.tsx

Давайте в файл app.tsx включим Bootstrap CDN, чтобы включить стиль компонентов. Ultra использует react-helmet-async для добавления разметки в html <head>. Чтобы заменить код в компоненте <Helmet> на фрагмент кода ниже.

<Helmet>
  <title>Book store</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</Helmet>

Вход в полноэкранный режим Выход из полноэкранного режима

Воспроизведение сеансов с открытым исходным кодом

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

Начните получать удовольствие от отладки — [начните использовать OpenReplay бесплатно].
(https://github.com/openreplay/openreplay).

Создание компонента «Книга

Теперь давайте создадим еще одну папку component для наших компонентов. В папке компонента создайте файл Book.tsx и добавьте фрагмент кода, приведенный ниже.

import React from "react";
const BookList = React.lazy(() => import("./BookList.tsx"));

const books = [
  {
    id: 1,
    title: 'The Design of EveryDay Things',
    author: 'Don Norman',
    price: '$22.00',
    coverImage: 'https://miro.medium.com/max/1200/1*ixC7mJJRK55qPhyRwj3iGg.jpeg',
    description: 'Don Norman is a designer who lives and works in San Francisco. He has designed more than 100 products for companies such as Google, Motorola, and eBay. He has also designed products for non-profit organizations such as the World Food Program and UNICEF.',
  },
  {
    id: 2,
    title: 'Things fall Apart',
    author: 'Chinua Achebe',
    coverage: 'https://i0.wp.com/feminisminindia.com/wp-content/uploads/2021/07/Things_Fall_Apart_by_Chinua_Achebe_1_.jpg?fit=1200%2C675&ssl=1',
    description: 'Don Norman is a designer who lives and works in San Francisco. He has designed more than 100 products for companies such as Google, Motorola, and eBay. He has also designed products for non-profit organizations such as the World Food Program and UNICEF.',
  }
];

Вход в полноэкранный режим Выйти из полноэкранного режима

В приведенном выше фрагменте кода мы импортировали React и компоненты BookList, которые мы создадим позже в этом учебнике. Затем мы создали массив book с некоторыми данными о книгах.

Теперь давайте создадим и отобразим JSX для компонента Book с помощью приведенного ниже фрагмента кода.

export default function Book() {
  return (
    <>
      <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <a class="navbar-brand">Book Store</a>
          <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </nav>
      <div class="container-md">
        <div class="row">
          {books.map((book) => (
            <BookList key={book.id} book={book} />
          ))}
        </div>
      </div>
    </>
  );
}

Вход в полноэкранный режим Выход из полноэкранного режима

В приведенном выше фрагменте кода мы создали JSX для компонента Book и отобразили компонент BookList, передав массив book в качестве реквизита.

Создание компонента BookList

Создав компонент Book, давайте создадим еще один компонент в папке component под названием BookList.tsx и добавим фрагмент кода ниже.

import React from "react";
export default function BookList({ book }) {
    return (
        <div class="col-sm-6">
            <div class="card">
                <img src={book.coverImage} class="card-img-top" alt="..." />
                <div class="card-body">
                    <h5 class="card-title">
                        {book.title}</h5>
                    <p class="card-text">{book.description}</p>
                    <a href="#" class="btn btn-primary">View Details</a>
                </div>
            </div>
        </div>

    );
}

Вход в полноэкранный режим Выйти из полноэкранного режима

В приведенном выше фрагменте мы создали компонент BookList. Здесь мы деструктурируем массив книг из реквизита, чтобы получить доступ к объектам book и отобразить их.

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

Теперь давайте настроим маршрут для приложения. Ultra использует маршрутизатор Wouter для маршрутизации, и он уже настроен в файле app.tsx для вас. Но нам нужно сделать несколько модификаций. Мы отобразим компонент Book на маршруте /books.

...
<Switch>
  <Route path="/book">
    <Book />
 </Route>
</Switch>
...

Вход в полноэкранный режим Выход из полноэкранного режима

Заключение

На протяжении всего этого руководства вы узнали об Ultra, создав простое приложение Book. Мы начали с введения, а затем рассмотрели некоторые причины, по которым разработчики должны использовать Ultra в своих проектах.
Вы можете узнать больше об Ultra из официальной документации.