Практика по 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 API и отобразите их в списке. Вы можете использовать статические данные для этого.

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

Для дополнительной сложности добавьте страницу с описанием вопроса.

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

Вы должны будите затронуть вот эти темы:

загрузка звуков [Webpack, JS] инициализация состояний в React использование стрелочных функций интервальные таймеры в JS как вызвать действие после установки состояния

На этом все. Удачно вам попрактиковаться на React!