8 React.js projektötlet a tanulás megkezdéséhez

A tanulás egyik legjobb módja a cselekedet. De gyakran a fejlesztők azzal a nagy kérdéssel küzdenek, hogy "mit építsek?"

Íme 8 projektötlet, projekt-rövidekkel és elrendezési ötletekkel kiegészítve, hogy ezzel elkezdhesse a tanulást.

• Üzleti és valós világ: Térképstatisztikai irányítópult
• Szórakozás és érdekes: hangszer
• Személyes és portfólió: Blog
• Termelékenység: Notebook
• Rejtvények és játékok: Space Invaders
• Eszközök és könyvtárak: Kerettéma
• Projekt-kiegészítők: Webmentions
• Klónok: Termékvadászat

Ez az ingyenes 50 projekt, a React & Static Web e-könyvének előnézete. A teljes 50 projektötletet, beleértve ezt a 8-at, megtalálja az 50reactprojects.com címen.

Térképstatisztikai irányítópult

Kategória: Üzleti és valós világ

Hozzon létre egy térkép-irányítópultot, amely a COVID-19 statisztikáit és földrajzi adatait mutatja.

Rövid

A globális járvány kezelése azt jelenti, hogy a koronavírushoz hasonló vírusok földrajzi elhelyezkedésük alapján másképp hatnak a világra.

Az egyes országok statisztikáinak lebontásával készített térkép hasznos módszer arra, hogy meghatározhassuk, hogy mely országokat érinti a leginkább.

1. szint

Az országonkénti statisztikák megtekintésének legegyszerűbb módja, ha egy térképet böngészhet, és az egyes országok statisztikái elérhetők az adott ország mellett.

Hozzon létre egy olyan térképészeti alkalmazást, amely a betegség.sh Coronavirus API-t használja, és jelölőket ad hozzá az egyes országok térképéhez a COVID-19 esetek számával együtt.

2. szint

Bár az egyes országokra vonatkozó statisztikák hasznosak, hasznos lehet összehasonlítani ezeket a statisztikákat az egész világon előforduló esetek számával.

Adjon hozzá egy statisztikai irányítópultot, amely megmutatja a világon a COVID-19 esetek számát, valamint az API egyéb hasznos statisztikáit.

3. szint

A jelenlegi statisztikák megszerzése jó módszer a világ jelenlegi helyzetének megértésére, de hogyan viszonyul ez történelmileg?

A korábbi adatok API segítségével grafikonokat jeleníthet meg az irányítópulton, amelyek kontextust nyújtanak a vírus növekedéséhez és terjedéséhez.

Csinálni

• Hozzon létre egy új térképalkalmazást
• API országok adatainak lekérése
• Markerek hozzáadása a térképhez
• Statisztikák hozzáadása a jelölőkhöz
• API globális adatok lekérése
• Hozzon létre egy statisztika irányítópultot
• Adjon hozzá globális statisztikákat
• API előzményadatok lekérése
• Grafikonok hozzáadása a térképhez

Eszköztár

• Nyílt Betegségadat-API (disease.sh)
• React Leaflet (react-leaflet.js.org)
• Gatsby szórólap-indító (github.com)

Oktatóanyagok

• Hogyan hozhatunk létre koronavírus (COVID-19) irányítópultot és térképalkalmazást a React with Gatsby és a Leaflet segítségével (freecodecamp.org)
• Hogyan adhatunk Coronavirus (COVID-19) esetstatisztikát a React térkép irányítópultjára a Gatsby segítségével (freecodecamp.org)
• Feltérképezés a React Leaflet segítségével (egghead.io)

Ihlet

• COVID-19 műszerfal a Johns Hopkins Egyetem (JHU) Rendszertudományi és Mérnöki Központjának (CSSE) részéről (coronavirus.jhu.ed)
• Koronavírus (COVID-19) Irányítópult bemutató (coronavirus-map-dashboard.netlify.app)

Elrendezés ötlete

Hangszer

Kategória: Szórakozás és érdekes

Hozzon létre egy interaktív zongorát, amellyel zenét játszhat a billentyűzetével.

Rövid

Nem mindenkinek van luxusa a hangszer birtoklása, de lehet, hogy azoknak van laptopjuk, telefonjuk vagy táblagépük. A zongora birtoklása hatékony módja annak, hogy az emberek zenéljenek, még akkor is, ha korábban nem volt rá lehetőségük.

1. szint

A böngésző és a webes audio API-k segítségével olyan hangokat hozhatunk létre, amelyek összerakva valóban zenének tűnhetnek.

Hozzon létre egy gombsorozatot, amely rákattintással játssza le a léptékű jegyzeteket.

2. szint

Noha korábban nem mindenki játszott hangszeren, a hangszerhez hasonló hangszer fogalma és kezelőfelülete általában intuitívabb, mint egy csomó gomb.

Hozzon létre egy zongoraelrendezést olyan gombokkal, amelyek működnek a gombra kattintva vagy a fizikai billentyűzet használatával.

3. szint

Lehet, hogy korlátozott helyünk van a böngészőben, de sokféle jegyzet, skála és hang van, amelyet egy elektromos billentyűzet képes hozzáadni néhány hozzáadott effektussal.

Effekt váltók létrehozása, amelyek megváltoztatják a jegyzetek hangját, amikor be vannak kapcsolva.

Csinálni

• Gombok létrehozása
• Hang lejátszása, ha rákattint
• Rendezze a jegyzeteket skálán
• Hozzon létre zongora elrendezést
• Állítsa be a billentyűzet eseményeit
• Effektus elrendezés létrehozása
• Hangeffektusok be- és kikapcsolása

Eszköztár

• Reagáljon a HotKeysre (github.com)

Oktatóanyagok

• Zongora építése reagálási kampókkal (fejlesztő)
• Hogyan készítsünk egy zongora billentyűzetet vanília JavaScript használatával (freecodecamp.org)
• Zongora építése a tone.js segítségével! (dev.to)
• Hogyan készítettem egy zongorát csak 1 KB JavaScript-ben (frankforce.com)

Ihlet

• React Guitar (react-guitar.com)

Elrendezés ötlete

Blog

Kategória: Személyes és portfólió

Hozzon létre egy blogot, amelynek segítségével megoszthatja karrierélményeit és projektjeit.

Rövid

Bármely pályafutás során, ha blogot osztasz meg tapasztalataid megosztására, ez jó módja annak, hogy az emberek tudják, min dolgozol, és segíts másoknak tanulni a tapasztalataidból.

Ez egyúttal a tanultak megerősítésének módja is, hogy a jövőben is hivatkozhasson rá.

1. szint

Ahhoz, hogy megoszthassa tapasztalatait, szükséged van egy webhelystruktúrára, amely lehetővé teszi új tartalom létrehozását és a meglévő tartalom kezelését.

Ennek egyik módja az, ha létrehoz egy jelölőfájlokat, amelyeket a webhelye forrásokkal hoz létre új oldalak létrehozásához és a bejegyzések megjelenítéséhez.

Hozzon létre egy blogot tartalomforrásként jelölőfájlok használatával.

2. szint

Ha tartalmát megjelöli fájlokban, az jó módja a statikus tartalom kezelésének, de előfordulhat, hogy nem akarja, hogy minden egyes kódot szerkesszen, amikor bejegyzést ír vagy szerkeszt.

Integráljon egy tartalomkezelő rendszert, amely lehetővé teszi új tartalom hozzáadását vagy meglévő szerkesztését egy szép felhasználói felülettel.

3. szint

Ha kódot oszt meg a blogján, a HTML natív módon támogatja a kódot és az előcímkéket, amelyek segítenek a kód olvasható formázásában. De ez nem tartalmazza a szintaxis kiemelését, amely javítja az olvashatóságot.

Integráljon egy szintaxis kiemelőt, amely olvashatóbbá teszi a kódblokkokat.

Csinálni

• Hozzon létre egy blogot
• Adja hozzá az első statikus tartalmat
• Forrás statikus tartalom
• Integrálja a CMS-t
• Kód hozzáadása a tartalomhoz
• Szintaxis kiemelés hozzáadása

Eszköztár

• Netlify CMS (netlifycms.org)
• Prism.js (prismjs.com)

Oktatóanyagok

• Gatsby blog készítése a Netlify CMS segítségével (gatsbyjs.org)
• Hogyan készítsd el a kódolási blogodat a Scratchből a Gatsby és az MDX használatával (freecodecamp.org)

Ihlet

• Gatsby Netlify CMS Starter (gatsby-netlify-cms.netlify.app)

Elrendezés ötlete

Jegyzetfüzet

Kategória: Termelékenység

Hozzon létre egy notebook alkalmazást jegyzetek hozzáadásához, kezeléséhez és rendszerezéséhez.

Rövid

A jegyzetelés remek módszer arra, hogy megbizonyosodjunk arról, hogy nyomon követjük-e gondolatainkat, vagy emlékezünk-e a megbeszélés fontos elviteleire. A későbbi megtaláláshoz fontos, hogy könnyedén kezelhesse és rendezhesse őket!

1. szint

A notebook első követelménye a jegyzetelés. Ez nagyon egyszerűen elindítható, ahol valóban szüksége van valamilyen bemenetre, amely összegyűjti az írottakat, és később tárolja valahol.

Hozzon létre egy űrlapot új jegyzetek hozzáadásához és megtekintéséhez egy listában.

2. szint

Annak érdekében, hogy később megtalálja a jegyzeteit, szeretne valamilyen módon rendezni ezeket a jegyzeteket és megkeresni őket. Ez magában foglalja kategóriák vagy címkézési rendszer, valamint felhasználói felület hozzáadását a kereséshez.

Adja hozzá a jegyzetek címkézésének vagy kategorizálásának lehetőségét, és adjon hozzá egy adatbevitelt, amelyen keresztül kereshet.

3. szint

Akár rájövünk, akár nem, kapcsolatokat találhatunk gondolataink és főleg jegyzeteink között, ahol kihasználhatjuk ezt a gondolati hálót a noteszgépünk számára.

A gondolatok hálózatának létrehozásához adja hozzá a Roam Research által ösztönzött jegyzetek összekapcsolását.

Csinálni

• Hozzon létre egy űrlapot
• Tárolja az új jegyzeteket
• Sorolja fel a jegyzeteket
• Címkék vagy kategóriák hozzáadása
• Jegyzet keresés hozzáadása
• Jegyzetháló hozzáadása

Eszköztár

• Gatsby Brain téma (github.com)
• Fuse.js (fusejs.io)

Oktatóanyagok

• Hogyan adhat keresést a React alkalmazáshoz a Fuse.js (freecodecamp.org) segítségével

Ihlet

• Hab (foambubble.github.io)
• Roam Research (roamresearch.com)
• Gatsby Garden téma (github.com)

Elrendezés ötlete

Űrbéli megszállók

Kategória: Rejtvények és játékok

Hozzon létre egy űrrepülőgépek űrhajó lövöldözős játékát, hogy ellenséges hajók több hullámát lője.

Rövid

A Space Invaders egy klasszikus arcade, amely egy űrhajóba sodor egy idegen invázióval szemben. Amint megpróbálja lelőni őket, visszalőnek, és csak korlátozott védelemmel rendelkezik, mielőtt nyitott lenne az ütésre.

1. szint

A játék lényege, hogy egy űrhajó körül mozogsz, és megpróbálsz fegyverekkel eltalálni egy csomó idegent. Bár van köztetek, sokan vannak.

Hozzon létre egy űrhajót, amely képes mozogni és idegeneket lőni, amelyek nem mozognak.

2. szint

A játékot bonyolulttá teszi az, hogy az idegenek folyamatosan mozognak. Valahányszor a játszótér szélére érnek, leengednek és felgyorsulnak, közelebb kerülve a hajódhoz.

Adjon hozzá mozgást az idegenekhez, akik egymás mellett haladnak a játéktéren. Valahányszor az idegenek elérik az egyik oldalt, le kell esniük egy szintet. Bizonyos időközönként fel kell gyorsulniuk.

3. szint

Te magad vagy, de szerencsére némi védelmet kaphatsz. Vannak pajzsai, amelyek mögé bújhat, amelyek megvédik Önt, amíg tartanak.

Hozzon létre több pajzsot a játékos űrhajó előtt, amelyek korlátozott károkat okozhatnak.

Csinálni

• Hozzon létre egy új játékot
• Statikus idegenek létrehozása
• Hozzon létre egy játékos űrhajót
• Adjon hozzá űrhajó vezérlőket
• Adjon hozzá űrhajó fegyvert
• Konfigurálja az idegen károkat
• Tedd idegenek lőni vissza
• Tedd idegenek mozogni
• Adjon hozzá idegen intervallumokat
• Pajzsok hozzáadása

Oktatóanyagok

• Tanuljon JavaScriptet 7 játék felépítésével (freecodecamp.org)

Ihlet

• Space Invaders (codepen.io)

Elrendezés ötlete

Keret téma

Kategória: Eszközök és könyvtárak

Hozzon létre egy Gatsby témát, amely egy projektet állít be a Tailwind CSS keretrendszerrel.

Rövid

Fejlesztőként általában egy csomó hasonló lépést kell végrehajtanunk, bármikor új projektet hozunk létre. De az olyan eszközök, mint a témák, elvonatkoztatják ezeket a lépéseket, és könnyen kezelhető módon csomagolják őket, ami minden új projektnél használható.

1. szint

A Gatsby témák egy plugin-szerű rendszer, ahol kihasználhatjuk a Gatsby csővezeték előnyeit, hogy az funkcionalitást csomagként osszuk meg az npm-en.

Ez megnyitja az ajtót, hogy valóban bármit megtegyünk, amit egy Gatsby webhelyen tennénk, de újrafelhasználhatóvá tennénk bármely Gatsby webhely számára.

Hozzon létre egy új Gatsby témát, amely használatával új stílus útmutató oldalt hoz létre minden olyan projekthez, amelyhez hozzá van adva.

2. szint

A témák célja nem csak oldalak létrehozása, hanem olyan funkcionalitás hozzáadása, amely produktívvá tesz minket. Ide tartoznak például a keretek és a projektkonfigurációk.

Adjon hozzá egy CSS keretrendszert a Gatsby témához, amely lehetővé teszi a hozzáadott projekt számára, hogy ezt a keretrendszert használja.

3. szint

Néha a témák jobbak csak eszközként, néha hasznos a véleményezés. A CSS keretrendszer hasznos funkcionalitásának egyik módja az állomány-összetevők létrehozása.

Hozzon létre újrafelhasználható React összetevőket a CSS keretrendszer használatával, amely felhasználható a projektben, amelyhez a téma hozzá van adva.

Csinálni

• Hozzon létre egy új témát
• Hozzáadás a példa projekthez
• Hozzon létre új stílusoldalt
• CSS keretrendszer hozzáadása
• Használjon CSS-t például
• Hozzon létre összetevőket
• Használjon alkatrészeket

Eszköztár

• Gatsby témák (gatsbyjs.org)
• Tailwind (tailwindcss.com)

Oktatóanyagok

• Téma építése (gatsbyjs.org)
• Mi az a Tailwind CSS, és hogyan tudom hozzáadni a webhelyemhez vagy a React alkalmazáshoz? (freecodecamp.org)

Ihlet

• Gatsby Tailwind téma (github.com)

Elrendezés ötlete

Webmentions

Kategória: Projekt-kiegészítők

Webhely-integráció hozzáadása egy olyan webhelyhez, amely megmutatja a Twitter-interakciókat a webhelypel.

Rövid

A társas interakció hatásos módszer arra, hogy minél több közönséget és beszélgetést hozzunk létre azokról a témákról, amelyekről írunk.

Ha van valami a webhelyen, az azt mutatja, hogy az interakció egyaránt hasznos lehet arra, hogy ösztönözze az embereket arra, hogy bekapcsolódjanak, vagy hogy az emberek úgy érezzék, részesei lehetnek ennek.

1. szint

A Webmentions használatához a webhelyet meta tag-ekkel kell konfigurálni, hogy információkat nyújtson.

Adja hozzá a megfelelő metacímkéket egy webhelyhez, és ellenőrizze annak használatát a webmention.io webhelyen.

2. szint

A Webmentions API lehetővé teszi a kapcsolatok programozott megtekintését a közösségi interakciókban a webhely URL-jéből. Ez lehetővé teszi, hogy megkapja az interakció típusát, és még az adott személy profilját is.

Csatlakoztasson egy weboldalt a Webmentions szolgáltatáshoz, és adjon hozzá egy közösségi interakciót a blogbejegyzések oldalaihoz.

3. szint

Most, hogy a weboldal az összes interakciót bemutatja, egy egyszerű módszert kell használni a beszélgetéshez való csatlakozásra.

Adjon hozzá egy közösségi linket, amelyre kattintva tweetet hoz létre az oldalra mutató linkkel.

Csinálni

• Adjon hozzá metacímkéket a webhelyhez
• Ellenőrizze a metacímkéket
• Csatlakozás a Webmentionhoz
• Csatlakozzon közösségi oldalhoz Bridgyhez
• Sorolja fel az interakciókat
• Tweet hozzáadása gomb

Eszköztár

• Webmention.io (webmention.io)
• Bridgy (brid.gy)
• Gatsby Plugin Webmention (github.com)

Oktatóanyagok

• Indieweb pt2: A Webmentions használata tizenegyben (mxb.dev)
• Ügyféloldali webmentiók (swyx.io)
• A Webmentions használatának megkezdése Gatsby-ban (knutmelvaer.no)
• A Gatsby plugin webmentions építése (christopherbiscardi.com)

Ihlet

• Knut Melvær (knutmelvaer.no)
• Swyx (swyx.io)

Elrendezés ötlete

Termékvadászat

Kategória: Klónok

Hozzon létre egy Product Hunt klónot, amely lehetővé teszi az emberek számára, hogy új termékeket tegyenek közzé minősítésekkel.

Rövid

Mindannyian a termékekért élünk, legyen szó mobiltelefonjainkról vagy a laptopjainkon használt alkalmazásokról.

Bár rengeteg termék van a világon, nehéz lehet eligazodni a jóban és a rosszban. Az olyan eszközök, mint a Product Hunt, platformot kínálnak az új eszközök megismerésére, valamint mások reakcióinak és véleményeinek megszerzésére.

1. szint

Az új termékek megismerésének legfontosabb része maga a termék. Szeretnénk tudni, hogy mi a termék, hogyan néz ki és hogyan működik.

Hozzon létre egy oldalt, amely lehetővé teszi új termék hozzáadását a webhelyhez címmel, képpel és leírással.

2. szint

Amikor megismerjük a termékeket, a vélemények segítségével megbízhatunk egy terméket a vásárlás előtt. Segít abban, hogy bizalmat szerezzünk abban, mire fogjuk fordítani a pénzünket vagy az idejüket.

Adja hozzá, hogy az emberek véleményt fűzzenek az egyes termékekről.

3. szint

Az emberek imádják a termékeket, így rengeteg ilyen van a világon. Túl sokan vannak ahhoz, hogy kézzel válogassanak, ezért szükségünk van egy mechanizmusra a kereséshez és a böngészéshez.

Adja hozzá a termékek keresésének és kategóriák szerinti böngészésének lehetőségét.

Csinálni

• Hozzon létre termék webhelyet
• Hozzon létre adatbázist
• Adja hozzá a termék formáját
• Termék hozzáadása az adatbázishoz
• Kérjen terméket az oldalra
• Ellenőrzési űrlap hozzáadása
• Vélemények hozzáadása az adatbázishoz
• Vélemények hozzáadása a termékhez
• Termékkeresés hozzáadása
• Termékkategóriák hozzáadása

Eszköztár

• Hasura (hasura.io)

Oktatóanyagok

• Product Hunt klónalkalmazás készítése a Hasura és a Next.js (logrocket.com) használatával
• A Product Hunt alapvető verziójának elkészítése a React használatával (freecodecamp.org)

Elrendezés ötlete

További projektek

Ha további projektötleteket szeretne, nézzen meg 50 projektet a React & Static webhez!

Ingyenes letöltés az 50reactprojects.com webhelyről

• ? Kövess a Twitteren
• ? ️ Iratkozzon fel a Youtube-ra
• ✉️ Iratkozzon fel a hírlevelemre