Текстовый туториал по React.js и Redux на русском / Хабр

(у учебника по Основам React вышло второе издание, Redux-учебник в процессе обновления)


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

Курс про Redux попал в официальную документацию.

Оба руководства бесплатны и выложены на gitbook (можно скачать PDF, ePub, mobi).

В текстах нарочно участвуют термины переведенные на русский (например, состояние), английские (state), либо английский термин написанный по-русски — стейт. Считаю это допустимым, и даже более того, удобным для читателя.

React.js для начинающих

В данном курсе затронуты основы «реакта». Результатом будет небольшое приложение, в котором пользователь сможет добавить новость в ленту новостей.

Здесь специально не рассматривается webpack, hot module replacement и так далее. Реакт — это библиотека, значит достаточно просто добавить скрипт на страницу и начать писать на нем.

Чуть подробнее чем остальные темы, в курсе разобрана работа с формой (контролируемые и неконтролируемые компоненты). Остальные разделы — минимум текста. Не забыты propTypes.

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

В планах написать об анимациях.

Код — ES5. Прямая ссылка на курс (PDF, ePub, mobi).

Redux

В данном курсе наоборот, добавлены webpack и поддержка HMR, разработка становится более комфортной, но, возможно, несколько запутанной на стадии подготовки, если читатель никогда не работал с webpack и babel.

Результатом будет мини-приложение, которое позволить получить фото из VK за разные года, отсортированное по «лайкам». Освещены запросы выполнения ajax-запросов в частности и «как вообще это работает», если вы решили использовать Redux подход.

Для тех, кто только выбирает flux-архитектуру, или вообще еще не работал с react, хочу сказать, что redux подход мне очень симпатизирует. На мой взгляд он хорошо структурирует код и делает его читаемым. Даже если вы откроете «слегка подзабытый» проект, то вам не потребуется много времени на то, чтобы вспомнить что и как работает.

В планах — роутинг, оптимизация сборки.

Код — ES2015/ES7. Прямая ссылка на курс (PDF, ePub, mobi).

В качестве заключения

Буду рад услышать критику по тексту, по коду и вообще. Какие главы плохо написаны (если вы «бывалый»), либо какие главы вам были не понятны (если вы «начинающий»)?

Какие вопросы были не затронуты в туториалах, но на которые вы жаждите узнать ответ?

Спасибо за внимание.

Начало работы

В данной странице представлен обзор документации React и связанных ресурсов.

1.1.1 Попробовать React

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

1.1.1.1 Онлайн площадки

Если вы просто хотите побаловаться с React, то можете использовать онлайн-площадку для кода.
Попробуйте пример Hello World на CodePen или
CodeSandbox.

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

1.1.1.2 Добавить React на веб-сайт

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

1.1.1.3 Создать новое React приложение

Для старта проекта React отличным вариантом может служить простая
HTML-страница со <script> тегами. Понадобится всего минута для настройки!

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

1.1.2 Изучить React

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

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

1.1.2.1 Первые примеры

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

1.1.2.2 React для начинающих

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

1.1.2.3 React для дизайнеров

Если вы работаете в сфере дизайна, данные ресурсы — отличное место для начала.

1.1.2.4 JavaScript ресурсы

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

Мы рекомендуем посмотреть этот обзор JavaScript, чтобы проверить свой уровень знаний.
Это займет у вас от 30 минут до часа, но зато вы будете чувствовать себя более уверенно, изучая React.

1.1.2.5 Практическое руководство

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

1.1.2.6 Пошаговое руководство

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

1.1.2.7 Мышление в React

Многие пользователи React считают, что чтение раздела «мышление в React» окончательно
«щелкнуло» по ним. Вероятно, это старейший раздел React, но оно все еще актуален.

1.1.2.8 Рекомендуемые

Изучение React. С чего начать?

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

С чего начать изучение Реакт.

Я хочу изучить React… но что же мне создать?

Front—end разработка это профессиональный навык. Скорее всего даже набор профессиональных навыков. JavaScript, React, HTML, CSS, использование командной строки — это все строительные инструменты, а знать нужно гораздо больше!

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

Итак, что же включает в себя хороший обучающий проект?

С чего начать изучение React

Небольшие, крохотные проекты являются отличным способом изучения новых языков или библиотек. Не начинайте изучение React с копирования крупных проектов таких как Yelp. Гигантские самоучители научат вас только “копипастить” код, лишь иногда у вас получится применить полученные знания.

Даже составление списка задач не всегда может помочь сделать правильный выбор, если вы в первый раз собираетесь что-то создать. Всё зависит от вас самих.

В общем и целом, изучайте по одной технологии за раз и накапливайте знания. Добейтесь хороших знаний JavaScript, затем начните изучать React до тех пор, пока вы не научитесь создавать компоненты таким образом, чтобы они “общались” друг с другом. Посетите мою Инструкцию по Изучению React для детального ознакомления.

Новичок в JS?

Немного знакомы с JavaScript? Возможно вы начали с HTML и CSS, а теперь хотите изучить, то как сделать ваши проекты более “живыми”? Если вы новичок в логике и программировании, то я советую начать вам с малого – меньше, чем вы думаете. Прежде всего хорошенько разберитесь с JS, только после этого изучайте React. Изучение основ может оказаться непростым занятием, поэтому не усложняйте его.

Сайт exercism.io содержит множество отличных, небольших упражнений. Данные упражнения максимально приближены к реальным проблемам программирования, а не только к проблемам front—end приложений, таким как DOM манипуляции или работа с графикой, но они по-прежнему актуальны. Это равносильно изучению музыкальных гамм, хотя это не то же самое, что изучение реальных песен, но это даст вам прочную основу.

Опытный специалист?

Достаточно опытны в программировании? Владеете не одним языком программирования? Если вы представляете, как создать простой список задач в том языке, который вы хорошо знаете, то это может стать отличным начальным проектом на React. Если же для вас это слишком легко, то попробуйте что-нибудь более сложное, например, онлайн-магазин со списком товаров и корзиной или простое приложение “чат”.

Где-то посередине?

Уже имеете некий опыт в JS? Возможно не столь большой или в основном это опыт работы с чем-то наподобие jQuery? Я рекомендую начать с копирования кусочков приложений, которые вам уже известны или были написаны вами ранее. Обратите внимание, что я сказал кусочки. Это означает, что вы должны воспроизвести любую полезную информацию, начиная от тегов form и header, заканчивая твитами и постами в Facebook.

Эти небольшие строительные блоки полезной информации помогут вам начать, также вы можете составлять из них списки. К сожалению, большое количество веб-приложений — это просто множество списков, например, Twitter, Facebook, Reddit, Trello, Pinterest… Создание таких приложение — это весело, потому что вы получаете что-то небольшое, что сразу же работает, а затем вы с легкостью можете встроить это приложение в реальный проект и начать добавлять новые функции.

С чего начать изучение React

Не важно какой у вас уровень знаний, существуют вещи, которые лучше всего избегать.

Избегайте публикаций, содержащих огромное количество информации о разных технологиях таких как React, Redux, Routing, Express, Webpack. Огромное количество информации может сбить вас с толку (в этом нет ничего страшного).

Это как тот старый вопрос: “Как съесть слона?”

…

…

…

“За раз — по кусочку.”

Я просто пытаюсь сказать всем тем, кто меня слушает, что не нужно одновременно пытаться изучить React и Redux. Несомненно, это хорошие библиотеки и со временем вам следует изучить их. Но серьёзно, просто начните с React. Ведь React прекрасно работает сам по себе.

Кроме того, необязательно настраивать свою сборку Webpack, чтобы создать что-то используя React. Для создания проекта используйте готовые утилиты от Facebook (Create React App), а затем погружайтесь в изучение того, как создавать различные компоненты.

А нужно ли мне это сейчас?

Всегда спрашивайте себе: “А нужно ли мне это сейчас?”. Почти всегда ответ “нет”.

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

Меня часто спрашивают…

“Как сделать AJAX запрос?” – Вы уже создали компоненты со статическими данными? Вы вообще создали хоть какие-то компоненты? Для начала создайте что-нибудь рабочее, а AJAX добавите позже.

“Мне нужен SASS/LESS!” – Вы уже создали какие-то компоненты? Простого CSS будет достаточно. Как добавить препроцессоры разберетесь позже.

“Как React работает с маршрутизацией? Аутентификацией? Моделями данных?” – Все вопросы хороши. Но могу заверить вас, что есть ответы на каждый из них. Вам бы не хотелось оказаться в тупике на 37 день разработки вашего проекта из-за того, что React или его экосистема не имеют поддержки определенных возможностей. Однако на начальном этапе вам это все не нужно. Создайте несколько компонент, смоделируйте все что связано со статическими данными.

“Я планирую создавать большой проект и мне нужны все эти возможности сейчас!” – Если вы уже реализовали какие-то небольшие проекты используя React, и решили для себя что вам нравится React, а в настоящее время нацелены на создания своего шедевра? Тогда конечно, самое время изучить все кусочки головоломки. Но если вы еще ничего не создали, тогда изучайте и накапливайте весь доступный передовой опыт прежде, чем написать “Hello world”, это просто замедлит вас.

Вопрос “А нужно ли мне это сейчас?”, следует задавать себе на протяжении всего проекта. Данный вопрос близок к принципу проектирования YAGNI (You ain’t gonna need it — Вам это не понадобится).

Вас также может заинтересовать моя книга, с ней вы изучите React за раз — по кусочку.

Введение в React
Основы React
Учебник для начинающих
Небольшой туториал по React.js
Практические задания
Руководство для тех, кто уже достаточно знаком с jQuery
Видео уроки по React.js
Подборки статей для изучения React.js
Руководство по написанию собственного аналога Yelp
Руководство по созданию основной страницы Hacker News
React.js на примере типовых решений

Ссылка на оригинальную статью
Перевод: Александр Давыдов

10 React-компонентов на все случаи жизни / Блог компании RUVDS.com / Хабр

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

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

Материал, перевод которого мы сегодня публикуем, посвящён рассказу о 10 React-компонентах.

1. React Awesome Slider — «карусели»

Компонент React Awesome Slider позволяет создавать плавные, красивые и отлично настраиваемые переходы. Это совсем небольшой (7 Кб) компонент, который поддерживают все основные браузеры. Вот демо-страница React Awesome Slider.

2. React Data Grid — таблицы

React Data Grid — это мощный, быстрый и лёгкий в использовании компонент, позволяющий вывести на страницу нечто вроде листа Excel. Он умеет обрабатывать клавиатурные команды, копирование и вставку данных, и, в целом, ведёт себя так, как обычно ведут себя электронные таблицы. Этот компонент предоставляет разработчику простой API, разобраться с которым можно очень быстро. Посмотреть примеры его использования можно здесь.

3. CogoToast — уведомления

Поиск компонента для реализации уведомлений, учитывая то, сколько таких компонентов существует, это непростая задача. Есть много отличных компонентов подобной направленности, но тут мне бы хотелось рассказать о моём любимом, о простом и понятном CogoToast. Пакет компонента отличается скромными размерами (4 Кб), у него простой API, а его аккуратный внешний вид хорошо подойдёт для многих проектов. Вот страница GogoToast с примерами употребления этого компонента.

4. Google Maps React — карты

Google Maps React — это довольно популярный компонент, который ускоряет и облегчает размещение (с указанием координат) других React-компонентов на Google-карте.

5. React Tooltip — всплывающие подсказки

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

6. React Block UI — экраны загрузки и блокировки

React Block UI — это простой в использовании компонент, который позволяет запретить пользователям взаимодействовать с интерфейсом страницы во время загрузки чего-либо.

7. React Credit Cards — форма для ввода платёжных данных

Я не планировал включать в этот обзор нечто вроде «самого лучшего компонента для ввода платёжных данных», но React Credit Cards — это просто очаровательный компонент, о котором я не могу не рассказать. Он поддаётся настройке, работать с ним просто и приятно. Он, кроме прочего, автоматически определяет то, какой компании соответствует введённый номер карты, после чего выводит изображение карты с соответствующим логотипом.

8. React Markdown — рендеринг Markdown-разметки

React Markdown — это быстрое и удобное решение для рендеринга Markdown-разметки (в том числе и HTML). Он, как и прочие компоненты из этого обзора, умеет решать всего одну задачу, но делает своё дело очень хорошо.

9. Coloreact — инструмент для выбора цвета

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

10. React Big Calendar — календарь

Если вам нужен компонент-календарь, оснащённый всеми теми возможностями, которые есть в «профессиональных» календарях — это значит, что вам стоит взглянуть на React Big Calendar. Он даёт разработчику массу возможностей и настроек — функции планировщика, локализацию, форматирование даты и времени и многое другое.

Уважаемые читатели! Какими узкоспециализированными React-компонентами вы чаще всего пользуетесь?

React для начинающих — лучший способ изучить React

Пора изучить React.js

С акцентом на простоту и читаемость этот курс поможет вам в кратчайшие сроки создать приложений реального времени и динамические компоненты веб-сайтов!

Вместе мы создадим «Улов дня» — приложение в реальном времени для модного рынка морепродуктов, где цена и доступное количество являются переменными и могут измениться в любой момент.Мы создадим меню, форму заказа и область управления запасами, где авторизованные пользователи смогут немедленно обновить информацию о продукте.

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

JavaScript

теперь повсюду, как и React, и наличие сильных навыков React — отличный способ продвинуться вперед в создании современных веб-приложений прямо сейчас. Стиль преподавания Уэса — один из лучших в нашей отрасли, и я бы порекомендовал этот курс всем, кто хочет стать лучше как в JavaScript, так и в React.

Питер Купер @ peterc Редактор еженедельника JavaScript • Председатель O’Reilly @FluentConf • Сопредседатель O’Reilly OSCON

Уэс — один из самых талантливых учителей, которых я когда-либо видел в действии. С тех пор как мы начали работать вместе в 2012 году, его знания, энергия и юмор помогли более чем 500 студентам преодолеть трудные учебные препятствия и дали им навыки и уверенность в создании удивительных вещей. Хакер Вы не были бы такими же без Уэса в нашей команде инструкторов, и любой, у кого есть шанс поучиться у него, должен быть готов к тому, чтобы получить вдохновение и восторг.

Хизер Пейн @ heatherpayne Генеральный директор HackerYou • Основатель Ladies Learning Code

Чему я научусь?

---

• Как создать все приложение или компонент веб-сайта в React.js от начала до конца.
• Работа с приложением create-react-app для инструментов Webpack
• Понимание компонентов React и написание разметки с помощью JSX
• Поддерживать состояние вашего приложения
• Обмен данными между компонентами
• Работа с State и HTML5 LocalStorage
• Данные веб-сокетов в реальном времени с Firebase
• Создание поддерживаемого кода с помощью модулей JavaScript
• Маршрутизация URL-адресов с помощью React Router 4
• Использование новых возможностей ES6
• Развертывание приложений React
• + многое другое — Полный список видео смотрите ниже.

Для кого это?

---

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

• Разработчики, полагающиеся на jQuery, которые хотят улучшить процесс сборки с помощью JavaScript
• Разработчики Angular, Ember или Backbone, которые хотят понять, как работает React
• Разработчики PHP и WordPress — React имеет тенденцию хорошо ладить с теми, кто привык к PHP, поскольку он был создан для Facebook
• Разработчики, желающие добавить интерактивные элементы или элементы реального времени к существующим веб-сайтам
• Любой, кто хочет стать лучше в JavaScript и хорошо учится, видя на практике как фундаментальные, так и продвинутые концепции

Не уверен, что это для вас?

100% возврат денег, если вы считаете, что это не подходит

Скорость видео в самый раз, — достаточно быстро, чтобы заинтересовать вас, не проходя мимо и не предполагая никаких деталей.

Пакеты курсов

Начальный курс

• Первые 21 видеоуроки в формате HD
• Весь исходный код — файлы сборки, сценарии npm и начальные файлы для каждого видео
• Слушать курс с любого устройства
• Неограниченное количество обновлений
• Эксклюзивный доступ к чату Slack React для начинающих, где вы можете попросить меня о помощи и пообщаться с другими учениками

Главный пакет

• Доступ ко всем 29 видео в формате HD — см. Полный список тем выше
• Взаимодействие компонентов + анимация
• Интеграция входа в систему с аутентификацией FireBase

Исходный код

• — система сборки и стартовые файлы для каждого видео
• Извлечение в Webpack
• Future React — ES2017 и далее!
• Stream и Скачивание файлов без DRM с любого устройства
• Unlimited Updates — этот курс полностью перезаписывался 3 раза!
• Эксклюзивный доступ к чату Slack React для начинающих, где вы можете попросить меня о помощи и пообщаться с другими учениками

Командная лицензия

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

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

Групповая лицензия включает все, что указано в главном пакете.

Я также могу пройти обучение на месте —

.

9 интересных идей и тем проекта React для начинающих 2020

Итак, вы освоили основы React, а также хорошо разбираетесь в JavaScript. Теперь, когда вам достаточно легко освоить базовые руководства, вы думаете о том, чтобы поднять его на ступеньку выше. Но как?

Это проблема, с которой сталкиваются многие новички React, когда они изучают основы библиотеки React и переходят на промежуточный этап обучения. Лучший способ (и, вероятно, самый продуктивный) двигаться вперед — это сосредоточиться на разработке проектов React.

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

Разработка проектов React не только поможет вам укрепить свои навыки React, но также позволит вам исследовать свою творческую сторону. Однако, прежде чем мы начнем обсуждать проекты React, давайте сначала поговорим о «почему» и «как» разработки проекта React.

Прочитано: Top 20 React Interview Вопросы и ответы

Почему вам стоит работать над проектами React?

Вы слышали старую поговорку: «Практика приводит к совершенству», верно? Эта ситуация такая же. Когда вы овладеете фундаментальными концепциями React, вы должны освоить создание проектов React. В процессе разработки проектов React вы узнаете, как разрабатывать действительно работающие приложения.

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

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

Как запустить процесс разработки приложений React?

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

Также читайте: Идеи проекта программирования полного стека для начинающих

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

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

Дополнительный совет : часто новички ошибочно полагают, что они должны создавать серверную часть приложения с нуля, но в этом нет необходимости. Вы можете просто использовать бессерверные технологии, такие как AWS Amplify, Firebase и Hasura, чтобы оборудовать свое приложение готовой серверной частью. Эти инструменты не только экономят ваше время, но и помогают повысить вашу производительность.

Узнать больше: Зарплата разработчика полного стека в Индии

Идеи проекта React для начинающих

1.Приложение для социальных сетей

Будущее маркетинга в социальных сетях в Индии удивительно, поскольку приложения для социальных сетей, такие как Facebook, Instagram, Snapchat и Twitter, являются яркими примерами сложных приложений. Эти приложения могут стать отличным источником вдохновения для проекта React, поскольку в них постоянно растет число расширенных функций. Самое лучшее в создании приложения для социальных сетей с использованием React — это то, что вы знаете, какие функции необходимо включить в приложение. Некоторые из наиболее распространенных функций почти всех приложений для социальных сетей:

• Аутентификация пользователя
• Уведомление и новостная лента
• Простая интеграция с другими платформами
• Публикация, публикация и комментирование

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

Технологии, которые вы можете использовать:

• Создайте приложение React или React Native для создания динамического пользовательского интерфейса для сообщений, сообщений и лайков.
• AWS Amplify, Firebase или Hasura (с использованием подписок GraphQL) для данных в реальном времени.
• AWS Lambda или Firebase Functions для уведомлений приложений
• Firebase или Cloudinary для загрузки изображений и видео

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

С тех пор, как электронная коммерция проникла в основную отрасль, приложения электронной коммерции (такие как Amazon, Flipkart, Nykaa и т. Д.) Стали вездесущими. Эти приложения стали неотъемлемой частью нашей жизни. Таким образом, если вы создадите функциональное приложение для электронной коммерции, оно покажет, что у вас есть реальные навыки, чтобы идти в ногу с последними тенденциями в отрасли. Излишне говорить, что вы станете привлекательным кандидатом перед потенциальными работодателями.

Имейте в виду, что мы говорим о разработке небольшого проекта электронной коммерции, который больше ориентирован на конкретную отрасль, а не на большой рынок, такой как Amazon или eBay.Вы можете выбрать любую интересующую вас отрасль, например, электронные устройства (мобильные телефоны, телевизоры, ноутбуки и т. Д.), И разработать для этого свое приложение для электронной коммерции.

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

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

Технологии, которые можно использовать:

• Create React App или Gatsby — отличный выбор для создания витрины, отображающей товары / услуги.
• Algolia идеально подходит для создания быстрого интерфейса поиска товаров.
• Netlify / AWS Lambda для обработки процесса оформления заказа.
• Stripe / react-stripe-elements для управления процессом оплаты.
• Snipcart позволяет создавать корзину, а также управлять продуктами корзины.

3. Приложение «Погода»

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

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

После того, как вы получите основные функции, вы можете расширить приложение следующими способами:

• Включите функцию, при которой пользователь может щелкнуть определенный день недели, чтобы увидеть почасовой прогноз.
• Добавьте React Router в приложение (npm install react-router). Ознакомьтесь с руководством по быстрому запуску, чтобы добавить маршруты. Например, маршруты, которые могут отображать 5-дневный прогноз вместе с названием дня и почасовым прогнозом на этот день.
• Зарегистрируйтесь на открытой карте погоды, чтобы получить бесплатный ключ API и прогноз на 5 дней. Затем загрузите эти данные в свое приложение.
• Если вы хотите сделать приложение еще красивее, вы можете добавить графическую библиотеку, например vx. Вы можете вдохновиться этими примерами vx.

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

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

Источник

Технологии, которые можно использовать:

4.Приложение для обмена сообщениями

Приложения для обмена сообщениями и службы обмена сообщениями очень популярны среди пользователей сети. На самом деле приложения для обмена сообщениями, такие как WhatsApp и Facebook Messenger, являются такой большой частью нашей повседневной жизни, что мы не можем представить себе ни дня без них. Обмен мгновенными сообщениями — это уже образ жизни. Даже компании (большие или маленькие) полагаются на возможности мгновенного обмена сообщениями, чтобы обеспечить своим клиентам круглосуточную поддержку клиентов. Итак, создание приложения для обмена сообщениями — один из лучших способов монетизировать ваши навыки React.

При разработке мобильного приложения для обмена сообщениями первое, что следует учитывать, — это то, что вам нужно создать платформу, которая может облегчить общение между двумя или более людьми в режиме реального времени. Ключевым моментом здесь является режим реального времени, поскольку это суть обмена мгновенными сообщениями. Вы можете использовать такие инструменты, как Firebase или Hasura, которые передают данные через WebSockets, чтобы сразу отображать сообщения в беседе. React Native — идеальный выбор для этого проекта.

Используемые технологии:

• React Native или React Native Web, поскольку оба они отлично подходят для разработки приложений для мобильных сообщений и гибридных (веб + мобильные) приложений для обмена сообщениями.
• Firebase, AWS Amplify или Hasura для отправки и получения сообщений в режиме реального времени.
• Cloudinary или Firebase хранилище для отправки / получения сообщений с изображениями или видео.
• npm пакет emoji-mart для смайликов, который пользователи могут включать в свои сообщения

5. Приложение для повышения производительности

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

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

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

Используемые технологии:

• Создать приложение React (для Интернета) или React Native (для мобильных платформ).
• npm-пакет response-markdown для отображения уценки в пользовательском интерфейсе вашего приложения.
• response-codemirror2 npm пакет для написания кода в примечаниях.
• пакет npm с реактивным перетаскиванием для переупорядочивания содержимого списка с помощью функции «щелкнуть и перетащить».

Также попробуйте: Идеи проектов веб-дизайна для начинающих

6.Развлекательное приложение

Мы оставили самое обширное приложение напоследок — развлекательное. Развлекательные приложения ориентированы на мультимедийный контент, от фильмов до музыки и подкастов. Netflix, Audible, Spotify и Soundcloud — вот некоторые примеры развлекательных приложений. Интересно, что сегодня у нас есть много развлекательных приложений, тесно связанных с социальными сетями. TikTok, пожалуй, лучший пример развлекательного приложения для социальных сетей. Он содержит короткие видеоклипы, созданные пользователями, и ориентирован на активное участие пользователей.Затем у вас есть YouTube, который поощряет взаимодействие пользователей с помощью подписок, лайков и комментариев.

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

Технологии, которые можно использовать:

• Создайте приложение React, Next.js или Gatsby для пользовательского интерфейса приложения.
• Algolia для поиска медиа (названия звуковых дорожек, фильмов, подкастов и т. Д.).
• response-player npm пакет для воспроизведения мультимедиа.
• Cloudinary / Firebase хранилище для загрузки медиаконтента.

Помимо этих шести проектов, есть еще несколько простых проектов, которые вы можете попробовать:

7. Социальные карты

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

Источник

8. Калькулятор

Калькуляторы

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

Источник

9. Проблемы с Github Страница

Этот проект предназначен для разработки упрощенной версии страницы «Проблемы» на Github.Вот как это должно выглядеть:

Источник

Вам нужно сохранить небольшой прицел. Игнорируйте элементы в заголовке (поиск, фильтрация, пометки и т. Д.) И сосредоточьтесь только на реализации списка проблем. Чтобы начать проект, сначала соберите открытые проблемы из API Github и отобразите их в списке. После этого добавьте элемент управления разбиением на страницы, чтобы облегчить навигацию по полному списку проблем. Если вы добавите React Router, вы сможете перейти непосредственно к определенной странице по вашему выбору.Вы можете повысить сложность страницы, включив также страницу с подробными сведениями о проблеме.

Заключение

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

Если вам интересно узнать больше о реакции, разработке полного стека, ознакомьтесь с дипломом PG Grad & IIIT-B по разработке программного обеспечения полного стека, который предназначен для работающих профессионалов и предлагает более 500 часов тщательного обучения, 9+ проектов и назначения, статус выпускника IIIT-B, практические проекты, связанные с достижением цели, и помощь в трудоустройстве в ведущих компаниях.

Подготовьтесь к карьере будущего

ОТРАСЛЕВОЕ ОБУЧЕНИЕ — ПРИЗНАННАЯ ОТРАСЛИ СЕРТИФИКАЦИЯ.

Подать заявку сейчас @ UPGRAD

.