Будущих студентов курса "React.js Developer" приглашаем записаться на бесплатный демо-урок по теме "Пишем приложение на React+Redux".А также подготовили для вас перевод полезного материала.   Если вы только начали изучать React, для отработки основных концепций этого фреймворка можно создать простое приложение. Первое, что приходит в голову, — это приложение для составления списка дел или покупок. С него и начнем. Основные концепции React изложены в официальной документации на сайте, а в предыдущих записях моего блога можно найти ссылки на другие руководства по работе с React. Запустите VS Code или любой другой редактор кода. Для создания React-приложения наберите в терминале команду: Затем смените директорию: Запустите сервер: Откройте в браузере адрес http://localhost:3000/, и вы увидите следующее окно: Давайте посмотрим, какие элементы интерфейса нам нужно создать, и приступим к разработке. 1. Сначала создадим поле для ввода пункта в список. 2. Затем — кнопку для сохранения пункта. 3. Наконец, создадим список для отображения пунктов с возможностью удалять пункты и помечать их как выполненные. Для разработки такого приложения нужно изучить работу с хуками, способы создания базовых форм, работу с массивами, объектами, стрелочными функциями, оператором расширения массива и пропсами. Поработаем с кодом в файле App.js. Мы будем использовать функциональные компоненты и хук useState() для определения состояния. Создадим форму: Вот как будет выглядеть весь наш код после создания формы: Объясним вышенаписанный код. Мы создали переменную состояния item, в которой хранится значение элемента списка, введенного пользователем. Затем мы создали еще одну переменную состояния list, в которой хранится коллекция элементов списка в виде массива. Мы создали стрелочную функцию handleChange для изменения состояния item каждый раз, когда пользователь вводит новое значение в форму. Мы изменяем состояние с помощью setItem и назначаем его в качестве целевого значения. Мы создали еще одну функцию handleSubmit для обновления массива элементов списка каждый раз, когда пользователь вводит новый пункт. У каждого пункта есть следующие свойства: уникальный id, который генерируется как UUID, item и complete. Свойство complete является логическим состоянием: если ему присвоено значение true, пункт в списке помечается как выполненный, а значение false присваивается невыполненным пунктам. Теперь создадим новый компонент Item.js. Для этого напишем такой код: Чтобы удалять пункты, мы будем отфильтровывать пункт, который надо удалить, сравнивая пункты по их id. После удаления пункта остальные пункты продолжат отображаться. Чтобы помечать пункты как выполненные, мы будем перебирать все элементы массива в переменной list, сравнивать их по id и менять значение состояния complete для соответствующего элемента. Оформите приложение по своему вкусу. Можно воспользоваться стилизованными React-компонентами, которые доступны тут. Вот как будет выглядеть наше приложение: Демоверсия приложения. Репозиторий на GitHub. Что еще можно сделать: 1. Добавить локальное хранилище. 2. Добавить серверную часть на основе Firebase. 3. Добавить функции регистрации и входа. Предложения приветствуются. Узнать подробнее о курсе "React.js Developer".Записаться на открытый урок "Пишем приложение на React+Redux".  Редактор