5 reagirajte na projekte koji su vam potrebni u vašem portfelju

Uložili ste posao i sada ste čvrsto razumjeli React knjižnicu.

Povrh toga, dobro razumijete JavaScript i stavljate njegove najkorisnije značajke na korištenje u svoj React kôd.

Puno ste napredovali ... ali što sada radite?

Kako premostiti jaz između poznavanja osnova React-a i postajanja profesionalnim programerom?

Mnogi programeri nailaze na ovaj problem kad dođu do ove srednje faze učenja React-a ili bilo koje druge JavaScript biblioteke. Znaju većinu same knjižnice kao i JavaScript kako bi je učinkovito koristili, ali ne znaju sljedeći korak.

Zašto biste trebali graditi aplikacije

Nakon što naučite osnove React-a, morate dobiti udobne aplikacije za izgradnju sa stečenim vještinama. Ova je praksa srž učinkovitog programera React-a - znati samostalno graditi aplikacije i za to koristiti prave alate u ekosustavu React.

Ali koje biste aplikacije trebali graditi s Reactom kako biste poboljšali svoju sposobnost programera?

U ovom ćemo članku proći kroz 5 različitih vrsta aplikacija koje biste trebali razmisliti o izgradnji nakon osnovne todo aplikacije. Velika je prednost izrade aplikacija u tome što se, nakon što se razviju, mogu povezati s vašim portfeljem kao moćan, neposredan način da poslodavcima pokažete svoju stručnost.

Za svaku vrstu aplikacije položit ću popularne primjere koje možete koristiti kao nadahnuće, alate koje bih preporučio za izgradnju svake značajke, zajedno s kratkim demonstracijskim prikazom takve aplikacije koju sam osobno izradio pomoću React-a.

Kako započeti izgradnju aplikacija s Reactom

Za razliku od učenja samog React-a, gdje možete pronaći na desetke članaka kako biste dublje zarobili u bilo koji srodni koncept, postupak izrade aplikacije u velikoj je mjeri samostalna aktivnost bez puno smjernica.

Ako započinjete s samostalnom izradom aplikacija, preporučio bih da potražite članke koji vas podučavaju osnovama izrade aplikacije i zaronite u izvorni kod aplikacije koji oni nude. Čak i sam postupak čitanja koda učinit će vas boljim programerom.

Ako vam ovi primjeri izgledaju zastrašujuće da biste se izgradili, sjetite se onoga što znate kao React programera - da biste razgradili programe na komponente koje se mogu komponirati. Svaka aplikacija mora se graditi po dijelovima, komponenta po komponenta. Usredotočite se na izgradnju jedne po jedne značajke. Vježbom ćete steći bolji uvid u to koji će vam alati biti potrebni za svaku značajku, kao i uobičajene obrasce koji stoje iza izgradnje aplikacija općenito.

Napomena: Jedna zabluda koju sam imao kada sam počeo graditi stvarne aplikacije poput ove bila je da sam morao izgraditi čitav pozadinski / API s Nodeom ili Pythonom da bih dobio potrebnu funkcionalnost. To ne trebate učiniti. Istražite moćne tehnologije bez poslužitelja poput Firebasea, AWS Amplify ili Hasure koje vam pružaju potpunu pozadinu bez potrebe da je sami stvarate i implementirate. Uložite u alate koji vas čine produktivnijima i štedite vrijeme.

Izradite aplikaciju za društvene medije

Kad bih vam preporučio samo jednu aplikaciju koju biste dodali u svoj portfelj, to bi bila aplikacija za društvene mreže. Twitter, Facebook i Instagram prilično su sofisticirani i uključuju sve veći broj značajki koje korisnike privlače. Povrh toga, to je vrsta aplikacije koju vjerojatno najbolje znate o tome kako bi trebala funkcionirati.

Brojne su značajke zajedničke gotovo svim aplikacijama društvenih medija:

  • mogućnost za korisnike da objavljuju postove s tekstom i / ili medijskim datotekama,
  • feed tih postova uživo,
  • omogućavanje drugim korisnicima da lajkaju i komentiraju postove,
  • kao i provjera autentičnosti korisnika.

A nakon što to smanjite, možete dodati profile za svakog svog korisnika, gdje mogu prilagoditi svoj račun, kao i upravljati korisnicima koje slijede.

Primjeri aplikacija: Instagram, Twitter, Snapchat, Reddit

Tehnologije za korištenje:

  • Izradite React App ili Next.js da biste napravili dinamičko korisničko sučelje postova, lajkova i poruka
  • Firebase, AWS Amplify ili Hasura (pomoću GraphQL-a s pretplatama) za podatke u stvarnom vremenu
  • Funkcije bez poslužitelja poput AWS Lambda ili Firebase funkcije za obavijesti
  • Cloudinary ili Firebase pohrana za prijenos slika ili videozapisa

Izradite aplikaciju za e-trgovinu

Odaberite nekoliko svojih omiljenih web lokacija i garantiram da barem jedna od njih ima ugrađenu aplikaciju za e-trgovinu, čak i ako je riječ o samo maloj prodavaonici. Aplikacije za e-trgovinu su sveprisutne i kladim se da ćete biti pozvani da ih napravite u nekom trenutku svoje karijere programera.

Primamljivo je izgraditi impresivnu, veliku platformu za e-trgovinu poput Amazona, ali preporučio bih rad na nečemu manjem i fokusiranijem.

Umjesto tržišta koje pruža sve stvari svim ljudima, obratite se industriji koja vas zanima. Na primjer, ako volite kućnu robu, možete pogledati što su Crate & Barrel ili Williams-Sonoma izgradili za svoja web mjesta.

Osim proizvoda, aplikacije za e-trgovinu mogu pružiti uslugu i potrošačima. Ako se radi o usluzi koja se pruža lokalno, u aplikaciju se može dodati interaktivna karta koja pružatelju usluga i kupcu omogućava da znaju međusobno mjesto. U obzir mi padaju aplikacije za dostavu hrane kao što su UberEats i Doordash.

Bez obzira na to što se prodaje, bilo fizičko ili virtualno, svaka aplikacija za e-trgovinu sastojat će se od izloga s pojedinostima o proizvodu ili usluzi. Ako korisnici mogu kupiti više proizvoda odjednom, trebao bi imati košaricu koja može upravljati proizvodima koje žele kupiti.

Konačno, svakoj aplikaciji za e-trgovinu potreban je postupak naplate gdje korisnici mogu svoje proizvode kupiti anonimno ili nakon što se provjere autentičnost.

Popularni primjeri: Airbnb, Uber, UberEats, Doordash, Etsy, Udemy

Tehnologije za korištenje:

  • Stvorite React App ili Gatsby za izlog i prikazivanje proizvoda
  • Traka s paketom reakcija-pruga-elementi za rukovanje obradom plaćanja
  • Funkcija bez poslužitelja poput Netlify / AWS Lambda za upravljanje postupkom naplate
  • Algolija za munjevito brzo pretraživanje proizvoda
  • Snipcart za jednostavno stvaranje kolica i upravljanje proizvodima iz kolica

Izradite aplikaciju za zabavu

Ovo je najšira od svih kategorija. Što mislim pod zabavom? Aplikacija koja je usredotočena na određenu vrstu medija. To bi mogli biti filmovi, podcastovi ili glazba.

Odlični primjeri za to bili bi Netflix, Audible i Soundcloud ili Spotify. Ako u ovu kategoriju uvrstite umjetnost ili dizajn, na popis bismo mogli dodati web lokacije poput Behance ili Dribbble.

Ono što je zanimljivo u vezi s ovom kategorijom jest da se mnoge zabavne aplikacije graniče s aplikacijama na društvenim mrežama. Na primjer, aplikaciju poput Tiktoka, koja sadrži kratke maštovite videozapise, pokreće velik angažman korisnika. Druga aplikacija poput YouTubea usredotočena je na interakciju korisnika putem lajkova, komentara i pretplata.

Razmislite koja vrsta medija ili zabave vas najviše zanima i pogledajte možete li oko toga izgraditi jednostavnu platformu na kojoj se korisnici mogu prijaviti i spremiti sadržaj koji im se sviđa. Nakon toga, proučite dodavanje društvenih elemenata koji omogućuju dodavanje komentara, lajkanje i dijeljenje sadržaja s drugim korisnicima na platformi.

Popularni primjeri: YouTube, Netflix, Audible, Spotify, Tiktok

Tehnologije za korištenje:

  • Stvorite React App, Next.js ili Gatsby da biste stvorili korisničko sučelje aplikacije
  • npm paket-reakcijski uređaj za reprodukciju medija
  • Cloudinary ili Firebase pohrana za prijenos medija
  • Algolija za pretraživanje medija po imenu (tj. Audio zapis, video, film itd.)

Izradite aplikaciju za razmjenu poruka

Aplikacije za razmjenu poruka su ogromne. Vjerojatno na telefonu imate besplatnu uslugu razmjene poruka poput WhatsApp ili Viber ili onu ugrađenu u vašu platformu društvenih mreža poput Facebook Messengera. Usluge poput Interkoma s trenutnim porukama dostupne su i kao web aplikacije tako da tvrtke mogu pružiti trenutnu korisničku podršku svojim korisnicima.

Bilo koja aplikacija za razmjenu poruka sastojat će se od razgovora s dvije ili više osoba gdje se poruke šalju u stvarnom vremenu. Slično aplikaciji za društvene medije, preporučio bih uslugu poput Firebasea ili Hasure koja prenosi podatke putem WebSockets-a kako bi se poruke odmah prikazale u razgovoru.

Većina aplikacija za razmjenu poruka nalazi se na mobilnim uređajima ili tabletima. Ako ovo nije vaš prvi klon aplikacije, ovo je sjajna šansa da prijeđete mrežu i izradite mobilnu aplikaciju s React Nativeom. Još bolje, istovremeno možete stvoriti web i mobilnu aplikaciju za razmjenu poruka s paketom poput React Native Web.

Popularni primjeri: WhatsApp, Viber, Discord, Messenger, Slack

Tehnologije za korištenje:

  • React Native ili React Native Web za izradu kao mobilna aplikacija ili hibridna aplikacija (web + mobitel)
  • Firebase, AWS Amplify ili Hasura (koristeći pretplate na GraphQL) za slanje poruka u stvarnom vremenu
  • Cloudinary ili Firebase pohrana za slanje poruka sa slikovnim ili video sadržajem
  • npm paket emoji-mart za glatki alat za odabir emojija nalik Slacku koji korisnici mogu uključiti u svoje poruke

Izradite aplikaciju za produktivnost

Ovo je vjerojatno najlakša vrsta aplikacije s kojom treba započeti, s obzirom na to da postoji toliko mnogo tutorijala o osnovnim aplikacijama za produktivnost. Kad govorim o aplikacijama za produktivnost, mislim na aplikacije za bilježenje, aplikacije za upravljanje timovima i popise zadataka. Općenito govoreći, sve što vam pomaže izvršiti određeni zadatak ili biti produktivniji.

Ono što je prvo super u izgradnji aplikacije za produktivnost je to što pruža dobar uvod u izgradnju aplikacija zbog relativne jednostavnosti mnogih njezinih značajki.

Možete započeti s nečim jednostavnim, poput uređivača teksta, da biste lako napisali oblikovani tekst s oznakom, a zatim ga proširili. Zatim dodajte mogućnost spremanja teksta kao pojedinačne datoteke na računalu. Nakon toga, značajka za izvoz tog umanjenja kao HTML za pisanje formatiranih e-adresa.

Da biste započeli izgradnju aplikacije za produktivnost, pitajte koje značajke neka aplikacija može olakšati vaš dnevni raspored i krenite odatle.

Popularni primjeri: Todoist, Notion, Things itd.

Tehnologije za korištenje:

  • Stvorite React aplikaciju za web ili React Native za mobitele
  • npm package response-markdown za prikaz marži u korisničkom sučelju vaše aplikacije
  • npm paket response-codemirror2 za pisanje koda u vaše bilješke
  • npm paket može se povući za preuređivanje sadržaja popisa klikom i povlačenjem

Sretno s putovanjem u izgradnju aplikacija i vidimo se u sljedećem članku.

Želite li postati JS majstor? Pridružite se JS Bootcampu 2020

Pridružite se JS Bootcampu 2020

Slijedite + Pozdravi! ? Twitter • codeartistry.io