React с Удовольствием

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

Давайте будем честными. Учить React - это сложно.

За последние несколько лет React стал неотъемлемым навыком для фронтенд-разработчиков. Почти каждая вакансия указывает его как предпосылку!

Однако, если вы пытались изучить React, то знаете, что это может быть запутанным и ошеломляющим процессом. Столько всего нужно узнать, и большинство учебных материалов предполагают наличие большого объема предварительных знаний и контекста.

Может быть, вы попали в 'пекло учебников', следуя за одним учебником за другим, но так и не достигли конкретного прогресса, как мышь в беговом колесе. Вы построили столько приложений 'Список дел', но когда пытаетесь создать свой собственный проект, вы не знаете, с чего начать.

Вы хотите научиться React, но сталкивались с трудностями. 

Я хочу помочь.

В течение последних двух лет я упорно работал над созданием идеального курса для начинающих по React.

Курс 'The Joy of React' - это интерактивный курс. Вы не просто будете сидеть и смотреть, как я пишу код. Вас ждут множество упражнений, проектов, вдохновленных реальными задачами, а также веселые мини-игры и активности. Этот курс не похож на любой другой, который вы когда-либо проходили (если только вы не прошли мой курс по CSS, в таком случае, он довольно похож на него).

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

Мы не будем учить только React; мы рассмотрим все, что вам нужно знать, чтобы успешно развиваться как разработчик React, включая современный синтаксис JavaScript и множество полезных инструментов и пакетов из сообщества.

Правда в том, что использование React приносит удовольствие.

Как только вы разберетесь в нем, React становится настоящей мечтой. Я пробовал большинство популярных фреймворков на JavaScript, и ничто другое не дает мне такое ощущение силы и уверенности, как React.

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

Сначала нам нужно построить надежный фундамент, чтобы по-настоящему понимать конвенции и лучшие практики React. Затем мы увидим, как 'секретное оружие' пакетов из сообщества расширяют наши возможности.

Это рецепт для непрерывного состояния 'потока'. Это чистое удовольствие, и я хочу, чтобы вы это испытали.

Позвольте мне рассказать вам, как курс 'The Joy of React' сделает это возможным.

Модуль 1: Основы React

В этом первом модуле мы представляем React и создаем общее понимание, которое мы будем использовать на протяжении всего курса.

Мы узнаем все о JSX, компонентах и свойствах (props). Мы узнаем, как выполнять итерации и условное отображение в React. Также мы рассмотрим стилизацию в React.

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

Мы уходим глубоко в детали в этом модуле. К концу модуля 1 вы поймете, в чем разница между JSX и языком шаблонов, что такое элемент React, почему необходимы ключи... и даже создадите свой собственный мини-React без состояния с нуля, чтобы точно знать, как он работает внутри!

Модуль 2: Работа с состоянием

Настоящая магия начинается с состояния. Состояние React позволяет нам создавать динамичные приложения, которые оживляются.

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

Мы также углубим наше понимание того, как работает React. Мы узнаем, почему React иногда кажется гораздо более сложным, чем другие фреймворки. Мы поймем важную роль, которую играют экземпляры компонентов React. И мы узнаем, как использовать bewt практики, такие как поднятие состояния.

В этом модуле много интересных упражнений. Мы создадим несколько мини-игр и посмотрим, как создать минимальную версию моего проекта 'Генератор градиентов'.

Модуль 3: React Hooks

В 2019 году React был революционизирован с добавлением хуков (hooks). Хуки позволяют нам 'подключаться' к внутренностям React.

В этом модуле мы выходим за рамки хука useState и рассматриваем такие вещи, как:

• Управление побочными эффектами с помощью хука useEffect.
• Захват ссылок на DOM с помощью хука useRef.
• Оптимизация производительности наших приложений с использованием useMemo и useCallback.
• Создание собственных абстракций с помощью собственных хуков.
• Получение данных из сети с использованием Fetch и стороннего хука useSWR.

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

Модуль 4: Проектирование компонентов API

На этом этапе курса мы рассмотрели большую часть API React, но наш акцент был сконцентрирован на том, как все это работает. В этом модуле наш акцент начинает меняться.

Создаваемые нами компоненты должны приносить радость использования: они должны быть легкими для понимания, компонуемыми и предоставлять правильное количество гибкости. Еще более важно, они должны предлагать прекрасный пользовательский опыт с точки зрения доступности, удобства использования и производительности.

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

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

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

Модуль 5: Практики радости

Я начал работать с React в 2015 году и узнал так много по пути. Моя цель с этим модулем - помочь вам пропустить несколько лет экспериментов и сразу перейти к паттернам и практикам, которые приносят удовольствие.

В разработчическом сообществе мы много говорим о 'Лучших практиках', но на самом деле нет такой вещи, как 'лучшая практика'. Все зависит от того, что вы оптимизируете! Это все компромиссы.

В этом модуле я поделюсь своими любимыми 'Практиками радости', паттернами проектирования и привычками, которые я совершенствовал в течение 8 лет, вещами, которые делают работу с React приятной.

Вот несколько примеров того, что мы рассмотрим:

• Принцип наименьших привилегий и почему я дарю компонентам как можно меньше знаний/власти.
• Различие между родителями и владельцами и как мы можем упростить наш код и улучшить производительность сразу же.
• Магия Immer и как он делает сложное состояние намного менее пугающим.
• Настоящее понимание вещей, таких как элементы React, ссылки (refs) и ключи, и как глубокое понимание открывает совершенно новые паттерны, которыми мы можем воспользоваться.

Модуль 6: React в полном стеке

В этом модуле мы уходим за пределы браузера и исследуем, как React работает в контексте полного стека, используя Next.js.

Next.js - это мета-фреймворк, построенный поверх React. Он существует с 2016 года, но недавно был полностью перестроен с нуля. В мае 2023 года Next.js выпустил свой новый маршрутизатор 'App' из бета-версии и начал новую эру в мире React.

В этом модуле мы узнаем, как создавать производительные приложения полного стека с использованием последней версии Next.js. Мы рассмотрим все новые технологии, включая:

• React Server Components
• Suspense
• Потоковый серверный рендеринг с выборочной гидратацией
• Маршрутизатор Next.js App

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

Это модуль, где все объединяется. Используя все, что мы узнали в первых 5 модулях курса, мы создадим динамичные приложения React полного стека, от инициализации проекта до развертывания.

Завершающие проекты 

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

Проект 1: Игра со словами 

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

Основное внимание в этом проекте уделяется знакомству с состоянием React, но он также ставит перед нами некоторые действительно интересные вопросы относительно структуры приложения. Вам придется решить, как вы хотите, чтобы состояние передвигалось через приложение, и рассмотреть разные компромиссы!

Проект 2: Площадка для уведомлений (Toast Playground)

 Мы создадим многоразовый компонент <Toast> низкого уровня!

Это намного сложнее, чем может показаться. Созданный нами компонент будет соответствовать всем правилам доступности, с акцентом на удобстве использования и пользовательском опыте. Мы также уделим много внимания проектированию его API, убедившись, что оно является композируемым и гибким.

Мы также создадим мини-приложение, которое поможет нам настраивать и генерировать уведомления.

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

Проект 3: Интерактивный блог на основе MDX 

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

В этом последнем проекте мы создадим идеальный блог. Вы узнаете, как настроить все так, чтобы у вас была полная мощность React внутри контента.

Бонусный модуль: Анимации макета с Framer Motion 

Framer Motion - один из самых невероятных инструментов в экосистеме React. В этом бонусном модуле вы узнаете, как использовать его 'layout projection' движок для создания поистине замечательных, кажущихся невозможными анимаций макета.

Это честно говоря, один из лучших 'секретных оружий' в моем арсенале, и я в восторге, что могу показать вам, как я его использую!

Бонусная особенность: Подготовка к техническому собеседованию React 

Когда речь идет о найме на работу в качестве разработчика React, одной из самых сложных частей является техническое собеседование.

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

Эта бонусная особенность будет выпущена позже в 2023 году.