5 Reagoi projektiisi, joita tarvitset portfoliossasi

Olet kirjoittanut työn ja nyt sinulla on vankka käsitys React-kirjastosta.

Tämän lisäksi sinulla on hyvä käsitys JavaScriptistä ja laitat sen hyödyllisimmät ominaisuudet käytettäväksi React-koodissasi.

Olet edistynyt paljon ... mutta mitä nyt teet?

Kuinka voit kuroa kuilun Reactin perusteiden tuntemisen ja ammatilliseksi kehittäjäksi tulemisen välillä?

Monet kehittäjät törmäävät tähän ongelmaan, kun he saavuttavat tämän React-oppimisen tai muun JavaScript-kirjaston välivaiheen. He tuntevat suurimman osan itse kirjastosta sekä JavaScriptin käyttääkseen sitä tehokkaasti, mutta eivät tiedä seuraavaa askelta.

Miksi sinun pitäisi rakentaa sovelluksia

Kun olet oppinut Reactin perusteet, sinun on hankittava mukavat rakennussovellukset saamillasi taidoilla. Tämä käytäntö on tehokkaan React-kehittäjän ytimessä - osaa rakentaa omia sovelluksia ja hyödyntää React-ekosysteemin oikeita työkaluja siihen.

Mutta mitä sovelluksia sinun tulisi rakentaa Reactin kanssa, jotta voit parantaa kehittäjäkykyäsi?

Tässä artikkelissa käymme läpi 5 erityyppistä sovellusta, jotka kannattaa harkita todellisen todellisen sovelluksen jälkeen. Sovellusten rakentamisen suuri etu on, että käyttöönoton jälkeen ne voidaan yhdistää salkkuusi tehokkaana ja välittömänä tapana osoittaa työnantajille asiantuntemustasi.

Kustakin sovellustyypistä käsittelen suosittuja esimerkkejä, joita voit käyttää inspiraationa, työkalut, joita suosittelen kunkin ominaisuuden rakentamiseen, sekä lyhyt esittely sellaisesta sovelluksesta, jonka olen itse tehnyt Reactin avulla.

Kuinka aloittaa sovellusten rakentamisen React-sovelluksella

Toisin kuin itse React-oppiminen, josta löydät kymmeniä artikkeleita sukeltaa syvemmälle mihinkään siihen liittyvään käsitteeseen, sovelluksen rakentaminen on pitkälti itseohjattua toimintaa ilman suurta ohjausta.

Jos aloitat sovellusten rakentamisen itse, suosittelen etsimään artikkeleita, jotka opettavat sinulle sovelluksen rakentamisen perusteet ja sukeltaa niiden tarjoamaan sovelluksen lähdekoodiin. Jopa koodin lukeminen itse tekee sinusta paremman kehittäjän.

Jos nämä esimerkit näyttävät liian pelottavilta rakentaa itseäsi, muista, mitä tunnet React-kehittäjänä, jotta sovellukset voidaan jakaa komponentteihin. Jokainen sovellus on rakennettava kappaleittain, komponentti kerrallaan. Keskity rakentamaan yksi ominaisuus kerrallaan. Harjoittelun avulla saat paremman käsityksen siitä, mitä työkaluja tarvitset kullekin ominaisuudelle, samoin kuin sovellusten rakentamisen yleiset mallit yleensä.

Huomaa: Yksi väärinkäsitys, joka minulla oli, kun aloitin tällaisten todellisten sovellusten rakentamisen, oli, että jouduin rakentamaan koko taustan / sovellusliittymän Nodella tai Pythonilla saadakseni tarvitsemani toiminnot. Sinun ei tarvitse tehdä niin. Tutki tehokkaita palvelimettomia tekniikoita, kuten Firebase, AWS Amplify tai Hasura, jotka antavat sinulle täydellisen taustapalvelun heti tarvitsematta luoda ja ottaa sitä itse käyttöön. Sijoita työkaluihin, jotka tekevät sinusta tuottavampia ja säästävät aikaa.

Rakenna sosiaalisen median sovellus

Jos minun piti suositella vain yhtä sovellusta, jonka voit lisätä salkkuusi, se olisi sosiaalisen median sovellus. Twitter, Facebook ja Instagram ovat melko hienostuneita, ja niissä on jatkuvasti kasvava määrä ominaisuuksia, jotka pitävät käyttäjät sitoutuneina. Tämän lisäksi se on sellainen sovellus, jonka tunnet todennäköisesti parhaiten siitä, miten sen pitäisi toimia.

Lähes kaikissa sosiaalisen median sovelluksissa on useita ominaisuuksia:

  • käyttäjien kyky tehdä viestejä teksti- ja / tai mediatiedostoilla,
  • näiden viestien suora syöte,
  • antaa muiden käyttäjien tykätä ja kommentoida viestejä,
  • samoin kuin käyttäjän todennus.

Ja kun olet saanut sen alas, voit lisätä profiileja kullekin käyttäjällesi, jossa he voivat räätälöidä tilinsä ja hallita seuraamiaan käyttäjiä.

Sovellusesimerkit: Instagram, Twitter, Snapchat, Reddit

Hyödynnettävät tekniikat:

  • Luo React-sovellus tai Next.js, jotta voit luoda dynaamisen käyttöliittymän viesteistä, tykkäyksistä ja viesteistä
  • Firebase, AWS Amplify tai Hasura (käyttäen GraphQL: ää tilausten kanssa) reaaliaikaisia ​​tietoja varten
  • Palvelimettomat toiminnot, kuten AWS Lambda tai Firebase-toiminnot ilmoituksia varten
  • Cloudinary- tai Firebase-tallennustila kuvien tai videoiden lataamista varten

Luo verkkokauppasovellus

Valitse muutama suosikkisivustosi ja takaan, että ainakin yhdessä niistä on upotettu verkkokauppasovellus, vaikka se olisi vain pieni myymälä. Verkkokaupan sovellukset ovat läsnä kaikkialla, ja lyön vetoa, että sinua kehotetaan rakentamaan sellainen jossain vaiheessa urasi kehittäjänä.

On houkuttelevaa rakentaa vaikuttava, laajamittainen sähköisen kaupankäynnin foorumi, kuten Amazon, mutta suosittelisin työskentelemään pienemmän ja tarkemman kohteen parissa.

Mene markkinoiden sijasta, joka tarjoaa kaikki asiat kaikille ihmisille, mene sinua kiinnostavan teollisuuden kanssa. Jos esimerkiksi pidät kodintuotteista, voit tarkastella mitä Crate & Barrel tai Williams-Sonoma ovat rakentaneet sivustoilleen.

Tuotteiden lisäksi verkkokaupan sovellukset voivat tarjota palvelua kuluttajille. Jos kyseessä on palvelu, joka tarjotaan paikallisesti, sovellukseen voidaan lisätä interaktiivinen kartta, jotta palveluntarjoaja ja asiakas tietävät toistensa sijainnin. Mieleen tulevat ruoanjakelusovellukset, kuten UberEats ja Doordash, jotka edellyttävät ruokaa tilanneen henkilön sijaintia.

Riippumatta siitä, mitä myydään, olipa kyse fyysisestä tai virtuaalisesta, jokainen verkkokauppasovellus koostuu myymälästä, jossa on tuotteen tai palvelun yksityiskohdat. Jos käyttäjät voivat ostaa useita tuotteita kerralla, sillä tulisi olla ostoskori, jossa käyttäjät voivat hallita ostamiaan tuotteita.

Lopuksi jokainen verkkokauppasovellus tarvitsee maksuprosessin, jossa käyttäjät voivat joko ostaa tuotteitaan nimettömästi tai kun ne on todennettu.

Suositut esimerkit: Airbnb, Uber, UberEats, Doordash, Etsy, Udemy

Hyödynnettävät tekniikat:

  • Luo React-sovellus tai Gatsby myymälää ja tuotteita varten
  • Raita paketin reagointi-raita-elementeillä maksujen käsittelyä varten
  • Palvelimeton toiminto, kuten Netlify / AWS Lambda, käsittelemään maksuprosessia
  • Algolia salamannopeaan tuotehakuun
  • Snipcart vaunun luomiseen ja kärrytuotteiden hallintaan

Rakenna viihdesovellus

Tämä on laajin kaikista luokista. Mitä tarkoitan viihteellä? Sovellus, joka on keskittynyt tietyntyyppiseen mediaan. Tämä voi olla elokuvia, podcasteja tai musiikkia muutamaksi.

Hienoja esimerkkejä tästä ovat Netflix, Audible ja Soundcloud tai Spotify. Jos sisällytät taidetta tai muotoilua tähän luokkaan, voimme lisätä luetteloon sivustoja, kuten Behance tai Dribbble.

Tämän kategorian mielenkiintoista on, että monet viihdesovellukset reunustavat sosiaalisen median sovelluksia. Esimerkiksi Tiktokin kaltaista sovellusta, joka sisältää lyhyitä, mielikuvituksellisia videoita, ohjaa korkea käyttäjien sitoutuminen. Toinen sovellus, kuten YouTube, keskittyy käyttäjien vuorovaikutukseen tykkäysten, kommenttien ja tilausten kautta.

Ajattele, minkä tyyppinen media tai viihde sinua eniten kiinnostaa ja katso, pystytkö rakentamaan sen ympärille yksinkertaisen alustan, johon käyttäjät voivat kirjautua ja tallentaa haluamansa sisällön. Tämän jälkeen voit tutkia sosiaalisten elementtien lisäämistä, jotka mahdollistavat kommenttien lisäämisen, tykkäämisen ja sisällön jakamisen muiden alustan käyttäjien kanssa.

Suositut esimerkit: YouTube, Netflix, Audible, Spotify, Tiktok

Hyödynnettävät tekniikat:

  • Luo sovelluksen käyttöliittymä luomalla React App, Next.js tai Gatsby
  • npm-paketti-reagointisoitin median toistamiseen
  • Cloudinary- tai Firebase-tallennustila median lataamiseen
  • Algolia median etsimiseen nimen (esim. Ääniraidan, videon, elokuvan jne.) Perusteella

Luo viestisovellus

Viestintäsovellukset ovat valtavia. Puhelimessasi on todennäköisesti ilmainen viestipalvelu, kuten WhatsApp tai Viber, tai se on rakennettu sosiaalisen median alustallesi, kuten Facebook Messenger. Intercomin ja pikaviestien kaltaisia ​​palveluja on saatavana myös verkkosovelluksina, jotta yritykset voivat tarjota välitöntä asiakastukea käyttäjilleen.

Mikä tahansa viestintäsovellus koostuu keskustelusta kahden tai useamman henkilön kanssa, jos viestit lähetetään reaaliajassa. Samanlainen kuin sosiaalisen median sovellus, suosittelen palvelua, kuten Firebase tai Hasura, joka kuljettaa tietoja WebSocketsin kautta viestejä varten, jotka näytetään välittömästi keskustelussa.

Suurin osa viestisovelluksista on mobiililaitteissa tai tableteissa. Jos tämä ei ole ensimmäinen sovelluskloonisi, tämä on loistava mahdollisuus siirtyä verkon ulkopuolelle ja rakentaa mobiilisovellus React Native -sovelluksella. Parempi vielä, voit rakentaa verkko- ja mobiiliviestisovelluksen samanaikaisesti React Native Webin kaltaisen paketin kanssa.

Suositut esimerkit: WhatsApp, Viber, Discord, Messenger, Slack

Hyödynnettävät tekniikat:

  • React Native tai React Native Web rakentaa mobiilisovelluksena tai hybridisovelluksena (verkko + mobiili)
  • Firebase, AWS Amplify tai Hasura (käyttäen GraphQL-tilauksia) viestien lähettämiseen reaaliajassa
  • Pilvi- tai Firebase-tallennustila kuvan tai videosisällön sisältävien viestien lähettämiseen
  • npm-paketti emoji-mart - slick-tyyppinen emoji-valitsin, jonka käyttäjät voivat sisällyttää viesteihinsä

Rakenna tuottavuussovellus

Tämä on luultavasti helpoin sovellustyyppi, jolla voidaan aloittaa, kun otetaan huomioon, että siellä on niin paljon oppaita tuottavuuden perussovelluksista. Kun puhun tuottavuussovelluksista, tarkoitan muistiinpanosovelluksia, tiimien hallintasovelluksia ja tehtäväluetteloita. Yleisesti ottaen kaikki mikä auttaa sinua suorittamaan tietyn tehtävän tai olemaan tuottavampi.

Ensinnäkin tuottavuusohjelman rakentamisessa on hienoa, että se tarjoaa hyvän johdannon sovellusten rakentamiseen monien sen ominaisuuksien suhteellisen yksinkertaisuuden vuoksi.

Voit aloittaa jollakin yksinkertaisella, kuten tekstieditorilla, jotta voit kirjoittaa muotoillun tekstin helposti merkinnällä ja laajentaa sen jälkeen. Lisää sitten kyky tallentaa tekstiä yksittäisinä tiedostoina tietokoneellesi. Sen jälkeen ominaisuus viedä tämä merkintä HTML-muotoon muotoiltujen sähköpostien kirjoittamiseen.

Aloita tuottavuussovelluksen rakentaminen kysymällä, mitä ominaisuuksia sovelluksella voi olla, jotta päivittäinen aikataulusi olisi helpompaa, ja siirry sieltä.

Suositut esimerkit: Todoisti, käsitys, asiat jne.

Hyödynnettävät tekniikat:

  • Luo React-sovellus verkkoon tai React Native mobiililaitteille
  • npm -paketin reaktiomerkintä näyttää merkinnän sovelluksen käyttöliittymässä
  • npm-paketti reagoi-codemirror2 koodin kirjoittamiseen muistiinpanoihisi
  • npm-paketti voidaan vetää reagoimaan luettelon sisällön uudelleenjärjestämiseen napsauttamalla ja vetämällä

Onnea sovelluksen rakennuksen matkalle ja näen sinut seuraavassa artikkelissa.

Haluatko tulla JS-mestariksi? Liity vuoden 2020 JS Bootcampiin

Liity vuoden 2020 JS Bootcampiin

Seuraa + Sano Hei! ? Twitter • codeartistry.io