Узнайте, как создавать end-to-end строго типизированные приложения React, которые позволят вам меньше сосредоточиться на написании хрупкого, универсального кода для извлечения данных а больше на функциональности, которая важна для ваших пользователей.
Создание приложения React является сложным. Вы должны не только контролировать, как различные элементы пользовательского интерфейса будут отображаться на странице, но также должны быть уверены, что они будут отлично смотреться на разных типах экранов, а также вам необходимо управлять извлечением самых разнообразных данных, необходимых для подачи всем этим компонентам. Вам также необходимо управлять входом пользователя в систему, SEO-оптимизацией и, кроме того, развертывать ваш сайт таким образом, чтобы он легко масштабировался.
К счастью, за последние несколько лет было разработано несколько удивительных инструментов и сервисов, которые позволят вам абстрагироваться от большей части этого хрупкого процесса написания кода. В этом курсе я покажу вам, как положиться на проверенные в бою библиотеки и настроить код, который будет автоматически обновляться по мере роста и развития вашего проекта.
Преимущества
GraphQL
Строгая типизация с GraphQL
Узнайте, как использовать GraphQL, чтобы указать, как ваши данные выразительно связаны друг с другом без кода.
Apollo Hooks
Выразительная выборка данных с помощью Apollo Hooks
Используйте Apollo Hooks на вашем клиенте для управления всеми вашими выборками данных и для хранения и агрегирования всех ваших данных.
GraphCMS
GraphCMS CMS как бэкэнд для хранения данных и изображений.
Zeit Now
Простое развертывание внешнего интерфейса с использованием конвейера кода
Auth0
Легкая авторизация с Auth0
Next.js
SEO оптимизация с нуля
Динамически отображаемые страницы на стороне сервера, оптимизированные для SEO с помощью Next.js
Typescript
Устраните ошибки типа с помощью Typescript
Код с достоверной статической типизацией немедленно проверяет, что переменные, функции и свойства используются так, как они должны.
GraphQL Code Generator
Используйте GraphQL Code Generation для создания всех ваших типов данных с помощью одной команды.
Что мы строим
Мы изучим все эти лучшие практики, создав приложение для обмена рецептами под названием Next Chop.
В этом курсе:
- Создайте typescript базу Next.js
- Добавьте Styled Components и Ant Design
- Создайте шаблоны макета, хедера и футера
- Добавьте Apollo GraphQL и GraphCMS Backend
- Добавьте GraphQLCodeGen для строго набранных моделей
- Создайте список рецептов
- Создайте пользовательские оповещения
- Auth0 и React Hooks для управления состоянием пользователей
- Добавьте кнопку «Мне нравится»
- Страница «Мои рецепты и избранное»
- Добавьте страницу создания и обновления рецептов
- Добавьте кнопку удаления рецепта с подтверждением
- Защитите бэкэнд с помощью GraphQL Proxy
- Автоматизированное безсерверное развертывание с Zeit Now