8 React.js projektiideed, mis aitavad teil õppimisega alustada

Üks parimaid õppimisviise on tegemine. Kuid sageli võitlevad arendajad suure küsimusega "mida ma peaksin ehitama?"

Siin on 8 projektiideed koos projektiülekannete ja küljendusideedega, et saaksite õppimisega alustada.

  • Äri ja tegelik maailm: kaardistatistika juhtpaneel
  • Lõbus ja huvitav: muusikariist
  • Isiklik ja portfell: ajaveeb
  • Tootlikkus: märkmik
  • Mõistatused ja mängud: kosmose sissetungijad
  • Tööriistad ja raamatukogud: raamistiku teema
  • Projekti lisandmoodulid: veebimärgid
  • Kloonid: tootejaht

See on eelvaade tasuta e-raamatule 50 projekti React & Static Web jaoks. 50 projektiideed, sealhulgas need 8, leiate aadressilt 50reactprojects.com.

Kaardistatistika juhtpaneel

Kategooria: Äri ja tegelik maailm

Looge kaardi juhtpaneel, mis näitab statistikat ja geograafilist teavet COVID-19 kohta.

Lühidalt

Ülemaailmse pandeemiaga võitlemine tähendab, et viirused, nagu koroonaviirus, mõjutavad maailma erinevalt, lähtudes geograafilisest asukohast.

Kaardi olemasolu iga riigi statistika jaotusega on kasulik viis kindlaks teha, milliseid riike on see kõige enam mõjutanud.

1. tase

Lihtsaim viis statistikariigiti vaatamiseks on see, kui teil on kaart, mida saate sirvida ja kus iga riigi statistika on selle riigi kõrval saadaval.

Looge kaardirakendus, mis kasutab haiguse.sh Coronavirus API-d, et lisada iga riigi kaardile markerid koos COVID-19 juhtumite arvuga.

2. tase

Ehkki iga riigi statistika omamine on kasulik, võib olla kasulik osata seda statistikat võrrelda juhtumite arvuga kogu maailmas.

Lisage statistika juhtpaneel, mis näitab COVID-19 juhtumite arvu kogu maailmas, samuti mis tahes muud kasulikku statistikat API-st.

3. tase

Praeguse statistika saamine on hea viis mõista maailma hetkeolukorda, kuid kuidas seda ajalooliselt võrrelda?

Kasutage ajalooliste andmete API-d juhtpaneelil graafikute kuvamiseks, mis pakuvad viiruse kasvule ja levikule konteksti.

Tegema

  • Looge uus kaardirakendus
  • Too API riikide andmed
  • Lisage kaardile markerid
  • Lisage markeritele statistika
  • Too API globaalsed andmed
  • Looge statistika juhtpaneel
  • Lisage üldine statistika
  • Too API ajaloolised andmed
  • Lisage kaardile graafikud

Tööriistakast

  • Avatud haiguste andmete API (disease.sh)
  • Reageeri infoleht (react-leaflet.js.org)
  • Gatsby infoleht Starter (github.com)

Õpetused

  • Kuidas luua koronaviiruse (COVID-19) juhtpaneeli ja kaardi rakendus React Gatsby ja Leafletiga (freecodecamp.org)
  • Kuidas lisada koronaviiruse (COVID-19) juhtumistatistikat Gatsbyga oma React kaardi juhtpaneelile (freecodecamp.org)
  • Kaardistamine React Leaflet'iga (egghead.io)

Inspiratsioon

  • Johns Hopkinsi ülikooli (JHU) süsteemiteaduse ja inseneriteaduste keskuse (CSSE) COVID-19 juhtpaneel (coronavirus.jhu.ed)
  • Koroonaviiruse (COVID-19) juhtpaneeli demo (coronavirus-map-dashboard.netlify.app)

Paigutuse idee

Muusikainstrument

Kategooria: Lõbus ja huvitav

Looge interaktiivne klaver, mida saate kasutada klaviatuuril muusika mängimiseks.

Lühidalt

Kõigil pole muusikariista omamise luksust, kuid võib-olla on neil inimestel sülearvuti, telefon või tahvelarvuti. Klaveri omamine on võimas viis lasta inimestel muusikat mängida ka siis, kui neil selleks varem võimalust polnud.

1. tase

Brauseri ja veebiheli API-de abil saame luua helisid, mis kokku pannes võivad kõlada muusikana.

Looge komplekt nuppe, mis mängivad klõpsamisel skaala noote.

2. tase

Kuigi kõik pole varem pilli mänginud, on klaveri taolise instrumendi kontseptsioon ja liides üldiselt intuitiivsem kui hunnik nuppe.

Looge klaveripaigutus, kasutades nuppe, mis töötavad kas nupul klõpsates või füüsilise klaviatuuri abil.

3. tase

Meil võib brauseris ruumi olla piiratud, kuid seal on lai valik märkmeid, skaalasid ja helisid, mida elektriline klaviatuur võib mõne lisafektiga teha.

Loo efekti lülitid, mis muudavad sisselülitamisel märkmete heli.

Tegema

  • Looge nupud
  • Esitage heli, kui klõpsatakse
  • Paigutage märkmeid skaalal
  • Loo klaveripaigutus
  • Määra klaviatuuri sündmused
  • Loo efektide paigutus
  • Lülitab heliefekte

Tööriistakast

  • Reageerige kiirklahvidega (github.com)

Õpetused

  • Reaktiivkonksudega klaveri ehitamine (dev.to)
  • Kuidas luua klaveriklaviatuuri Vanilla JavaScripti abil (freecodecamp.org)
  • Klaveri ehitamine tone.js abil! (dev.to)
  • Kuidas ma klaveri tegin vaid 1 kb JavaScripti (frankforce.com)

Inspiratsioon

  • React Guitar (react-guitar.com)

Paigutuse idee

Ajaveeb

Kategooria: Isiklik ja portfell

Looge ajaveeb, mida saate kasutada oma karjäärikogemuste ja projektide jagamiseks.

Lühidalt

Mis tahes karjääri puhul on oma kogemuste jagamiseks ajaveebi pidamine hea viis anda inimestele teada, millega te tegelete, ja aidata teistel teie kogemustest õppida.

See on ka viis kinnistada õpitut, et saaksite sellele edaspidi viidata.

1. tase

Oma kogemuste jagamiseks vajate veebisaidi struktuuri, mis võimaldab teil luua uut sisu ja hallata olemasolevat sisu.

Üks võimalus selleks on luua märgistusfailid, mida teie veebisait kasutab uute lehtede loomiseks ja postituste kuvamiseks.

Looge ajaveeb, kasutades sisuallikana märgistusfaile.

2. tase

Kui teie sisu on märgistusfailides, on see hea viis staatilise sisu haldamiseks, kuid te ei pruugi soovida koodi muutmist iga kord, kui postitust kirjutate või muudate.

Integreerige sisuhaldussüsteem, mis võimaldab teil lisada kena kasutajaliidesega uut sisu või muuta olemasolevat.

3. tase

Kui jagate koodi oma ajaveebis, toetab HTML loomulikult koodi ja eelsilte, mis aitavad teil koodi loetavalt vormindada. Kuid see ei hõlma süntaksi esiletõstmist, mis aitab loetavust parandada.

Integreerige süntaksi esiletõstja, mis muudab koodiplokid loetavamaks.

Tegema

  • Looge ajaveeb
  • Lisage esimene staatiline sisu
  • Allika staatiline sisu
  • CMSi integreerimine
  • Lisage sisule kood
  • Lisage süntaksi esiletõstmine

Tööriistakast

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

Õpetused

  • Netlify CMS-iga Gatsby ajaveebi loomine (gatsbyjs.org)
  • Kuidas oma kodeerimisblogi nullist üles ehitada, kasutades Gatsby ja MDX-i (freecodecamp.org)

Inspiratsioon

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

Paigutuse idee

Märkmik

Kategooria: Tootlikkus

Märkmete rühma lisamiseks, haldamiseks ja korraldamiseks looge sülearvuti rakendus.

Lühidalt

Märkmete tegemine on suurepärane võimalus veenduda, et hoiame oma mõtteid kursis või mäletame koosoleku olulisi võtteid. Nende hilisem leidmine on oluline, et saaksite neid hõlpsalt hallata ja korraldada!

1. tase

Esimene märkmiku nõue on märkmete tegemine. Selle käivitamine võib olla üsna lihtne, kus tõesti vajate mingisugust sisendit, mis kogub teie kirjutatu ja salvestab selle kuhugi hilisemaks.

Uute märkmete lisamiseks ja loendis kuvamiseks looge vorm.

2. tase

Märkmete hilisemaks leidmiseks soovite mõnda märkmete korrastamise viisi ja viisi nende otsimiseks. See hõlmab nii kategooriate või sildistamissüsteemi kui ka kasutajaliidese lisamist otsingu tegemiseks.

Lisage märkmete märgistamise või kategoriseerimise võimalus ja sisend nende otsimiseks.

3. tase

Ükskõik, kas me mõistame seda või mitte, võime leida seoseid oma mõtete ja veelgi tähtsamalt märkmete vahel, kus saame seda mõttevõrku oma märkmiku jaoks ära kasutada.

Mõtete võrgustiku loomiseks lisage Roam Researchi kaasatud märkmete linkimine.

Tegema

  • Looge vorm
  • Salvestage uued märkmed
  • Lisage märkmed
  • Lisage silte või kategooriaid
  • Lisa märkmeotsing
  • Lisa märkmevõrk

Tööriistakast

  • Gatsby aju teema (github.com)
  • Fuse.js (fusejs.io)

Õpetused

  • Kuidas lisada otsingu rakendusse Reactive Fuse.js (freecodecamp.org) abil

Inspiratsioon

  • Vaht (foambubble.github.io)
  • Rändlusuuring (roamresearch.com)
  • Gatsby aia teema (github.com)

Paigutuse idee

Kosmose sissetungijad

Kategooria: Mõistatused ja mängud

Looge kosmose sissetungijate kosmoseaparaadi laskurimäng, et tulistada mitu vaenlase laeva lainet.

Lühidalt

Kosmose sissetungijad on arkaadiklassika, mis viib teid kosmoselaevasse tulnukate sissetungi vastu. Kui proovite neid maha tulistada, lasevad nad tagasi ja teil on enne piiratud löögivalmidust piiratud kaitse.

1. tase

Mängu põhiosa on see, et liigute mööda kosmoseaparaati ja üritate oma relvadega lüüa hunnikule tulnukatele. Kuigi teid on üks, on neid palju.

Looge kosmoselaev, mis suudaks ringi liikuda, ja tulistaks tulnukaid, kes ei liigu.

2. tase

Mängu teeb keeruliseks see, et tulnukad pidevalt liiguvad. Iga kord, kui nad mänguala serva tabavad, langevad nad alla ja kiirendavad teid, lähenedes teie laevale.

Lisage mänguväljakul külg külje poole liikuvatele tulnukatele liikumine. Iga kord, kui tulnukad jõuavad ühele poole, peaksid nad langetama taseme. Samuti peaksid nad teatud ajavahemike järel kiirendama.

3. tase

Oled omaette, kuid õnneks võid saada mingi kaitse. Teil on kilbid, mille taha saate peita ja mis aitavad teid kaitsta nende kestmise ajal.

Looge mängija kosmoseaparaadi ette mitu kilpi, mis võivad kahjustada piiratud koguses.

Tegema

  • Looge uus mäng
  • Loo staatilisi tulnukaid
  • Looge mängija kosmoselaev
  • Lisage kosmoseaparaadi juhtelemendid
  • Lisage kosmoseaparaadi relv
  • Konfigureerige välismaalase kahju
  • Pange tulnukad tagasi tulistama
  • Pange tulnukad liikuma
  • Lisage tulnukate intervallid
  • Lisage kilbid

Õpetused

  • Õpi JavaScripti, ehitades 7 mängu (freecodecamp.org)

Inspiratsioon

  • Kosmose sissetungijad (codepen.io)

Paigutuse idee

Raamteema

Kategooria: Tööriistad ja raamatukogud

Looge Gatsby teema, mis loob projekti Tailwind CSS raamistikuga.

Lühidalt

Arendajatena peame uue projekti loomisel alati tegema hulga sarnaseid samme. Kuid sellised tööriistad nagu teemad võimaldavad meil neid samme abstraktselt vormistada ja pakendada need hõlpsasti kasutataval viisil, mis sobib iga uue projekti jaoks.

1. tase

Gatsby teemad on pistikprogrammi laadne süsteem, kus saame kasutada Gatsby torujuhet, et jagada funktsionaalsust paketina npm-l.

See avab ukse tõesti teha kõike, mida me teeksime Gatsby saidil, kuid muutes selle igaks Gatsby saidiks korduvkasutatavaks.

Looge uus Gatsby teema, mis kasutamisel loob uue stiilijuhendi lehe igale projektile, kuhu see on lisatud.

2. tase

Teemade eesmärk ei ole lihtsalt lehtede loomine, vaid funktsionaalsuse lisamine, mis muudab meid produktiivseks. See hõlmab selliseid asju nagu raamid ja projektikonfiguratsioonid.

Lisage Gatsby teemale CSS-i raamistik, mis võimaldab lisatud projektil seda raamistikku kasutada.

3. tase

Mõnikord on teemad paremad ainult tööriistadena, mõnikord on kasulik olla arvamusel. Üks viis CSS-i raamistikule kasuliku funktsionaalsuse lisamiseks on aktsiakomponentide loomine.

Looge CSS-i raamistiku abil korduvkasutatavad React komponendid, mida saab kasutada projektis, kuhu teema on lisatud.

Tegema

  • Looge uus teema
  • Lisage näidisprojekti
  • Loo uus stiilileht
  • Lisa CSS-i raamistik
  • Kasutage näiteks CSS-i
  • Looge komponendid
  • Kasutage komponente

Tööriistakast

  • Gatsby teemad (gatsbyjs.org)
  • Taganttuul (tailwindcss.com)

Õpetused

  • Teema ehitamine (gatsbyjs.org)
  • Mis on Tailwind CSS ja kuidas seda oma veebisaidile või rakendusse Reactin lisada? (freecodecamp.org)

Inspiratsioon

  • Gatsby taganttuule teema (github.com)

Paigutuse idee

Veebimärgid

Kategooria: projekti lisandmoodulid

Lisage veebisaitide integreerimine veebisaidile, mis näitab Twitteri interaktsioone veebisaidiga.

Lühidalt

Sotsiaalne suhtlus on mõjus viis, kuidas tuua rohkem publikut ja vestlust teemadele, millest kirjutame.

Kui midagi on veebisaidil, näitab see, et suhtlus võib olla kasulik nii inimeste inspireerimiseks sooviks osaleda kui ka lasta inimestel tunda, et nad võivad sellest osa saada.

1. tase

Veebimärkuste kasutamiseks tuleb veebisait teabe edastamiseks konfigureerida metasiltidega.

Lisage veebisaidile õiged metasildid ja kinnitage nende kasutamine veebisaidiga webmention.io.

2. tase

Webmentions API on viis, kuidas oma veebisaidi URL-ist sotsiaalsetes suhtlustes programmeeritult näha seoseid. See võimaldab teil saada suhtluse tüübi ja isegi inimese profiili avatari.

Ühendage veebisait veebimärkmetega ja lisage ajaveebi postituste lehtedele sotsiaalse suhtluse loend.

3. tase

Nüüd, kui veebisait näitab kõiki interaktsioone, peaks vestlusega liitumiseks olema lihtne viis.

Lisage sotsiaalne link, millele klõpsates luuakse lehe lingiga säuts.

Tegema

  • Lisage veebisaidile metasildid
  • Metakoodide kinnitamine
  • Ühendage Webmentioniga
  • Ühendage sotsiaalne ühendus Bridgyga
  • Loetlege koostoimed
  • Säutsu lisamise nupp

Tööriistakast

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

Õpetused

  • Indieweb pt2: veebimärkide kasutamine üheteistkümnes (mxb.dev)
  • Kliendipoolsed veebimärgid (swyx.io)
  • Webmentionsiga alustamine Gatsbys (knutmelvaer.no)
  • Gatsby pistikprogrammi veebilehtede loomine (christopherbiscardi.com)

Inspiratsioon

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

Paigutuse idee

Tootejaht

Kategooria: Kloonid

Looge Product Hunt kloon, mis võimaldab inimestel postitada uue hinnangutega toote.

Lühidalt

Me kõik elame toodete pärast, olgu selleks siis meie mobiiltelefonid või rakendused, mida me oma sülearvutites kasutame.

Kuigi maailmas on tonni tooteid, võib olla raske navigeerida nii heades kui halbades. Sellised tööriistad nagu Product Hunt pakuvad platvormi uute tööriistade tundmaõppimiseks ning teiste reaktsioonide ja arvustuste saamiseks.

1. tase

Kõige olulisem osa uute toodete tundmaõppimisel on toode ise. Tahame teada, mis toode on, kuidas see välja näeb ja kuidas see töötab.

Looge leht, mis võimaldab teil veebisaidile lisada pealkirja, pildi ja kirjeldusega uue toote.

2. tase

Toodete kohta õppides on ülevaated viis, kuidas saame toodet enne selle ostmist usaldada. See aitab meil saada enesekindlust, milleks me oma raha või aega kulutame.

Lisage inimestele võimalus lisada arvustusi iga toote kohta.

3. tase

Inimesed armastavad tooteid, nii et maailmas on neid tonni. Käsitsi sortimiseks proovitakse liiga palju, seega vajame otsimiseks ja sirvimiseks mehhanismi.

Lisage võimalus toodete otsimiseks ja kategooriate kaupa sirvimiseks.

Tegema

  • Loo toote veebisait
  • Loo andmebaas
  • Lisage toote vorm
  • Lisa toode andmebaasi
  • Taotle toodet lehele
  • Lisage arvustuse vorm
  • Arvustuste lisamine andmebaasi
  • Lisage tootele arvustusi
  • Lisa tooteotsing
  • Lisage tootekategooriad

Tööriistakast

  • Hasura (hasura.io)

Õpetused

  • Kloonirakenduse Product Hunt loomine Hasura ja Next.js abil (logrocket.com)
  • Tootejahi põhiversiooni loomine React'i abil (freecodecamp.org)

Paigutuse idee

Rohkem projekte

Kui soovite rohkem projektiideid, vaadake 50 projekti React & Static web!

Lõpeta endalt küsimine, mida ma peaksin ehitama? Laadige alla tasuta aadressilt 50reactprojects.com

Järgige mind, et saada rohkem Javascripti, UX-i ja muud huvitavat!

  • ? Jälgi mind Twitteris
  • ? ️ Telli Minu Youtube
  • ✉️ Registreeru minu uudiskirja saamiseks