8 проектов React, которые нужно построить в 2023 году

Если вы хотите хорошо владеть React, создание проектов – один из лучших способов это сделать.

Я собрал восемь различных проектов, которые не только покажут вам, что можно сделать с React, но и дадут вам вдохновение по созданию программ.

Кроме того, я предоставлю вам все инструменты, необходимые для эффективной разработки каждого проекта из списка.

Давайте начнем!

Приложение Todo

Если вы хотите начать создание проектов, нет лучшего стартового места, чем простое приложение для дел.

Приложение todo будет иметь базовую функциональность CRUD, то есть вы можете создавать, читать, обновлять и удалять todo. Todos можно заменить любым типом содержимого. Фактически многие программы, которыми мы пользуемся каждый день, можно считать прославленными программами для дел.

Преимущество создания программы Todo состоит в том, что всю программу можно создать за короткое время. Если вы можете создать приложение todo без каких-либо руководств, это хороший тест, чтобы проверить ваши навыки работы с React.

Screen-Shot-2023-01-03-at-12.37.07-PM
Приложение TodoMVC

Программы Todo – это отличный проект для начала, поскольку вам не нужны сторонние библиотеки для их создания. Вы можете сделать свое приложение todo настолько сложным, как вам нравится, что поможет вам обрести уверенность в концепциях, которые вы хотите изучить. Хотите добавить аутентификацию или базу данных в программу? Не стесняйтесь это делать! Вы действительно можете сделать это настолько простым или сложным, как вам вздумается.

Стек для использования

  • Приложение Barebones React
  • Основные функции React (состояние, контекст и т.п.).
  • Это!

Личный блог

На шаг вперед от базовой программы Todo есть веб-сайт блога.

Если вы хотите написать Утинкакоторый является популярным стилем написания и форматирования текста, ваш блог, вероятно, будет состоять из нескольких файлов Markdown (.md).

Если вы хотите, чтобы содержимое было включено локально в проект, чтобы немного усложнить его, вы можете попытаться получить его из внешнего источника, например CMS (система управления содержимым), например Sanity или Contentful.

Screen-Shot-2023-01-03-at-1.11.07-PM
Набор для начинающих следующего блога (https://next-blog-starter.vercel.app/)

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

Хорошим выбором рамки для этого блога может быть Next.js или Гетсби. Оба они идеально подходят для создания текстовых веб-сайтов, таких как блоги, поскольку они представляют собой фреймворки, которые отображаются на сервере, и дают вам лучший SEO. Это сравнивается с традиционным клиентским приложением React (например, созданным с помощью Create React App).

Наш стек будет состоять из одного из этих фреймворков React плюс трансформатора для преобразования нашего содержимого расценки в HTML при создании нашего сайта. Хорошим выбором для трансформации нашего содержимого уценки является remark пакет NPM.

Если вы хотите создать еще более впечатляющий блог с динамическим содержимым, вы можете рассмотреть возможность использования MDX. MDX очень похож на обычную разметку, но также позволяет включать ваши собственные компоненты React в разметку.

Чтобы использовать MDX, вы должны использовать пакет, как next-mdx-remote если вы используете Next.js. Равнина mdx-js/mdx пакет также отлично работает.

Стек для использования

  • Next.js/Gatsby
  • Markdown или MDX (remark или mdx-js/mdx)
  • CMS (Contentful или Sanity)

Краткое замечание: для каждого из этих проектов я не буду говорить о стиле. Лично я предпочитаю использовать простой CSS в форме TailwindCSS. Вы можете перейти на сайт Tailwind, чтобы увидеть, как легко настроить это для любой системы React, которую вы используете.

Приложение для электронной коммерции

Следующим шагом в нашем проекте блога является приложение для электронной коммерции.

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

Опять же данные могут быть получены локально или получены из CMS во время создания. Приложение для электронной коммерции отличается тем, что оно позволяет нам работать с определенным сервером.

изображение-15
Программа для электронной коммерции Next.js

Если вы хотите, чтобы ваши клиенты покупали товар через Stripe, например вы можете настроить a вебхук который будет получать событие от Stripe, когда клиент приобретет определенный товар. Это важно для управления такими вещами как инвентарь ваших продуктов.

Чтобы легко писать код на стороне сервера, вы можете использовать маршрут API, чтобы вам не нужно было создавать полный проект Node.js. Эта функция будет обрабатывать различные события, происходящие при оформлении заказа или после оформления заказа.

Кроме того, если вы не хотите прикасаться к любому серверному коду, вы можете избежать stripe пакет npm целиком и просто используйте Полоска кассы или a Платежная ссылка Stripe.

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

Next.js содержит особый тип страницы под названием an маршрут API, который позволяет выполнять такие действия на сервере, как аутентификация, веб-перехват, чтение и запись в базу данных и т.д. Кроме того, мы коснемся некоторых решений, таких как Firebase, которые вообще не требуют создания серверной части!

Стек для использования

  • Next.js
  • Stripe (с использованием маршрутов API для веб-хуков)
  • CMS (Contentful или Sanity для хранения продуктов)

Клон Reddit, сконцентрированный на обмене ссылками или очень простыми публикациями, является хорошим шагом по сравнению с нашим приложением Todo.

ezgif-4-3e6d6becfc
Клон Reddit, созданный с помощью React

Мы все еще создаем, обновляем и удаляем данные, но на этот раз они будут сохранены в базе данных. Мы можем разрешить пользователям добавлять различные типы содержимого, например видео, ссылку или краткую публикацию. Мы можем использовать Firebase для нашего проекта, чтобы начать работу, что даст нам База данных Firestore.

Наша база данных Firestore будет состоять из простой коллекции, которая будет хранить все отдельные публикации, созданные пользователем. Мы можем дальше развивать его, позволяя другим пользователям добавлять комментарии и брани в публикации.

Еще более развитое приложение будет включать аутентификацию. к счастью Firebase Auth делает это очень просто. Мы также можем добавлять бранные слова к отдельным комментариям и ответам на комментарии для наших тем комментариев.

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

Стек для использования

  • React (загружено с Vite)
  • React Router (инсталляция react-router-dom)
  • База данных Firestore (от Firebase)
  • Firebase Auth

Приложение для чата (клон Discord)

Чтобы добавить в наше приложение Reddit, мы могли бы превратить его в нечто вроде Discord, отображая сообщения в реальном времени.

ezgif-4-bd75470d3f
Клон Discord, созданный с помощью React

Если мы изменим сообщения на цепочки, теперь у нас будет программа чата, где разговор продолжается.

Как и клон Reddit, пользователи все еще могут добавлять любой тип медиа, который им нравится. Хорошим прикосновением было бы добавить предварительный просмотр ссылок, чтобы, когда пользователь делится ссылкой, например видео YouTube, другие пользователи могли получить небольшую карточку, отображающую то, на что ссылается изображение, прежде чем пользователь щелкнет на нем. Там библиотека называется react-tiny-link что позволяет вам это сделать.

Мы все еще можем использовать Firebase для этого проекта. Это хороший вариант использования базы данных Firebase, чтобы нам не нужно было обновлять или перезагружать страницу, чтобы увидеть новые сообщения.

Кроме того, мы можем добавлять разные роли для наших пользователей в Discord. В настоящем приложении Discord есть модераторы с большим контролем над другими пользователями. Одним из примеров функции может быть добавление функции запрета для удаления пользователя из определенного канала или сообщества.

Стек для использования

  • React (загружено с Vite)
  • React Router (инсталляция react-router-dom)
  • react-tiny-link
  • База данных Firebase в реальном времени
  • Firebase Auth

Приложение Messenger (клон WhatsApp)

Ответвлением этого типа программы реального времени будет программа в стиле мессенджера, как у WhatsApp.

ezgif-4-4e59d05ac0
Клон WhatsApp, созданный с помощью React

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

Хорошим прикосновением было бы добавить уведомление, когда кто-то посылает вам сообщение. Это еще один пример программы, для которой требуется функция данных в реальном времени из вашей базы данных. Firebase всегда является хорошим вариантом для этого.

Если Firebase надоест, вы можете попробовать Supabase, которая очень конкурентоспособной альтернативой также с функциями базы данных в реальном времени, но поддерживается Postgres вместо Firestore.

Стек для использования

  • React (загружено с Vite)
  • React Router (инсталляция react-router-dom)
  • Надбаза

Что если вместо того, чтобы иметь программу, где один человек общается непосредственно с другим человеком в очень ограниченном пространстве, вы хотите наоборот, где каждый может взаимодействовать с кем угодно!

Отличным примером такого типа приложения может быть Twitter.

Twitter-gif
Клон Twitter, созданный с помощью React

Twitter – это приложение, для которого нужен канал, а также популярная страница в ленте пользователей. Пользователь сможет увидеть все публикации людей, на которых он подписался. Но на странице трендов они увидят все самые популярные публикации по всему веб-сайту.

Чтобы определить, какие публикации наиболее популярны, вы добавите возможность поставить «нравится» (обозначить сердцем) определенной публикации, а также повторно поделиться ею, что позволит добавлять публикацию или связывать ее с другим пользователем. Наконец, вы хотите позволить пользователям непосредственно отвечать на другие публикации (например, функция «цитировать твит» в Twitter).

И еще одна фундаментальная функция, которую можно добавить в каждую программу, о которой мы рассказывали до этого момента, — это поиск. В нашем клоне Twitter пользователи, вероятно, захотят иметь возможность искать разных пользователей, за которыми следует следить, а также публикации на основе их содержимого.

Одним из недостатков Firebase является то, что у него нет лучших инструментов для поиска и нелегко выполнять запросы, основанные на определенном ключевом слове. Это один из случаев Надбаза будет лучшей альтернативой.

Стек для использования

  • React (загружено с Vite)
  • React Router (инсталляция react-router-dom)
  • Supabase или Firebase

Программа для обмена видео (YouTube/TikTok Clone)

Последний интересный проект в этом списке – программа обмена видео, например YouTube или TikTok.

Оба приложения имеют очень похожие функции: YouTube сосредотачивается в основном на длинном видеоконтенте, а Tiktok – в основном на суперкоротких видео продолжительностью до минуты.

Обе платформы используют функцию бесконечной прокрутки, независимо от того, прокручиваете ли вы предложенные или рекомендованные видео. Сам TikTok – это, пожалуй, только одна большая лента бесконечной прокрутки.

ezgif-4-b958b9f166
Клон Tiktok, созданный с помощью React

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

Важнейшей функцией для TikTok и YouTube является потоковое видео. Чтобы разрешить пользователям загружать собственное содержимое, вам нужна служба, включающая загрузку API. Некоторые хорошие варианты в этой области есть Поток CloudflareVideo.js или Mux.

Все эти инструменты предоставляют вам проигрыватель, а также API, которые будут обрабатывать загрузку видео, которые затем можно будет опубликовать на сайте.

Я бы лично создал это приложение, используя собственный сервер и базу данных. Я бы, наверное, выбрал Призма как ORM (объектно-реляционное отображение) для взаимодействия с базой данных, которая будет a MySQL база данных, управляемая Planetscale.

Стек для использования

  • Next.js (с маршрутами API для взаимодействия с базой данных)
  • The next-auth пакет (чтобы добавить Google Auth среди других поставщиков авторизации)
  • Поток Cloudflare или Video.js (как наш видеопроигрыватель и для размещения наших видео)
  • Prisma (как наш ORM)
  • MySQL (под управлением Planetscale)

Хотите построить все эти проекты шаг за шагом со мной?

Надеемся, эти идеи проектов вдохновят вас на то, что строить.

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

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

Просто нажмите ссылку ниже, чтобы начать!

Нажмите, чтобы присоединиться к React Bootcamp
Нажмите, чтобы присоединиться к React Bootcamp

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *