Практика по React

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

Варианты этого пользовательского интерфейса можно найти по всему интернету - Twitter, Facebook, Pinterest, Airbnb и т. д. Это хороший блок куда вы сможете отобразить изображение + некоторые данные.
Погодное приложение
Покажите прогноз погоды на 5 дней, где каждый день будет показывать высокие и низкие температуры с изображением для солнечного/дождливого/облачного/снежного дня.

Вы можете заметить, что день из погоды очень похож на социальную карту.
Для дополнительной практики, вот несколько способов расширить приложение:
- Добавьте возможность кликнуть на день и посмотреть его почасовой прогноз.
- Добавьте React Router в проект (npm installact-router) и следуйте краткому руководству, чтобы начать работу и добавить маршруты.
- Зарегистрируйтесь в Open Weather Map для получения бесплатного API ключа, а потом получите реальный 5-дневный прогноз и введите эти данные в свое приложение.
- Хотите стать действительно модным? Добавьте графическую библиотеку, например vx, и следуйте приведенным здесь примерам, чтобы добавить график температуры в течение недели или дня.
Калькулятор

Вы наверное уже знаете, как они работают. Сложение, вычитание, умножение, деление ... Нажатие чисел или операции должны выполнить действие.
Для дополнительной сделайте вывод и через клавиатуру. Вам не нужно добавлять элемент <input>, чтобы это работало. Если вы используете <input>, сделайте так, чтобы пользователю не нужно было фокусировать элемент для ввода тексты в него.
Поиск Хакерских Новостей
Существует сайт Hacker News, а затем Algolia Hacker News Search. Оба являются хорошими практическими проектами.

Было сказано, что все веб-приложения в основном просто списки. Это приложение даст вам некоторую практику со списками компонентов, которые будут немного сложнее, чем to do листы.
Сначала используйте статические данные, а затем, если вы хотите улучшить приложение, извлекайте их истории из API. Algolia HN Search имеет REST API, а Hacker News раскрывает истории через API Firebase.
Вы можете пойти еще дальше и воспроизвести их структуру маршрутизации с помощью React Router.
Страница Github Issues
Сделайте упрощенную версию страницы Github Issues. Вот пример. Чтобы страница не была объемная, просто сосредоточьтесь на реализации списка и не делайте поиск, фильтрация, звездочки и т. д.

Начните извлекать открытые вопросы из Github API и отобразите их в списке. Вы можете использовать статические данные для этого.
Затем добавьте элемент управления нумерацией страниц, чтобы разрешить навигацию по всему списку. Возможно, вам нужно будет добавить React Router, чтобы вы могли переходить непосредственно к определенной странице.
Для дополнительной сложности добавьте страницу с описанием вопроса.
Метроном
Сделайте метроном, который должен будет выглядеть примерно так:

Вы должны будите затронуть вот эти темы:
загрузка звуков [Webpack, JS] инициализация состояний в React использование стрелочных функций интервальные таймеры в JS как вызвать действие после установки состояния
На этом все. Удачно вам попрактиковаться на React!