5 reageerige oma portfelli vajaminevatest projektidest

Olete selle töö sisse pannud ja nüüd on teil Reacti teegist kindel arusaam.

Lisaks sellele on teil JavaScripti hea mõistmine ja selle kõige kasulikumate funktsioonide kasutamine teie Reacti koodis.

Olete teinud palju edusamme ... aga mida te nüüd teete?

Kuidas ületada lõhet Reacti põhialuste tundmise ja professionaalseks arendajaks saamise vahel?

Sellele probleemile satuvad paljud arendajad, kui nad jõuavad sellesse Reacti või mõne muu JavaScripti teegi õppimise vaheetappi. Nad teavad nii kogu raamatukogu ennast kui ka JavaScripti, et seda tõhusalt kasutada, kuid nad ei tea järgmist sammu.

Miks peaksite rakendusi ehitama?

Kui olete Reacti põhitõed selgeks õppinud, peate hankima omandatud oskustega mugavaid rakendusi. See tava on tõhus React arendaja - teadmine, kuidas iseseisvalt rakendusi ehitada, ja selleks Reacti ökosüsteemis õigete tööriistade olemasolu.

Kuid milliseid rakendusi peaksite koos Reactiga üles ehitama, et oma arendaja võimekust suurendada?

Selles artiklis käsitleme 5 erinevat tüüpi rakendust, mille ehitamist peaksite kaaluma pärast põhi-todo-rakendust. Rakenduste loomise suur eelis on see, et kui need on rakendatud, saab need teie portfelliga siduda kui võimas ja kohene viis näidata tööandjatele oma teadmisi.

Iga rakenduse tüübi kohta tutvustan populaarseid näiteid, mida saate kasutada inspiratsioonina, tööriistu, mida soovitaksin iga funktsiooni üles ehitada, koos sellise rakenduse lühikese demoga, mille olen Reacti abil isiklikult loonud.

Kuidas alustada rakenduste loomist rakendusega React

Erinevalt Reacti enda õppimisest, kust leiate kümneid artikleid, et sukelduda sügavamale mis tahes seotud kontseptsiooni, on rakenduse loomise protsess suuresti ise suunatud tegevus ilma suurema juhendamiseta.

Kui hakkate iseseisvalt rakendusi ehitama, soovitaksin otsida artikleid, mis õpetavad teile rakenduse loomise põhitõdesid ja sukelduvad nende pakutavasse rakenduse lähtekoodi. Isegi koodi lugemise protsess ise muudab teid paremaks arendajaks.

Kui need näited tunduvad enda ülesehitamiseks liiga hirmuäratavad, pidage meeles, mida teate kui Reacti arendajat - rakenduste jaotamiseks komponeeritavateks komponentideks. Iga rakendus tuleb ehitada tükkhaaval, komponentide kaupa. Keskenduge ühe funktsiooni väljatöötamisele korraga. Praktika abil saate paremini mõista, milliseid tööriistu vajate iga funktsiooni jaoks, samuti rakenduste ehitamise üldisi mustreid.

Märkus. Üks vale arvamus, mis mul tekkis, kui hakkasin selliseid reaalseid rakendusi looma, oli see, et mul oli vaja vajaliku funktsionaalsuse saamiseks Node või Pythoniga ehitada terve taustaprogramm / API. Seda pole vaja teha. Vaadake võimsaid serverivabu tehnoloogiaid nagu Firebase, AWS Amplify või Hasura, mis pakuvad teile täieliku taustaprogrammi, ilma et peaksite seda ise looma ja juurutama. Investeerige tööriistadesse, mis muudavad teid produktiivsemaks ja säästavad aega.

Ehitage sotsiaalmeedia rakendus

Kui ma peaksin teile oma portfelli lisamiseks soovitama ainult ühte rakendust, oleks see sotsiaalmeedia rakendus. Twitter, Facebook ja Instagram on üsna keerukad ning sisaldavad kasutajate seotuse hoidmiseks üha suuremat hulka funktsioone. Lisaks on see selline rakendus, mida te kõige paremini tunnete selle toimimise osas.

Peaaegu kõigi sotsiaalse meedia rakenduste seas on mitmeid funktsioone:

  • kasutajate võimalus postitada teksti- ja / või meediumifailidega,
  • nende postituste otseülekanne,
  • võimaldades teistel kasutajatel postitusi meeldida ja kommenteerida,
  • samuti kasutajate autentimine.

Ja kui olete sellest aru saanud, saate iga kasutaja jaoks lisada profiilid, kus nad saavad oma kontot isikupärastada ja hallata jälgitavaid kasutajaid.

Rakenduse näited: Instagram, Twitter, Snapchat, Reddit

Kasutatavad tehnoloogiad:

  • Postituste, meeldimiste ja sõnumite dünaamilise kasutajaliidese loomiseks looge rakendus React või Next.js
  • Firebase, AWS Amplify või Hasura (kasutades tellimustega GraphQL-i) reaalajas andmete jaoks
  • Serverita funktsioonid, näiteks AWS Lambda või Firebase'i funktsioonid teatiste jaoks
  • Pilv- või Firebase-salvestusruum piltide või video üleslaadimiseks

Ehitage e-kaubanduse rakendus

Valige mõni oma lemmiksait ja ma garanteerin, et vähemalt ühel neist on sisseehitatud e-kaubanduse rakendus, isegi kui see on lihtsalt väike poe esikülg. E-kaubanduse rakendused on kõikjal levinud ja vean kihla, et teil palutakse teil oma arendajakarjääri ühel hetkel see üles ehitada.

On ahvatlev ehitada muljetavaldav, suuremahuline e-kaubanduse platvorm nagu Amazon, kuid ma soovitaksin töötada millegi väiksema ja keskendunuma kallal.

Kõigile inimestele mõeldud asju pakkuva turu asemel minge teid huvitava tööstusharu juurde. Näiteks kui teile meeldivad kodukaubad, võiksite vaadata, mida Crate & Barrel või Williams-Sonoma oma saitidele on ehitanud.

Lisaks toodetele võivad e-kaubanduse rakendused pakkuda tarbijatele teenust. Kui tegemist on kohapeal pakutava teenusega, võidakse rakendusse lisada interaktiivne kaart, et teenuse pakkuja ja klient teaksid üksteise asukohta. Pähe tulevad sellised toidu kohaletoimetamise rakendused nagu UberEats ja Doordash, mis nõuavad toitu telliva inimese asukohta.

Sõltumata sellest, mida müüakse, olgu see füüsiline või virtuaalne, koosneb iga e-kaubanduse rakendus mõnest poest toote või teenuse üksikasjadega. Kui kasutajad saavad korraga osta mitu toodet, peaks sellel olema ostukorv, kus kasutajad saavad hallata tooteid, mida nad tahavad osta.

Lõpuks vajab iga e-kaubanduse rakendus kassaprotsessi, kus kasutajad saavad oma tooteid kas anonüümselt osta või pärast nende autentimist.

Populaarsed näited: Airbnb, Uber, UberEats, Doordash, Etsy, Udemy

Kasutatavad tehnoloogiad:

  • Looge poe ja toodete kuvamiseks rakendus React või Gatsby
  • Triip koos pakendi reageerimisribaga elementidega maksete töötlemiseks
  • Serverita funktsioon, näiteks Netlify / AWS Lambda, et kontrollida kassat
  • Algoolia välkkiire tooteotsingu jaoks
  • Käru käru hõlpsaks loomiseks ja kärutoodete haldamiseks

Ehitage meelelahutusrakendus

See on kõigist kategooriatest kõige laiem. Mida ma mõtlen meelelahutuse all? Rakendus, mis on keskendunud teatud tüüpi meediumile. Need võivad olla näiteks filmid, taskuhäälingusaated või muusika.

Selle suurepärasteks näideteks võiksid olla näiteks Netflix, Audible ja Soundcloud või Spotify. Kui lisate sellesse kategooriasse kunsti või disaini, võiksime loendisse lisada sellised saidid nagu Behance või Dribbble.

Selle kategooria jaoks on huvitav see, et paljud meelelahutusrakendused piirnevad sotsiaalmeedia rakendustega. Näiteks sellist rakendust nagu Tiktok, mis sisaldab lühikesi kujutlusvõimelisi videoid, juhib kasutaja kõrge seotus. Teine rakendus, nagu YouTube, on keskendunud kasutajate suhtlemisele meeldimiste, kommentaaride ja tellimuste kaudu.

Mõelge, millist tüüpi meedia või meelelahutus teid kõige rohkem huvitab, ja vaadake, kas saate selle ümber ehitada lihtsa platvormi, kuhu kasutajad saavad sisse logida ja neile meelepärase sisu salvestada. Pärast seda uurige sotsiaalsete elementide lisamist, mis võimaldaksid lisada kommentaare, meeldida ja jagada sisu platvormi teiste kasutajatega.

Populaarsed näited: YouTube, Netflix, Audible, Spotify, Tiktok

Kasutatavad tehnoloogiad:

  • Rakenduse kasutajaliidese loomiseks looge rakendus React, Next.js või Gatsby
  • npm pakettreageerimisseade meedia mängimiseks
  • Pilv- või Firebase-salvestusruum meedia üleslaadimiseks
  • Algoolia meediumi otsimiseks nime järgi (nt helirada, video, film jne)

Looge sõnumside rakendus

Sõnumisõnumid on tohutult suured. Tõenäoliselt on teie telefonis tasuta sõnumside teenus nagu WhatsApp või Viber või teie sotsiaalmeedia platvormile sisseehitatud teenus nagu Facebook Messenger. Sellised teenused nagu kiirsuhtlusega intercom on saadaval ka veebirakendustena, et ettevõtted saaksid oma kasutajatele kohest kliendituge pakkuda.

Iga sõnumside rakendus koosneb vestlusest kahe või enama inimesega, kus sõnumeid saadetakse reaalajas. Sarnaselt sotsiaalmeedia rakendusele soovitaksin ka sellist teenust nagu Firebase või Hasura, mis transpordib andmeid WebSocketide kaudu, et sõnumeid saaks kohe vestluses kuvada.

Suurem osa sõnumsiderakendustest on mobiilseadmetes või tahvelarvutites. Kui see pole teie esimene rakenduse kloon, on see suurepärane võimalus veebist kaugemale liikuda ja React Native abil mobiilirakendus ehitada. Veelgi parem - võite veebi- ja mobiilsõnumirakenduse ehitada samaaegselt sellise paketiga nagu React Native Web.

Populaarsed näited: WhatsApp, Viber, ebakõla, Messenger, Slack

Kasutatavad tehnoloogiad:

  • Reageerige Native või React Native Web, et ehitada seda mobiilirakenduse või hübriidrakendusena (veeb + mobiil)
  • Firebase, AWS Amplify või Hasura (kasutades GraphQL-i tellimusi) sõnumite reaalajas saatmiseks
  • Pilv- või Firebase-salvestusruum piltide või videosisuga sõnumite saatmiseks
  • npm pakett emoji-mart, mis on mõeldud kasutajate sõnumitesse lisamiseks lõdvalt sarnase emotikonide valija jaoks

Ehitage tootlikkuse rakendus

See on ilmselt kõige lihtsam rakendustüüp, millega alustada, arvestades, et seal on nii palju põhitootlikkusrakenduste õpetusi. Kui räägin tootlikkusrakendustest, pean silmas märkmete koostamise rakendusi, meeskondade haldamise rakendusi ja ülesandeloendeid. Üldiselt võib öelda, et kõik, mis aitab teil teatud ülesannet täita või produktiivsem olla.

Tootlikkusrakenduse ehitamisel on suurepärane see, et see pakub rakenduse loomisele hea sissejuhatuse, kuna see on paljude funktsioonide suhteliselt lihtne.

Võite alustada millegi lihtsaga, näiteks tekstiredaktoriga, et vormindatud tekst hõlpsalt kirjutada ja seejärel seda laiendada. Seejärel lisage võimalus oma arvutisse üksikute failidena teksti salvestada. Pärast seda on funktsioon selle märgistuse HTML-vormingus eksportimiseks vormindatud meilide kirjutamiseks.

Tootlikkusrakenduse loomise alustamiseks küsige, millised funktsioonid võivad rakendusel teie päevakava lihtsustada ja sealt edasi liikuda.

Populaarsed näited: Todoist, arusaam, asjad jne.

Kasutatavad tehnoloogiad:

  • Looge veebirakendus React või mobiilile rakendus Reageerige
  • npm paketi reageerimine-märgistamine, et kuvada oma rakenduse kasutajaliideses märgistus
  • npm pakett reageeri-codemirror2 märkmete koodi kirjutamiseks
  • npm pakett saab loendi sisu ümberkorraldamiseks klõpsates ja lohistades lohistada

Edu teie rakenduste loomise teekonnal ja näeme teid järgmises artiklis.

Kas soovite saada JS-i meistriks? Liituge 2020. aasta JS Bootcampiga

Liituge 2020. aasta JS Bootcampiga

Jälgi + ütle tere! ? Twitter • codeartistry.io