5 Reagujte na projekty, ktoré vo svojom portfóliu potrebujete

Dali ste do toho prácu a teraz dobre rozumiete knižnici React.

Okrem toho dobre ovládate JavaScript a jeho najužitočnejšie funkcie vkladáte do svojho kódu React.

Dosiahli ste veľký pokrok ... ale čo teraz robíte?

Ako prekonávate priepasť medzi znalosťou základov React a profesionálnym vývojárom?

Mnoho vývojárov narazí na tento problém, keď dosiahnu túto strednú fázu výučby React alebo inej knižnice JavaScriptu. Poznajú väčšinu samotnej knižnice a tiež JavaScript, aby ho mohli efektívne používať, ale nevedia, ako ďalej postupovať.

Prečo by ste mali vytvárať aplikácie

Po osvojení základných schopností aplikácie React musíte získať pohodlné vytváranie aplikácií so schopnosťami, ktoré ste získali. Táto prax spočíva v tom, že ste efektívnym vývojárom Reactu - viete, ako si môžete sami vytvárať aplikácie, a využívate na to správne nástroje v ekosystéme React.

Aké aplikácie by ste však mali vytvoriť s Reactom, aby ste si vylepšili svoje schopnosti vývojára?

V tomto článku si ukážeme 5 rôznych typov aplikácií, ktoré by ste mali zvážiť po vytvorení základnej aplikácie todo. Veľkou výhodou vytvárania aplikácií je, že po nasadení môžu byť prepojené s vašim portfóliom ako silný a okamžitý spôsob, ako zamestnávateľom ukázať svoju odbornosť.

Pre každý typ aplikácie uvediem populárne príklady, ktoré môžete použiť ako inšpiráciu, nástroje, ktoré by som odporučil na zostavenie jednotlivých funkcií, spolu s krátkou ukážkou takejto aplikácie, ktorú som osobne vytvoril pomocou aplikácie React.

Ako začať vytvárať aplikácie s Reagovať

Na rozdiel od samotného učenia React, kde nájdete desiatky článkov, ktoré vám umožnia ponoriť sa hlbšie do akejkoľvek súvisiacej koncepcie, je proces vytvárania aplikácie do veľkej miery samostatnou aktivitou bez väčšieho vedenia.

Ak začínate s vlastnou tvorbou aplikácií, odporučil by som vyhľadať články, ktoré vás naučia základy tvorby aplikácie, a ponoriť sa do zdrojového kódu aplikácie, ktorý poskytujú. Aj samotný proces čítania kódu z vás urobí lepšieho vývojára.

Ak tieto príklady vyzerajú príliš skľučujúco na to, aby ste sa vytvorili, pamätajte na to, čo viete ako vývojár React - na rozdelenie aplikácií na zložiteľné komponenty. Každá aplikácia musí byť zostavená kus po kuse, komponent po komponente. Zamerajte sa na vytváranie jednej funkcie po druhej. S praxou získate lepšiu predstavu o tom, aké nástroje budete potrebovať pre jednotlivé funkcie, ako aj o bežných vzorcoch vytvárania aplikácií všeobecne.

Poznámka: Jedna mylná predstava, ktorú som mal pri začiatku vytvárania skutočných aplikácií, ako je táto, bol ten, že som musel vytvoriť celý backend / API s uzlom alebo Pythonom, aby som získal potrebnú funkčnosť. Nemusíte to robiť. Prezrite si výkonné technológie bez serverov, ako sú Firebase, AWS Amplify alebo Hasura, ktoré vám poskytnú kompletný backend po vybalení z krabice bez nutnosti ich vytvárania a nasadenia sami. Investujte do nástrojov, vďaka ktorým budete produktívnejší a ušetríte čas.

Vytvorte si aplikáciu pre sociálne médiá

Ak by som vám mal odporučiť iba jednu aplikáciu, ktorú by ste si mohli pridať do svojho portfólia, bola by to aplikácia pre sociálne médiá. Twitter, Facebook a Instagram sú dosť prepracované a obsahujú neustále rastúci počet funkcií, ktoré používateľom zaistia pozornosť. Navyše je to druh aplikácie, ktorú pravdepodobne najlepšie poznáte, ako by mala fungovať.

Medzi takmer všetkými aplikáciami pre sociálne médiá existuje veľa funkcií.

  • možnosť používateľov vytvárať príspevky pomocou textových a / alebo mediálnych súborov,
  • živý prenos týchto príspevkov,
  • umožnenie ostatným používateľom označovať príspevky páči sa mi a komentovať ich,
  • ako aj autentifikácia používateľa.

Akonáhle to získate, môžete pridať profily pre všetkých svojich používateľov, kde si môžu prispôsobiť svoj účet a spravovať používateľov, ktorých sledujú.

Príklady aplikácií: Instagram, Twitter, Snapchat, Reddit

Technológie na využitie:

  • Vytvorením aplikácie React App alebo Next.js vytvorte dynamické používateľské rozhranie príspevkov, označení páči sa mi a správ
  • Firebase, AWS Amplify alebo Hasura (pomocou GraphQL s predplatným) pre dáta v reálnom čase
  • Funkcie bez servera ako AWS Lambda alebo Firebase Functions pre zasielanie upozornení
  • Cloudové úložisko alebo úložisko Firebase na nahrávanie obrázkov alebo videa

Vytvorte si aplikáciu elektronického obchodu

Vyberte niekoľko svojich obľúbených webov a zaručujem, že aspoň na jednom z nich je vložená aplikácia pre elektronický obchod, aj keď je to len malý výklad. Aplikácie elektronického obchodu sú všadeprítomné a stavím sa, že budete vyzvaní, aby ste si ich vytvorili v určitom okamihu svojej kariéry vývojára.

Je lákavé vybudovať pôsobivú rozsiahlu platformu elektronického obchodu ako Amazon, ale odporučil by som pracovať na niečom menšom a zameranejšom.

Namiesto trhu, ktorý poskytuje všetky veci všetkým ľuďom, choďte do odvetvia, ktoré vás zaujíma. Napríklad, ak máte radi domáce potreby, môžete sa pozrieť na to, čo Crate & Barrel alebo Williams-Sonoma pre svoje stránky postavili.

Okrem produktov môžu služby pre spotrebiteľov poskytovať aj aplikácie elektronického obchodu. Ak sa jedná o službu poskytovanú lokálne, do aplikácie by sa mohla pridať interaktívna mapa, ktorá by poskytovateľovi služby a zákazníkovi umožnila poznať navzájom polohu. Prichádzajú na myseľ aplikácie na donášku jedla, ako sú UberEats a Doordash, ktoré vyžadujú umiestnenie osoby objednávajúcej jedlo.

Bez ohľadu na to, čo sa predáva, či už je to fyzické alebo virtuálne, každá aplikácia elektronického obchodu bude pozostávať z nejakého výkladu s podrobnosťami o produkte alebo službe. Ak si používatelia môžu kúpiť viac produktov naraz, mal by mať nákupný košík, kde môžu používatelia spravovať produkty, ktoré si chcú kúpiť.

A konečne, každá aplikácia elektronického obchodu potrebuje proces platby, kde si používatelia môžu kúpiť svoje produkty anonymne alebo po overení.

Populárne príklady: Airbnb, Uber, UberEats, Doordash, Etsy, Udemy

Technológie na využitie:

  • Vytvorte aplikáciu React alebo Gatsby pre výklad a zobrazovanie produktov
  • Pruh s balíkom reagujú na prvky pruhu na spracovanie spracovania platby
  • Funkcia bez servera ako Netlify / AWS Lambda na zvládnutie procesu platby
  • Algolia pre bleskurýchle vyhľadávanie produktov
  • Snipcart na jednoduché vytvorenie košíka a správu produktov košíka

Vytvorte si zábavnú aplikáciu

Toto je najširšia zo všetkých kategórií. Čo mám na mysli pod pojmom zábava? Aplikácia zameraná na určitý druh médií. Môžu to byť napríklad filmy, podcasty alebo hudba.

Skvelými príkladmi sú Netflix, Audible a Soundcloud alebo Spotify. Ak do tejto kategórie zahrniete umenie alebo dizajn, mohli by sme do zoznamu pridať weby ako Behance alebo Dribbble.

Zaujímavé na tejto kategórii je to, že veľa zábavných aplikácií hraničí s aplikáciami sociálnych médií. Napríklad aplikácia ako Tiktok, ktorá ponúka krátke, nápadité videá, je poháňaná vysokou angažovanosťou používateľov. Ďalšia aplikácia, ako napríklad YouTube, je zameraná na interakcie používateľov prostredníctvom označení Páči sa mi, komentárov a predplatného.

Popremýšľajte, aký typ médií alebo zábavy vás najviac zaujíma, a uvidíte, či okolo nich vytvoríte jednoduchú platformu, kde sa používatelia môžu prihlásiť a uložiť obsah, ktorý sa im páči. Potom sa pozrite na pridanie sociálnych prvkov, ktoré umožňujú pridávať komentáre, označiť lajky a zdieľať obsah s ostatnými používateľmi na platforme.

Populárne príklady: YouTube, Netflix, Audible, Spotify, Tiktok

Technológie na využitie:

  • Vytvorte React App, Next.js alebo Gatsby a vytvorte používateľské rozhranie aplikácie
  • balíček NPM reagujúci prehrávač na prehrávanie médií
  • Cloudové úložisko alebo úložisko Firebase na nahrávanie médií
  • Algolia na vyhľadávanie médií podľa názvu (tj. Zvukovej stopy, videa, filmu atď.)

Vytvorte si aplikáciu na odosielanie správ

Aplikácie na zasielanie správ sú obrovské. Pravdepodobne máte v telefóne bezplatnú službu zasielania správ, ako je WhatsApp alebo Viber, alebo službu zabudovanú do platformy sociálnych médií, ako je Facebook Messenger. Služby ako Intercom s okamžitými správami sú k dispozícii aj ako webové aplikácie, takže spoločnosti môžu svojim používateľom poskytovať okamžitú zákaznícku podporu.

Každá aplikácia na odosielanie správ bude pozostávať z rozhovoru s dvoma alebo viacerými ľuďmi, keď sa správy odosielajú v reálnom čase. Podobne ako v aplikácii pre sociálne médiá by som odporučil službu, ako je Firebase alebo Hasura, ktorá prenáša údaje cez WebSockets, aby sa správy v konverzácii zobrazili okamžite.

Väčšina aplikácií na odosielanie správ je na mobilných zariadeniach alebo tabletoch. Ak nejde o váš prvý klon aplikácie, je to skvelá šanca posunúť sa za hranice webu a vytvoriť si mobilnú aplikáciu pomocou aplikácie React Native. Lepšie je, že môžete vytvoriť webovú aplikáciu a aplikáciu na zasielanie mobilných správ súčasne s balíkom, ako je React Native Web.

Populárne príklady: WhatsApp, Viber, Discord, Messenger, Slack

Technológie na využitie:

  • Reagujte natívne alebo reagujte na natívny web a vytvorte ich ako mobilnú aplikáciu alebo hybridnú aplikáciu (web + mobil)
  • Firebase, AWS Amplify alebo Hasura (pomocou predplatného GraphQL) na odosielanie správ v reálnom čase
  • Cloudové alebo Firebase úložisko na odosielanie správ s obrázkom alebo videom
  • Balík NPM emoji-mart pre úhľadný nástroj na výber emodži pripomínajúci Slack, ktorý môžu používatelia zahrnúť do svojich správ

Vytvorte si aplikáciu na zvýšenie produktivity

Toto je pravdepodobne najjednoduchší typ aplikácie, s ktorým začať, ak vezmeme do úvahy, že existuje veľa návodov na základné aplikácie na zvýšenie produktivity. Keď hovorím o aplikáciách na zvýšenie produktivity, mám na mysli aplikácie na zaznamenávanie poznámok, aplikácie pre správu tímov a zoznamy úloh. Všeobecne platí, že všetko, čo vám pomôže splniť určitú úlohu alebo dosiahnuť vyššiu produktivitu.

Najlepšie je najskôr zostaviť aplikáciu na zvýšenie produktivity, ktorá poskytuje dobrý úvod do vytvárania aplikácií kvôli relatívnej jednoduchosti mnohých jej funkcií.

Môžete začať s niečím jednoduchým, napríklad s textovým editorom, ktorý ľahko napíše formátovaný text so zmenkami a potom ho rozšíri. Potom pridajte do počítača možnosť ukladať text ako jednotlivé súbory. Potom funkcia exportovania tohto označenia ako HTML na písanie formátovaných e-mailov.

Ak chcete začať vytvárať aplikáciu na zvýšenie produktivity, opýtajte sa, aké funkcie môže mať táto aplikácia, aby vám uľahčili denný rozvrh, a choďte odtiaľ.

Populárne príklady: Todoist, pojem, veci atď.

Technológie na využitie:

  • Vytvorte React App pre web alebo React Native pre mobil
  • Balíček NPM React-Markdown zobrazí markdown v používateľskom rozhraní vašej aplikácie
  • Balík NPM React-codemirror2 na písanie kódu do vašich poznámok
  • Balík NPM reagujúci na presunutie pre opätovné zoradenie obsahu zoznamu kliknutím a presunutím

Veľa šťastia v ceste za tvorbou aplikácie a uvidíme sa v ďalšom článku.

Chcete sa stať majstrom JS? Pripojte sa k Bootcampu JS 2020

Pripojte sa k Bootcampu JS 2020

Sledujte + Pozdravte sa! ? Twitter • codeartistry.io