Есть много способов изучить React, но, пожалуй, один из самых интересных - это учиться через сборку проектов. Особенностью проектного обучения является то, что учащиеся могут анализировать проблему с разных сторон и находить различные возможные подходы. Это также приносит удовлетворение, поскольку вы можете видеть, как ваши строки кода могут напрямую повлиять на ваш проект. И последнее, но не менее важное: вы можете создать портфолио по мере обучения - два зайца одним выстрелом.
Вот список проектов React, которые могут помочь вам начать работу:
Проекты для начинающих: вам потребуется базовое понимание основ React
- Веб-сайт с прогнозом погоды: попрактикуйтесь в создании приложения React, реализации базового взаимодействия с пользователем и использовании Chart.js.
- Веб-сайт сокращения ссылок: потренируйтесь принимать простые входные данные от пользователей, вызывать сторонний API и отображать возвращаемое значение пользователю.
- Сайт для чтения RSS-каналов: потренируйтесь работать с RSS-потоками. Если вы решите реализовать синтаксический анализатор самостоятельно, вы также попрактикуетесь в синтаксическом анализе XML.
- Веб-сайт преобразователя температуры: потренируйтесь использовать вводные данные для взаимодействия с пользователями и выполнения основных математических расчетов. Эти навыки служат основой всех веб-сайтов, на которых взаимодействует пользователь.
Проекты среднего уровня:
- Галерея поиска изображений: вы попрактикуетесь в захвате вводимых пользователем данных, интеграции с внешним API (Unsplash), стилях и простом управлении состоянием. Эти навыки служат основой для производственных приложений, которые интегрируют сторонние API-интерфейсы с взаимодействием с пользователем.
- Веб-приложение для ежедневного отслеживания сна: изучите сквозную веб-разработку. Это включает интерфейс, серверную часть, пользовательский интерфейс, REST API и базы данных.
- Сайт с запоминанием словарного запаса: Практикуйтесь в разработке интерфейса с управлением состоянием и сравнением данных.
- Персональный веб-плеер Youtube: потренируйтесь записывать вводимые пользователем данные, интегрироваться с внешним API (YouTube), стили и простое управление состоянием. Эти навыки служат основой для производственных приложений, которые интегрируют сторонние API-интерфейсы с взаимодействием с пользователем.
Трудные проекты: это для продвинутых. Некоторые проекты требуют знания других языков.
- Мобильное приложение для выставления счетов и напоминаний об оплате: создайте умное полнофункциональное приложение для решения одной из самых сложных задач работы фрилансером - выставления счетов клиентам и получения оплаты.
- Любимый наблюдатель за акциями: вы станете более уверенным в фреймворках React и Django и, как следствие, в JavaScript и Python. Вы также узнаете, как использовать API для извлечения данных и самостоятельно создавать полный стек.
- Инструмент онлайн-фотоколлажей: потренируйтесь обрабатывать изображения, вводимые пользователями, и асинхронно обрабатывать основные задачи с изображениями. Вы также создадите веб-приложение с полностью отдельным интерфейсом, API, очередью задач и дополнительными компонентами хранилища.
Эти проектные идеи принадлежат DevProjects, бесплатному сообществу, в котором пользователи могут изучать программирование, создавая проекты. У нас есть постоянно растущая библиотека проектов на разных языках и с разными технологиями.
DevProjects - это способ для тех, кто изучает программирование, получить представление о том, как выглядят проекты, когда они входят в мир разработчиков. Для этого мы тесно сотрудничали со старшими разработчиками и наставниками, чтобы создать проекты, которые смогли преодолеть разрыв в обучении между теорией и реальным кодом. Каждая спецификация проекта ясна и ограничена по объему, отражая то, с чем разработчикам приходится работать как в составе команды разработчиков, так и в качестве фрилансера.
Какой ваш любимый проект на React?