Сегодня нас ждет один из самых интересных уроков во всем курсе. Мы будем говорить о маршрутизации. До этого момента все наши приложения были сосредоточены на одном экране, на одной «странице». Мы управляли состоянием, меняли интерфейс, но не переходили между разными представлениями, как в классических веб-сайтах. Но что, если мы хотим создать многостраничное приложение, например, интернет-магазин […]

Читать полностью

Мы с вами уже прошли большой путь, изучив основы, компоненты, props и хук useState, который стал нашим верным спутником в управлении состоянием компонентов. Но сегодня мы переходим на новый уровень. Мы будем говорить о состоянии, которое становится слишком сложным для useState. Представьте, что вы строите дом. Пока вы кладете кирпичи, вам нужен лишь молоток (useState). Но […]

Читать полностью

Сегодня на уроке 20-м мы будем говорить о проблеме, с которой сталкивается каждый React-разработчик и об изящном способе её решения с помощью хука useContext. Если вы дошли до этого урока, вы уже отлично владеете основами: компоненты, состояние с useState, побочные эффекты с useEffect. Вы видели, как данные передаются сверху вниз по дереву компонентов через пропсы. Это фундаментальный […]

Читать полностью

Сегодня нас ждет очень важная тема, которая является основой в построении по-настоящему динамичных и отзывчивых приложений. Мы поговорим о том, как заставить компоненты «общаться» друг с другом, когда они не находятся в прямых отношениях «родитель-потомок». Эта техника называется «подъем состояния» (Lifting State Up). Если вы когда-нибудь задумывались: «Как мне синхронизировать два разных компонента, чтобы изменение […]

Читать полностью

Мы с вами уже прошли большой путь, изучили основы, состояние, эффекты и контекст. Вы стали настоящими повелителями компонентов! Но по мере роста вашего приложения вы начнете замечать одну повторяющуюся проблему, разный код в разных компонентах начинает делать одно и то же. Логика, например, загрузки данных из API или подписки на события, кочует из одного файла […]

Читать полностью

Мы уже изучили множество концепций, но сегодня нас ждет особенный инструмент, хук useRef. Он не такой «громкий», как useState или useEffect, но в умелых руках творит настоящие чудеса. Готовься узнать, как напрямую «общаться» с DOM-элементами и хранить данные между рендерами, не вызывая при этом повторный рендер. Зачем нужен useRef ? Представь себе ситуацию: тебе нужно программно установить фокус […]

Читать полностью

Сегодня у нас настал тот самый момент, когда теория встречается с практикой. Мы прошли долгий путь, изучили JSX, состояние, хуки, работу с формами и событиями. Теперь пришло время объединить все эти знания в одном красивом и функциональном проекте. В этом уроке мы с вами создадим приложение для отображения погоды, которое будет получать актуальные данные из […]

Читать полностью

Мы с вами уже познакомились с хукoм useEffect и узнали, как выполнять побочные эффекты в функциональных компонентах. Но сегодня мы поднимем завесу над самой запутанной частью этого хук, массивом зависимостей. Почему эта тема так нужна? Потому что неправильное использование зависимостей, это одна из самых частых причин багов в React-приложениях. Эффекты могут выполняться слишком часто, «тормозить» […]

Читать полностью

Мы уже прошли немалый путь, научились создавать компоненты, управлять состоянием с помощью useState и даже подружились с хуком useEffect для выполнения побочных эффектов. Сегодня мы поднимем наши навыки на совершенно новый уровень. Мы будем учиться «разговаривать» с внешним миром! Подавляющее большинство современных веб-приложений не живут в вакууме. Они получают данные из социальных сетей, показывают актуальные новости, загружают списки […]

Читать полностью

Мы уже с вами изучили основы функциональных компонентов и управление состоянием с помощью useState. Но до сих пор наши компоненты были, скажем так, немного «замкнутыми в себе». Они умели хранить данные и отрисовывать интерфейс, но их взаимодействие с внешним миром было сильно ограничено. А что, если нам нужно получить данные с сервера? Или подписаться на […]

Читать полностью