Есть много способов изучить 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?