Bevitte a munkát, és most már megértette a React könyvtárat.
Ráadásul jól ismeri a JavaScriptet, és a React kódban használja a leghasznosabb funkciókat.
Nagyon sokat haladtál ... de most mit csinálsz?
Hogyan lehet áthidalni a szakadékot a React alapjainak ismerete és a szakmai fejlesztővé válás között?
Sok fejlesztő találkozik ezzel a problémával, amikor elérik a React vagy bármely más JavaScript könyvtár megtanulásának ezt a köztes szakaszát. Ismerik a könyvtár nagy részét, valamint a hatékony használatához szükséges JavaScript-et, de nem tudják a következő lépést.
Miért építsen alkalmazásokat
Miután megtanulta a React alapjait, kényelmes építési alkalmazásokat kell beszereznie a megszerzett készségekkel. Ez a gyakorlat abban rejlik, hogy hatékony React fejlesztők vagyunk - tudva, hogyan kell saját alkalmazásokat építeni, és ehhez felhasználva a React ökoszisztéma megfelelő eszközeit.
De milyen alkalmazásokat kellene építenie a React-szel, hogy fejlessze fejlesztői képességeit?
Ebben a cikkben 5 különböző alkalmazástípust mutatunk be, amelyeket érdemes fontolóra venni az alap Todo alkalmazás után. Az alkalmazások építésének nagy előnye, hogy telepítésük után összekapcsolhatók az Ön portfóliójával, amely hatékony, azonnali módja annak, hogy megmutassák a munkaadóknak a szakértelmet.
Minden alkalmazástípusnál bemutatom azokat a népszerű példákat, amelyeket inspirációként használhat, azokat az eszközöket, amelyeket az egyes funkciók felépítéséhez ajánlanék, valamint egy rövid bemutatót egy ilyen alkalmazásról, amelyet személyesen készítettem a React használatával.
Hogyan kezdhetjük el az alkalmazások létrehozását a React alkalmazással
Ellentétben a React tanulásával, ahol cikkek tucatjait találhatja meg, hogy jobban elmerülhessen bármely kapcsolódó koncepcióban, az alkalmazás felépítésének folyamata nagyrészt önálló tevékenység, sok útmutatás nélkül.
Ha önállóan kezdi az alkalmazások készítését, akkor azt javasoljuk, hogy keressen olyan cikkeket, amelyek megtanítják az alkalmazás készítésének alapjait, és elmélyülnek az általuk biztosított alkalmazás forráskódjában. Még a kód olvasásának folyamata is jobb fejlesztővé tesz.
Ha ezek a példák túl ijesztőnek tűnnek az önmaga felépítéséhez, ne feledje, mit ismer a React fejlesztőként - hogy az alkalmazásokat összetolható összetevőkre bontsa. Minden alkalmazást darabonként, alkatrészenként kell felépíteni. Összpontosítson egy-egy funkció kiépítésére. A gyakorlattal jobban megértheti, hogy milyen eszközökre lesz szüksége az egyes funkciókhoz, valamint az alkalmazások építésének általános szokásaihoz.
Megjegyzés: Az egyik téves elképzelésem volt, amikor elkezdtem létrehozni az ilyen valódi alkalmazásokat, hogy egy teljes háttérprogramot / API-t kellett készítenem a Node vagy a Python segítségével a szükséges funkcionalitás megszerzéséhez. Nem kell ezt tennie. Vizsgáljon olyan erőteljes kiszolgáló nélküli technológiákat, mint a Firebase, az AWS Amplify vagy a Hasura, amelyek teljes háttérképet nyújtanak a dobozból anélkül, hogy saját maga kellene létrehoznia és telepítenie. Fektessen be olyan eszközökbe, amelyek termelékenyebbé és időmegtakarítóbbá teszik Önt.Készítsen közösségi média alkalmazást
Ha csak egy alkalmazást kellett javasolnom, amelyet hozzáadhatna a portfóliójához, az egy közösségi média alkalmazás lenne. A Twitter, a Facebook és az Instagram meglehetősen kifinomult, és folyamatosan növekvő számú funkciót tartalmaz a felhasználók elkötelezettségének fenntartására. Ráadásul ez az a fajta alkalmazás, amelyet valószínűleg a legjobban ismersz annak működésével kapcsolatban.
Számos olyan funkció van, amely szinte az összes közösségi média alkalmazásban közös:
- a felhasználók képessége szöveges és / vagy médiafájlokkal történő bejegyzések készítésére,
- élő hírcsatorna ezekről a bejegyzésekről,
- lehetővé téve más felhasználók számára a bejegyzések tetszését és megjegyzését,
- valamint a felhasználói hitelesítést.
És miután ezt lerontotta, hozzáadhat profilokat minden felhasználóhoz, ahol személyre szabhatják fiókjukat, valamint kezelhetik az általuk követett felhasználókat.
Alkalmazás-példák: Instagram, Twitter, Snapchat, Reddit
Használandó technológiák:
- Hozzon létre React alkalmazást vagy Next.js-t a hozzászólások, tetszések és üzenetek dinamikus felhasználói felületének létrehozásához
- Firebase, AWS Amplify vagy Hasura (előfizetéssel a GraphQL használatával) valós idejű adatokhoz
- Szerver nélküli funkciók, például AWS Lambda vagy Firebase funkciók az értesítésekhez
- Cloudinary vagy Firebase tárhely képek vagy videók feltöltéséhez
Hozzon létre egy e-kereskedelmi alkalmazást
Válasszon ki néhány kedvenc webhelyet, és garantálom, hogy legalább az egyikbe be van ágyazva egy e-kereskedelmi alkalmazás, még akkor is, ha csak egy kis kirakatról van szó. Az e-kereskedelmi alkalmazások mindenütt jelen vannak, és fogadni mernék, hogy fejlesztői karrierjének egy pontján fel kell hívnia egy ilyen létrehozására.
Csábító egy olyan lenyűgöző, nagyszabású e-kereskedelmi platform felépítése, mint az Amazon, de azt javaslom, hogy dolgozzon valami kisebb és koncentráltabb munkán.
A minden ember számára mindent biztosító piactér helyett menjen egy olyan iparral, amely érdekli Önt. Például, ha kedveli a háztartási cikkeket, akkor megnézheti, mit épített a Crate & Barrel vagy a Williams-Sonoma a webhelyein.
A termékeken kívül az e-kereskedelmi alkalmazások szolgáltatást nyújthatnak a fogyasztóknak. Ha helyben nyújtott szolgáltatásról van szó, akkor interaktív térképet lehet hozzáadni az alkalmazáshoz, hogy a szolgáltató és az ügyfél tudják egymás helyét. Olyan ételszállítási alkalmazások jutnak eszembe, mint az UberEats és a Doordash, amelyekhez az ételt megrendelő személy tartózkodási helye szükséges.
Függetlenül attól, hogy mit árusítanak, legyen az fizikai vagy virtuális, minden e-kereskedelmi alkalmazás tartalmaz néhány kirakatot a termék vagy a szolgáltatás részleteivel. Ha a felhasználók egyszerre több terméket is megvásárolhatnak, rendelkeznie kell egy bevásárlókocsival, ahol a felhasználók kezelhetik a megvásárolni kívánt termékeket.
Végül minden e-kereskedelmi alkalmazásnak fizetési folyamatra van szüksége, amelynek során a felhasználók név nélkül vásárolhatják meg termékeiket, vagy hitelesítést követően.
Népszerű példák: Airbnb, Uber, UberEats, Doordash, Etsy, Udemy
Használandó technológiák:
- Hozzon létre React alkalmazást vagy Gatsby-t a kirakathoz és a termékek megjelenítéséhez
- Csík a reakció-csík elemekkel a fizetés feldolgozásához
- Kiszolgáló nélküli funkció, például a Netlify / AWS Lambda a fizetési folyamat kezeléséhez
- Algólia villámgyors termékkereséshez
- Snipcart a kosár egyszerű létrehozásához és a kosár termékeinek kezeléséhez
Építsen szórakoztató alkalmazást
Ez az összes kategória közül a legszélesebb. Mit értek szórakozás alatt? Egy alkalmazás, amely egy bizonyos típusú média köré koncentrálódik. Ez lehet film, podcast vagy zene, hogy csak néhányat említsünk.
Néhány nagyszerű példa erre a Netflix, az Audible és a Soundcloud vagy a Spotify. Ha ebbe a kategóriába művészetet vagy designt is felvesz, akkor olyan webhelyeket vehetünk fel a listába, mint a Behance vagy a Dribbble.
A kategória érdekessége, hogy sok szórakoztató alkalmazás határolja a közösségi média alkalmazásokat. Például egy olyan alkalmazást, mint a Tiktok, amely rövid, ötletes videókat tartalmaz, a magas felhasználói elkötelezettség vezérli. Egy másik alkalmazás, például a YouTube, a felhasználók interakcióira összpontosít, mint a tetszések, megjegyzések és feliratkozások.
Gondoljon arra, hogy milyen típusú média vagy szórakozás érdekel a legjobban, és nézze meg, fel tud-e építeni köré egy egyszerű platformot, ahol a felhasználók bejelentkezhetnek és elmenthetik a nekik tetsző tartalmat. Ezt követően vizsgálja meg a társadalmi elemek hozzáadását, amelyek lehetővé teszik megjegyzések hozzáadását, például a tartalom megosztását és a tartalom megosztását a platform többi felhasználójával.
Népszerű példák: YouTube, Netflix, Audible, Spotify, Tiktok
Használandó technológiák:
- Az alkalmazás felhasználói felületének létrehozásához hozza létre a React App, a Next.js vagy a Gatsby alkalmazást
- npm csomag-lejátszó a média lejátszásához
- Cloudinary vagy Firebase tárhely a média feltöltéséhez
- Algólia média keresésére név szerint (pl. Hangsáv, videó, film stb.)
Hozzon létre egy Messaging alkalmazást
Az üzenetküldő alkalmazások hatalmasak. Valószínűleg van egy ingyenes üzenetküldő szolgáltatása, például a WhatsApp vagy a Viber a telefonján, vagy beépített a közösségi média platformjába, például a Facebook Messenger. Az olyan szolgáltatások, mint az Intercom azonnali üzenetküldéssel, webalkalmazásokként is elérhetők, így a vállalatok azonnali ügyfélszolgálatot tudnak nyújtani felhasználóiknak.
Bármely üzenetküldő alkalmazás két vagy több személlyel folytatott beszélgetésből áll, ahol az üzeneteket valós időben küldik. A közösségi média alkalmazáshoz hasonlóan ajánlanék egy olyan szolgáltatást, mint például a Firebase vagy a Hasura, amely adatokat továbbít a WebSockets segítségével, hogy az üzenetek azonnal megjelenjenek a beszélgetésben.
Az üzenetküldő alkalmazások többsége mobileszközön vagy táblagépen található. Ha ez nem az első alkalmazásklónja, akkor ez nagyszerű esély arra, hogy tovább lépjen az interneten, és mobilalkalmazást építsen a React Native segítségével. Még jobb, ha webes és mobil üzenetküldő alkalmazást készíthet egyidejűleg egy olyan csomaggal, mint a React Native Web.
Népszerű példák: WhatsApp, Viber, Discord, Messenger, Slack
Használandó technológiák:
- Reagáljon a Native vagy a React Native Web alkalmazásra mobilalkalmazásként vagy hibrid alkalmazásként (web + mobil)
- Firebase, AWS Amplify vagy Hasura (GraphQL-előfizetéssel) valós idejű üzenetek küldéséhez
- Felhős vagy Firebase tárhely kép- vagy videotartalommal rendelkező üzenetek küldéséhez
- npm csomag emoji-mart egy ügyes Slack-szerű hangulatjel-választó számára, amelyet a felhasználók felvehetnek az üzeneteikbe
Építsen egy termelékenységi alkalmazást
Ez valószínűleg a legegyszerűbb típusú alkalmazás, amellyel el lehet kezdeni, tekintve, hogy olyan sok oktatóanyag van az alapvető termelékenységi alkalmazásokról. Ha a termelékenységi alkalmazásokról beszélek, a jegyzeteléssel foglalkozó alkalmazásokra, a csapatok kezelésére szolgáló alkalmazásokra és a feladatlistákra gondolok. Általánosságban elmondható, hogy bármi, ami segít egy bizonyos feladat végrehajtásában, vagy produktívabb lehet.
Ami először nagyszerű a termelékenységi alkalmazás kiépítésében, az az, hogy számos funkciójának viszonylagos egyszerűsége miatt jó bevezetést nyújt az alkalmazásépítéshez.
Kezdhet valamivel egyszerűbbel, például egy szövegszerkesztővel, amellyel formázott szöveget írhat leírás nélkül, majd kibővítheti. Ezután adja hozzá a szöveg egyedi fájlokként történő mentésének lehetőségét a számítógépén. Ezt követően egy funkció, amely exportálja ezt a jelölést HTML formátumba formázott e-mailek írására.
A termelékenységi alkalmazás létrehozásának megkezdéséhez kérdezze meg, hogy az alkalmazás milyen funkciókkal teheti könnyebbé a napi menetrendet, és onnan indul.
Népszerű példák: Todoist, Fogalom, Dolgok stb.
Használandó technológiák:
- Hozzon létre React alkalmazást webhez vagy React Native mobilhoz
- npm csomag reagál-jelölés a jelölés megjelenítéséhez az alkalmazás felhasználói felületén
- Az npm pack-codemirror2 csomag a jegyzetbe történő kód beírásához
- Az npm csomag visszahúzható a lista tartalmának átrendezéséhez kattintással és húzással
Sok sikert az alkalmazásépítéshez, és a következő cikkben találkozunk.
JS-mester akar lenni? Csatlakozzon a 2020-as JS Bootcamp-hoz
Kövesd + Köszönj! ? Twitter • codeartistry.io