Ați pus în lucru și acum aveți o înțelegere solidă a bibliotecii React.

În plus, aveți o bună înțelegere a JavaScript-ului și puneți la dispoziție cele mai utile caracteristici ale acestuia în codul dvs. React.

Ai făcut progrese foarte mari … dar acum ce faci?

Cum faceți legătura între cunoașterea elementelor fundamentale ale React și devenirea unui dezvoltator profesionist?

Mulți dezvoltatori se confruntă cu această problemă atunci când ajung la acest stadiu intermediar de învățare React sau orice altă bibliotecă JavaScript. Știu cea mai mare parte a bibliotecii în sine, precum și JavaScript pentru ao folosi eficient, dar nu știu următorul pas pe care trebuie să-l facă.

De ce ar trebui să creați aplicații

După ce ați învățat elementele de bază ale React, trebuie să obțineți aplicații de construire confortabile cu abilitățile pe care le-ați dobândit. Această practică stă la baza dezvoltării React eficiente – știind cum să construiești aplicații pe cont propriu și să folosești instrumentele potrivite din ecosistemul React pentru a face acest lucru.

Dar ce aplicații ar trebui să construiți cu React pentru a vă îmbunătăți abilitatea de dezvoltator?

În acest articol, vom trece prin 5 tipuri diferite de aplicații pe care ar trebui să le luați în considerare să le creați după aplicația de bază todo. Marele beneficiu al construirii aplicațiilor este că, odată implementate, acestea pot fi legate de portofoliul dvs. ca un mod puternic și imediat de a arăta angajatorilor expertiza dumneavoastră.

Pentru fiecare tip de aplicație, voi acoperi exemple populare pe care le puteți folosi ca inspirație, instrumentele pe care le-aș recomanda pentru a construi fiecare caracteristică, împreună cu o scurtă demonstrație a unei astfel de aplicații pe care am realizat-o personal folosind React.

Cum să începeți să creați aplicații cu React

Spre deosebire de învățarea React în sine, unde puteți găsi zeci de articole pentru a vă adânci în orice concept înrudit, procesul de construire a unei aplicații este în mare parte o activitate auto-dirijată fără prea multe îndrumări.

Dacă începeți să creați aplicații pe cont propriu, aș recomanda să căutați articole care să vă învețe noțiunile de bază ale construirii unei aplicații și să vă scufundați în codul sursă al aplicației pe care îl furnizează. Chiar și procesul de citire a codului în sine vă va face un dezvoltator mai bun.

Dacă aceste exemple par prea descurajante pentru a vă construi, nu uitați ce știți ca dezvoltator React – pentru a împărți aplicațiile în componente compozabile. Fiecare aplicație trebuie să fie construită bucată cu bucată, componentă cu componentă. Concentrați-vă pe construirea unei caracteristici la un moment dat. Cu practica, veți avea o mai bună înțelegere a modului în care instrumente de care aveți nevoie pentru fiecare caracteristică, precum și a modelelor comune din spatele construirii aplicațiilor în general.

Notă: O concepție greșită pe care am avut-o când am început să construiesc aplicații reale ca acestea a fost că a trebuit să construiesc un întreg backend / API cu Node sau Python pentru a obține funcționalitatea de care aveam nevoie.

Nu trebuie să faceți acest lucru. Căutați tehnologii puternice fără server, cum ar fi Firebase, AWS Amplify sau Hasura, care vă oferă un backend complet, fără a fi nevoie să creați și să implementați unul singur. Investiți în instrumente care vă fac mai productivi și economisiți timp.

Construiți o aplicație pentru rețele sociale

Dacă ar trebui să vă recomand o singură aplicație pe care să o adăugați în portofoliu, ar fi o aplicație de socializare. Twitter, Facebook și Instagram sunt destul de sofisticate și includ un număr din ce în ce mai mare de funcții pentru a menține utilizatorii implicați. În plus, este genul de aplicație pe care probabil o cunoașteți cel mai bine cu privire la modul în care ar trebui să funcționeze.

Există o serie de caracteristici comune în aproape toate aplicațiile de socializare:

  • abilitatea utilizatorilor de a crea postări cu fișiere text și / sau media,
  • un flux live al acestor postări,
  • permițând altor utilizatori să aprecieze și să comenteze postări,
  • precum și autentificarea utilizatorului.

Și odată ce ați obținut acest lucru, puteți adăuga profiluri pentru fiecare dintre utilizatorii dvs., unde își pot personaliza contul, precum și gestiona utilizatorii pe care îi urmăresc.

5 Reactioneaza proiectele de care ai nevoie in portofoliu

Exemple de aplicații: Instagram, Twitter, Snapchat, Reddit

Tehnologii de utilizat:

  • Creați aplicația React sau Next.js pentru a crea o interfață dinamică a postărilor, aprecierilor și mesajelor
  • Firebase, AWS Amplify sau Hasura (folosind GraphQL cu abonamente) pentru date în timp real
  • Funcții fără server, cum ar fi AWS Lambda sau Firebase Functions pentru notificări
  • Stocare Cloudinary sau Firebase pentru încărcarea de imagini sau video

Construiți o aplicație de comerț electronic

Alegeți câteva dintre site-urile dvs. preferate și vă garantez că cel puțin unul dintre ele are încorporată o aplicație de comerț electronic, chiar dacă este doar o mică vitrină. Aplicațiile de comerț electronic sunt omniprezente și pun pariu că veți fi chemat să creați una la un moment dat în cariera dvs. de dezvoltator.

Este tentant să construim o platformă de comerț electronic impresionantă, pe scară largă, precum Amazon, dar aș recomanda să lucrăm la ceva mai mic și mai concentrat.

În loc de o piață care oferă toate lucrurile tuturor oamenilor, mergeți cu o industrie care vă interesează. De exemplu, dacă vă plac bunurile de uz casnic, s-ar putea să aruncați o privire la ceea ce Crate & Barrel sau Williams-Sonoma au construit pentru site-urile lor.

În afară de produse, aplicațiile de comerț electronic pot oferi un serviciu consumatorilor. Dacă este un serviciu furnizat local, o aplicație interactivă ar putea fi adăugată în aplicație pentru a oferi furnizorului de servicii și clientului să se cunoască locația celorlalți. Îmi vin în minte aplicații de livrare a alimentelor, precum UberEats și Doordash, care necesită locația persoanei care comandă mâncarea.

Indiferent de ceea ce se vinde, fie că este fizic sau virtual, fiecare aplicație de comerț electronic va consta într-o vitrină cu detalii despre produs sau serviciu. Dacă utilizatorii pot achiziționa mai multe produse simultan, acesta ar trebui să aibă un coș de cumpărături în care utilizatorii să poată gestiona produsele pe care doresc să le cumpere.

În cele din urmă, fiecare aplicație de comerț electronic are nevoie de un proces de plată în care utilizatorii își pot achiziționa produsele fie anonim, fie odată autentificate.

1611886209 62 5 Reactioneaza proiectele de care ai nevoie in portofoliu

Exemple populare: Airbnb, Uber, UberEats, Doordash, Etsy, Udemy

Tehnologii de utilizat:

  • Creați aplicația React sau Gatsby pentru vitrina și afișarea produselor
  • Stripe cu pachetul react-stripe-elements pentru gestionarea procesării plăților
  • Funcție fără server, cum ar fi Netlify / AWS Lambda pentru a gestiona procesul de checkout
  • Algolia pentru căutarea rapidă a produselor
  • Snipcart pentru a crea cu ușurință un coș și pentru a gestiona produsele de coș

Construiți o aplicație de divertisment

Aceasta este cea mai largă dintre toate categoriile. Ce vreau să spun prin divertisment? O aplicație axată pe un anumit tip de suport media. Acestea ar putea fi filme, podcast-uri sau muzică pentru a numi câteva.

Câteva exemple grozave în acest sens ar fi, respectiv, Netflix, Audible și Soundcloud sau Spotify. Dacă includeți artă sau design în această categorie, am putea adăuga la listă site-uri precum Behance sau Dribbble.

Ceea ce este interesant la această categorie este că multe aplicații de divertisment se învecinează cu aplicațiile de socializare. De exemplu, o aplicație precum Tiktok, care prezintă videoclipuri scurte și imaginative, este determinată de implicarea ridicată a utilizatorilor. O altă aplicație precum YouTube este centrată pe interacțiunile utilizatorilor prin aprecieri, comentarii și abonamente.

Gândiți-vă la ce tip de media sau divertisment vă interesează cel mai mult și vedeți dacă puteți construi o platformă simplă în jurul său, unde utilizatorii se pot conecta și salva conținutul care le place. După aceea, căutați să adăugați elemente sociale care fac posibilă adăugarea de comentarii, cum ar fi și partajarea conținutului cu alți utilizatori de pe platformă.

1611886209 886 5 Reactioneaza proiectele de care ai nevoie in portofoliu

Exemple populare: YouTube, Netflix, Audible, Spotify, Tiktok

Tehnologii de utilizat:

  • Creați aplicația React, Next.js sau Gatsby pentru a crea interfața de utilizare a aplicației
  • pachet npm react-player pentru redarea media
  • Stocare cloudinară sau Firebase pentru încărcare media
  • Algolia pentru căutarea fișierelor media după nume (adică piese audio, videoclip, film etc.)

Construiți o aplicație de mesagerie

Aplicațiile de mesagerie sunt imense. Probabil aveți pe telefon un serviciu gratuit de mesagerie, cum ar fi WhatsApp sau Viber, sau unul încorporat în platforma dvs. de socializare, cum ar fi Facebook Messenger. Servicii precum interfonul cu mesageria instantanee sunt de asemenea disponibile ca aplicații web, astfel încât companiile să poată oferi asistență imediată clienților utilizatorilor lor.

Orice aplicație de mesagerie va consta într-o conversație cu două sau mai multe persoane în care mesajele sunt trimise în timp real. Similar cu aplicația de socializare, aș recomanda un serviciu precum Firebase sau Hasura care transportă date prin WebSockets pentru ca mesajele să fie afișate imediat în conversație.

Majoritatea aplicațiilor de mesagerie sunt pe dispozitive mobile sau tablete. Dacă aceasta nu este prima dvs. clonă de aplicație, aceasta este o șansă excelentă de a trece dincolo de web și de a crea o aplicație mobilă cu React Native. Mai bine, ați putea crea o aplicație de mesagerie web și mobilă simultan cu un pachet precum React Native Web.

1611886209 284 5 Reactioneaza proiectele de care ai nevoie in portofoliu

Exemple populare: WhatsApp, Viber, Discord, Messenger, Slack

Tehnologii de utilizat:

  • React Native sau React Native Web pentru a crea ca aplicație mobilă sau aplicație hibridă (web + mobil)
  • Firebase, AWS Amplify sau Hasura (folosind abonamente GraphQL) pentru a trimite mesaje în timp real
  • Stocare Cloudinary sau Firebase pentru trimiterea de mesaje cu conținut imagine sau video
  • pachet npm emoji-mart pentru un selector de emoji de tip Slack, pe care utilizatorii să îl includă în mesajele lor

Construiți o aplicație de productivitate

Acesta este probabil cel mai simplu tip de aplicație cu care să începeți, având în vedere că există atât de multe tutoriale de aplicații de bază pentru productivitate. Când vorbesc despre aplicații de productivitate, mă refer la aplicații pentru luarea de note, aplicații pentru gestionarea echipelor și liste de sarcini. În general vorbind, orice vă ajută să îndepliniți o anumită sarcină sau să fiți mai productivi.

Ce este grozav la crearea mai întâi a unei aplicații de productivitate este că oferă o introducere bună la crearea aplicațiilor, datorită simplității relative a multor dintre caracteristicile sale.

Puteți începe cu ceva simplu, cum ar fi un editor de text pentru a scrie cu ușurință text formatat cu markdown și apoi să îl extindeți. Apoi adăugați posibilitatea de a salva textul ca fișiere individuale pe computer. După aceea, o caracteristică pentru a exporta această reducere ca HTML pentru a scrie e-mailuri formatate.

Pentru a începe să construiți o aplicație de productivitate, întrebați ce caracteristici ar putea avea o aplicație pentru a vă face programul zilnic mai ușor și mergeți de acolo.

1611886209 529 5 Reactioneaza proiectele de care ai nevoie in portofoliu

Exemple populare: Todoist, Noțiune, Lucruri etc.

Tehnologii de utilizat:

  • Creați aplicația React pentru web sau React Native pentru mobil
  • npm package react-markdown pentru a afișa reducerea în interfața de utilizare a aplicației
  • pachetul npm react-codemirror2 pentru scrierea codului în note
  • npm package react-draggable pentru reordonarea conținutului listei făcând clic și glisând

Noroc cu călătoria dvs. de construire a aplicațiilor și ne vedem în articolul următor.

Vrei să devii un maestru JS? Alăturați-vă JC Bootcamp 2020

Alăturați-vă JC Bootcamp 2020

Urmăriți + Salutați! ? Stare de nervozitatecodeartistry.io