BLACK FRIDAY

осталось 5 дней

Скидка 10% и подарок на выбор — при покупке одной программы
При покупке двух программ  — вторая со скидкой 50%
Проект модуля #1

Чат (Slack)

Веб-разработка на React

Напишите real-time приложение на React/Redux, используя AJAX, REST, websockets, React (с хуками) + Redux (@reduxjs/toolkit) + Formik

2-4
недели

Цель

Дипломный проект строится на технологиях, используемых в повседневной работе фронтенд-разработчиками в целом и React-разработчиками в частности. Его цель - показать спектр всех стандартных задач, с которыми придётся столкнуться в реальной жизни. Среди них: работа с веб-сокетами, взаимодействие с REST API, использование React (с хуками), Redux (через reduxjs/toolkit), организация роутинга на клиента, авторизация и аутентификация и, конечно же, сборка (webpack) и деплой.

React - наиболее востребованное решение для создания фронтенда уже много лет. Оставаясь простым в своём базовом использовании, он оброс большим количеством возможностей, которые важно использовать с умом. К ним относятся и хуки, и контекст, и прямое взаимодействие с DOM, и различные механизмы для оптимизации производительности. Большая часть этих тем задействована в проекте и отрабатывается на необходимом для закрепления уровне.

Но для создания по-настоящему больших и легко поддерживаемых приложений одного React недостаточно. Невероятно важно то как происходит управление состоянием. Несмотря на наличие подобного механизма внутри самого React, по разным причинам он используется только для небольших проектов или отдельных компонентов. Общее же состояние приложения хранится в библиотеках, подобных Redux. Сейчас в мире React стандартом для управления состоянием стала библиотека reduxjs/toolkit, которая не только соединяет Redux и React, но так же включает в себя большое количество необходимых дополнений, значительно упрощающих работу и сокращающих шаблонный код.

Программирование форм на фронтенде - сложная задача со множеством нюансов и, как правило, огромными "простынями" кода для реализации даже небольших форм. Валидация, Ajax, сетевые ошибки, запоминание состояния вводимых элементов, вывод ошибок – всё это требует кода, много кода. И количество кода пропорционально количеству полей в форме. К счастью, за годы существования React, сторонние разработчики создали множество важных дополнений и выработали удачные архитектурные подходы для работы с формами. Одна из таких библиотек (Formik) используется в этом проекте.

Для упрощения создания внешнего вида, в этом проекте используется библиотека react-bootstrap. Она состоит из элементов и компонентов бутстрапа переведённых на React. С её помощью гораздо быстрее создавать интерфейсы основанные на бутстрапе, так как готовые компоненты автоматически подставляют необходимые атрибуты (например доступность) и содержат в себе необходимую логику.

Никакая разработка не обходится без продакшена, а там где продакшен там эксплуатация. Сборка бандла, деплой, мониторинг ошибок в продакшене (Rollbar) – это далеко не полный перечень того, с чем придётся столкнуться не только в реальной жизни, но и в этом проекте.

Описание

Необходимо разработать аналог Slack-чата (очень упрощенную версию)

Hexlet Chat Hexlet Chat

Сколько стоят проекты?

Проекты входят в стоимость обучения на любом плане: самостоятельном, групповом и индивидуальном. Дополнительно платить не нужно.

Зачем проходить проекты?

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

Проекты — портфолио программиста. Их код останется в вашем аккаунте на GitHub и будет преимуществом при поиске работы.

Чтобы узнать о том, что такое проекты и в чём их польза, прочитайте нашу статью «Анатомия проектов Хекслета».

Что делать, если возникли трудности во время выполнения проекта?

Задавайте вопросы в разделе «Обсуждение» на странице шага, на котором возникли трудности, или вашему наставнику. Изучите вопросы других студентов в «Обсуждениях»: там собрана большая база знаний, ей можно и нужно пользоваться. Попросите о помощи в нашем Slack-чате в канале #hexlet-projects.

Кто проверяет проекты?

Автоматизированные тесты и линтер. В групповом и индивидуальном форматах наставник дополнительно проверит то, что тестами проверить невозможно (архитектуру проекта, правильность именования, удачность решений), и проведёт код-ревью, чтобы сделать проект ещё качественнее.

У меня другой вопрос

Нажмите на виджет в правом нижнем углу экрана и поищите ответ в нашей справке. Или сразу пишите на support@hexlet.io — вам ответит живой человек из команды Хекслета.