Сегодня нас ждет одна из самых важных и часто используемых тем, это условный рендеринг. Представьте себе обычный веб-сайт. Вы заходите в интернет-магазин и сайт приветствует вас по имени. Вы администратор и у вас появляются кнопки для управления контентом. Вы не залогинены и вам показывают форму входа. Вся эта логика «показывать одно, но не показывать другое» […]
Сегодня мы закрепим наши знания о хуке useState, создав свой первый по-настоящему интерактивный компонент, классический счетчик. Это тот самый «Hello, World!» в мире интерактива на React и понимание этой механики откроет вам дверь к созданию любых динамических интерфейсов. Пишем компонент счетчика с кнопками «+» или «-» Вы уже познакомились с useState в прошлых уроках. Мы разобрали, […]
Мы подошли к одному из самых важных, фундаментальных и во всем нашем курсе по React. Если до этого мы в основном занимались статичным отображением данных, то сегодня мы вдохнем в наши компоненты жизнь. Мы научим их реагировать на действия пользователя, запоминать информацию и динамически меняться прямо у нас на глазах. Всё это станет возможным благодаря […]
Тема восьмого урока, это события в React. Мы научим наши компоненты «слышать» клики, ввод текста, отправку форм и множество других действий. Именно события превращают статичный сайт в живое, интерактивное веб-приложение. Представьте кнопку, которая ничего не делает или поле ввода, в которое нельзя написать… Звучит скучно, правда? Давайте оживлять. Обработка событий: onClick, onChange, onSubmit В обычном […]
До этого мы с вами работали с отдельными, статичными компонентами. Мы выводили заголовки, параграфы, кнопки. Но давайте посмотрим правде в глаза. Реальный мир веб-разработки состоит из данных и эти данные часто представлены в виде списков. Новостная лента в социальной сети, товары в интернет-магазине, сообщения в чате, пункты в навигационном меню. Всё это динамические списки. Сегодня, […]
В прошлых уроках мы с вами разобрались, что такое компоненты и научились создавать свои собственные «кирпичики» для нашего приложения. Мы уже видели, как здорово дробить интерфейс на независимые, переиспользуемые части. Но пока что наши компоненты были, скажем так, немного «одинокими». Они умели красиво отрисовываться, но не умели общаться друг с другом и были очень статичными. […]
Сегодня мы переходим часто упускаемых из виду аспектов разработки, это организации кода. Этот урок не о том, как писать JSX или использовать хуки, а о том, как сделать так, чтобы ваш проект не превратился в «спагетти-код», где невозможно ничего найти. Мы разберемся со структурой папок и import/export, которые скрепляют все компоненты в единое целое. Представьте, что […]
Мы подошли к одному из самых фундаментальных уроков во всём нашем курсе. Если JSX из прошлого урока, это «как мы пишем», то функциональные компоненты, это «что мы пишем». Готовься заложить прочный фундамент, на котором мы будем строить все последующие знания. В этом уроке мы с тобой оживим наш первый собственный кусочек интерфейса. Что такое функциональные компоненты? […]
Сегодня мы разберем одну из самых фундаментальных тем, это JSX. Именно он придает React-компонентам тот самый узнаваемый вид и делает разработку интуитивно понятной. Готовься познакомиться с синтаксисом, который сначала может показаться странным, но очень скоро станет твоим верным соратником. Что такое JSX? Давай начнем с самого главного, с определения. JSX это не HTML и не […]
В первом уроке мы разобрались, что такое React и почему он так популярен. Теперь пришло время перейти от теории к самой интересной части, на практике. Но чтобы начать писать код, нам нужно подготовить наше рабочее место. Представь, что ты решил заняться столярным делом. Прежде чем вырезать изящные узоры, тебе нужно организовать мастерскую, заточить инструменты и […]