5 реагуйте на проекти, які вам потрібні у вашому портфоліо

Ви вклали в роботу і тепер добре розумієте бібліотеку React.

На додачу до цього, ви добре розумієте JavaScript і використовуєте найкорисніші функції для використання у вашому коді React.

Ви досягли значного прогресу ... але що тепер ви робите?

Як ви подолаєте розрив між знанням основ React і тим, щоб стати професійним розробником?

Багато розробників стикаються з цією проблемою, коли досягають цього проміжного етапу навчання React або будь-якої іншої бібліотеки JavaScript. Вони знають більшу частину самої бібліотеки, а також JavaScript, щоб ефективно використовувати її, але не знають наступного кроку.

Чому ви повинні будувати додатки

Після того, як ви вивчите основи React, вам потрібно отримати зручні програми для побудови з отриманими навичками. Ця практика лежить в основі ефективного розробника React - знання того, як самостійно створювати додатки, та використання відповідних інструментів в екосистемі React для цього.

Але які додатки ви повинні створювати за допомогою React, щоб вирівняти свої здібності розробника?

У цій статті ми розглянемо 5 різних типів програм, які слід розглянути, як створити основну програму todo. Великою перевагою створення додатків є те, що після їх розгортання їх можна пов’язати з вашим портфоліо як потужний, негайний спосіб показати роботодавцям свій досвід.

Для кожного типу додатків я розгляну популярні приклади, які ви можете використати як натхнення, інструменти, які я рекомендую створити для кожної функції, а також коротку демонстрацію такого додатка, який я особисто створив за допомогою React.

Як розпочати створення додатків за допомогою React

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

Якщо ви починаєте самостійно створювати додатки, я б рекомендував шукати статті, які навчать вас основам побудови програми, і зануритись у вихідний код програми, який вони надають. Навіть сам процес читання коду зробить вас кращим розробником.

Якщо ці приклади виглядають занадто страшно, щоб побудувати себе, згадайте те, що ви знаєте як розробник React - розбивати програми на компонуючі компоненти. Кожна програма повинна бути побудована поштучно, поштучно. Зосередьтеся на побудові однієї функції за раз. З практикою ви краще зрозумієте, які інструменти вам знадобляться для кожної функції, а також загальні шаблони побудови програм загалом.

Примітка: Одне помилкове уявлення, яке я мав, починаючи будувати такі реальні додатки, було те, що мені потрібно було створити цілий серверний сервіс / API за допомогою Node або Python, щоб отримати необхідну функціональність. Не потрібно цього робити. Ознайомтеся з потужними безсерверними технологіями, такими як Firebase, AWS Amplify або Hasura, які надають вам повний серверний пакет без необхідності створювати та розгортати його самостійно. Інвестуйте в інструменти, які роблять вас більш продуктивними та економлять час.

Створіть додаток для соціальних мереж

Якби мені довелося порекомендувати лише один додаток для додавання до свого портфоліо, це був би додаток для соціальних мереж. Twitter, Facebook та Instagram досить вишукані та містять постійно зростаючу кількість функцій, щоб залучити користувачів. Крім того, це такий додаток, який ви, мабуть, найкраще знаєте про те, як він повинен функціонувати.

Існує ряд функцій, загальних для майже всіх програм соціальних мереж:

  • можливість для користувачів робити дописи з текстовими та / або медіафайлами,
  • прямий ефір цих постів,
  • надання можливості іншим користувачам подобатися та коментувати публікації,
  • а також автентифікація користувача.

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

Приклади додатків: Instagram, Twitter, Snapchat, Reddit

Технології для використання:

  • Створіть React App або Next.js, щоб створювати динамічний інтерфейс повідомлень, оцінок "подобається" та повідомлень
  • Firebase, AWS Amplify або Hasura (за допомогою GraphQL з підписками) для даних у режимі реального часу
  • Безсерверні функції, такі як AWS Lambda або Firebase Functions для сповіщень
  • Хмарне або Firebase сховище для завантаження зображень або відео

Створіть програму електронної комерції

Виберіть кілька своїх улюблених сайтів, і я гарантую, що принаймні на одному з них вбудовано додаток для електронної комерції, навіть якщо це лише невелика вітрина. Додатки для електронної комерції є повсюдними, і я впевнений, що вас попросять створити його в певний момент вашої кар’єри розробника.

Спокусливо створити вражаючу, широкомасштабну платформу електронної комерції, як Amazon, але я б порадив попрацювати над чимось меншим та більш цілеспрямованим.

Замість ринку, який пропонує всі речі всім людям, скористайтеся галуззю, яка вас цікавить. Наприклад, якщо вам подобаються товари для дому, ви можете поглянути на те, що Crate & Barrel або Williams-Sonoma створили для своїх сайтів.

Окрім продуктів, програми для електронної комерції можуть надавати послугу споживачам. Якщо це послуга, яка надається локально, до програми можна додати інтерактивну карту, щоб постачальник послуг та клієнт могли знати місце розташування один одного. Пам’ятаються програми доставки їжі, такі як UberEats та Doordash, які вимагають розташування замовника їжі.

Незалежно від того, що продається, фізичного чи віртуального, кожна програма для електронної комерції буде складатися з якоїсь вітрини з деталями продукту чи послуги. Якщо користувачі можуть придбати кілька продуктів одночасно, у нього має бути кошик для покупок, де користувачі можуть керувати продуктами, які вони хочуть придбати.

Нарешті, кожному додатку електронної комерції потрібен процес оформлення замовлення, де користувачі можуть купувати свої товари анонімно або після їх автентифікації.

Популярні приклади: Airbnb, Uber, UberEats, Doordash, Etsy, Udemy

Технології для використання:

  • Створіть React App або Gatsby для вітрини та відображення продуктів
  • Смуга з пакетом response-stripe-elements для обробки обробки платежів
  • Безсерверна функція, така як Netlify / AWS Lambda, для обробки процесу оформлення замовлення
  • Алголія для блискавичного пошуку товару
  • Snipcart для легкого створення кошика та управління товарами для кошиків

Створіть розважальний додаток

Це найширша з усіх категорій. Що я маю на увазі під розвагами? Додаток, орієнтований на певний тип засобів масової інформації. Це декілька фільмів, подкастів чи музики.

Одними чудовими прикладами цього можуть бути Netflix, Audible та Soundcloud або Spotify. Якщо ви включите мистецтво або дизайн до цієї категорії, ми могли б додати до списку сайти, такі як Behance або Dribbble.

Що цікаво в цій категорії, так це те, що багато розважальних програм межують із програмами соціальних мереж. Наприклад, такий додаток, як Tiktok, який пропонує короткі вигадливі відеоролики, зумовлений високою зацікавленістю користувачів. Інший додаток, такий як YouTube, зосереджений на взаємодії користувачів через вподобання, коментарі та підписки.

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

Популярні приклади: YouTube, Netflix, Audible, Spotify, Tiktok

Технології для використання:

  • Створіть React App, Next.js або Gatsby, щоб створити інтерфейс програми
  • npm-пакет-реактор-програвач для відтворення медіа
  • Хмарне або Firebase сховище для завантаження медіа
  • Алголія для пошуку засобів масової інформації за назвою (тобто аудіодоріжка, відео, фільм тощо)

Створіть додаток для обміну повідомленнями

Програми обміну повідомленнями величезні. На вашому телефоні, швидше за все, є така безкоштовна служба обміну повідомленнями, як WhatsApp або Viber, або вбудована у вашу платформу соціальних мереж, як Facebook Messenger. Такі послуги, як Інтерком з обміном повідомленнями, також доступні як веб-програми, щоб компанії могли надавати своїм користувачам негайну підтримку.

Будь-яка програма обміну повідомленнями складається з розмови з двома або більше людьми, де повідомлення надсилаються в режимі реального часу. Подібно до програми соціальних медіа, я б рекомендував таку послугу, як Firebase або Hasura, яка передає дані через WebSockets, щоб повідомлення відображалися негайно в розмові.

Більшість програм обміну повідомленнями розміщуються на мобільних пристроях або планшетах. Якщо це не ваш перший клон програми, це чудовий шанс вийти за межі Інтернету та створити мобільний додаток за допомогою React Native. А ще краще - ви можете створити додаток для обміну повідомленнями в Інтернеті та мобільному зв'язку одночасно з таким пакетом, як React Native Web.

Популярні приклади: WhatsApp, Viber, Discord, Messenger, Slack

Технології для використання:

  • React Native або React Native Web, щоб створювати їх як мобільний додаток або гібридний додаток (web + mobile)
  • Firebase, AWS Amplify або Hasura (за допомогою передплати на GraphQL) для надсилання повідомлень у режимі реального часу
  • Хмарне або Firebase сховище для надсилання повідомлень із зображенням або відеовмістом
  • npm пакет emoji-mart для гладкого Slack-подібного засобу вибору смайлів, який користувачі можуть включити до своїх повідомлень

Створіть додаток для продуктивності

Це, мабуть, найпростіший тип додатків, з якого слід почати, враховуючи, що існує так багато підручників базових додатків для продуктивності. Говорячи про додатки для підвищення продуктивності, я маю на увазі програми для створення нотаток, програми для управління командами та списки завдань. Взагалі кажучи, все, що допомагає вам виконати певне завдання або бути більш продуктивним.

Найкраще у створенні додатку для продуктивності чудово те, що він забезпечує хороший вступ до побудови додатків завдяки відносній простоті багатьох його функцій.

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

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

Популярні приклади: Todoist, Notion, Things тощо.

Технології для використання:

  • Створіть React App для Інтернету або React Native для мобільних пристроїв
  • npm package response-markdown для відображення розмітки в інтерфейсі вашого додатка
  • npm-пакет response-codemirror2 для написання коду у ваших примітках
  • Пакет npm реагує на перетягування для повторного впорядкування вмісту списку за допомогою клацання та перетягування

Удачі у вашій подорожі до створення додатків, і ми побачимо вас у наступній статті.

Хочете стати майстром JS? Приєднуйтесь до JS Bootcamp 2020

Приєднуйтесь до JS Bootcamp 2020

Слідуй + Привітай! ? Twitter • codeartistry.io