8 „React.js“ projekto idėjos, padėsiančios pradėti mokytis

Vienas geriausių būdų mokytis yra darymas. Tačiau dažnai kūrėjai kovoja su dideliu klausimu „ką turėčiau statyti?“

Čia pateikiamos 8 projekto idėjos, kartu su projekto trumpikėmis ir išdėstymo idėjomis, kad pradėtumėte mokytis.

  • Verslas ir realus pasaulis: žemėlapių statistikos informacijos suvestinė
  • Įdomus ir įdomus: muzikos instrumentas
  • Asmeninis ir portfelis: Tinklaraštis
  • Produktyvumas: Užrašų knygelė
  • Galvosūkiai ir žaidimai: „Space Invaders“
  • Įrankiai ir bibliotekos: pagrindinė tema
  • Projekto priedai: „Webmentions“
  • Klonai: produktų medžioklė

Tai nemokamos el. Knygos „50 projektų, skirtų reaguoti ir statiniam internetui“, peržiūra. Visas 50 projekto idėjų, įskaitant šias 8, galite rasti svetainėje 50reactprojects.com.

Žemėlapio statistikos informacijos suvestinė

Kategorija: Verslas ir realus pasaulis

Sukurkite žemėlapio informacijos suvestinę, kurioje būtų rodoma statistika ir geografinė informacija apie COVID-19.

Trumpai

Sprendimas dėl pasaulinės pandemijos reiškia, kad tokie virusai, kaip koronavirusas, įtakoja pasaulį skirtingai, atsižvelgiant į geografinę padėtį.

Turėti žemėlapį su kiekvienos šalies statistikos išskaidymu yra naudingas būdas nustatyti, pavyzdžiui, kurios šalys buvo paveiktos labiausiai.

1 lygis

Lengviausias būdas pamatyti statistikos duomenis kiekvienoje šalyje yra turėti žemėlapį, kurį galite naršyti su kiekvienos šalies statistiniais duomenimis, esančiais šalia tos šalies.

Sukurkite žemėlapių programą, kurioje naudojama liga.sh Coronavirus API, kad prie kiekvienos šalies žemėlapio pridėtumėte žymeklius kartu su COVID-19 atvejų skaičiumi.

2 lygis

Nors kiekvienos šalies statistikos naudojimas yra naudingas, gali būti naudinga sugebėti palyginti tą statistiką su atvejų skaičiumi visame pasaulyje.

Pridėkite statistikos informacijos suvestinę, kurioje rodomas COVID-19 atvejų skaičius visame pasaulyje, taip pat visa kita naudinga API statistika.

3 lygis

Dabartinės statistikos gavimas yra geras būdas suprasti dabartinę pasaulio būklę, tačiau kaip tai palyginti istoriškai?

Naudokite istorinių duomenų API, kad informacijos suvestinėje būtų rodomos diagramos, pateikiančios kontekstą viruso augimui ir plitimui.

Daryti

  • Sukurkite naują žemėlapio programą
  • Gaukite API šalių duomenis
  • Pridėkite žymeklių žemėlapyje
  • Pridėkite statistiką prie žymeklių
  • Gauti API visuotinius duomenis
  • Sukurkite statistikos informacijos suvestinę
  • Pridėti visuotinę statistiką
  • Gauti API istorinius duomenis
  • Žemėlapyje pridėkite grafikų

Įrankių dėžutė

  • Atvirų ligų duomenų API (disease.sh)
  • „React Leaflet“ (reak-leaflet.js.org)
  • „Gatsby Leaflet Starter“ (github.com)

Pamokos

  • Kaip sukurti koronaviruso (COVID-19) informacijos suvestinę ir žemėlapių programą „React with Gatsby and Leaflet“ (freecodecamp.org)
  • Kaip koronaviruso (COVID-19) atvejų statistiką pridėti prie „React“ žemėlapio informacijos suvestinės su „Gatsby“ (freecodecamp.org)
  • Žemėlapių sudarymas naudojant „React Leaflet“ (egghead.io)

Įkvėpimas

  • Johns Hopkins universiteto (JHU) sistemų mokslo ir inžinerijos centro (CSSE) COVID-19 informacijos suvestinė (coronavirus.jhu.ed)
  • Koronaviruso (COVID-19) informacijos suvestinės demonstracija (coronavirus-map-dashboard.netlify.app)

Maketo idėja

Muzikinis instrumentas

Kategorija: Pramogos ir įdomumas

Sukurkite interaktyvų fortepijoną, kurį galėsite naudoti muzikai groti klaviatūra.

Trumpai

Ne visi turi prabangą turėti muzikos instrumentą, bet galbūt tie žmonės turi nešiojamąjį kompiuterį, telefoną ar planšetinį kompiuterį. Pianino turėjimas yra galingas būdas leisti žmonėms groti muziką, net jei anksčiau neturėjo galimybės.

1 lygis

Naudodamiesi naršykle ir žiniatinklio garso API galime sukurti garsus, kurie, sudėjus, iš tikrųjų gali skambėti kaip muzika.

Sukurkite mygtukų rinkinį, kuris spustelėjus atkuria masto užrašus.

2 lygis

Nors ne visi anksčiau grojo instrumentu, tokio instrumento, kaip fortepijonas, sąvoka ir sąsaja paprastai yra intuityvesnė nei daugybė mygtukų.

Sukurkite fortepijono išdėstymą naudodami mygtukus, kurie veikia spustelėdami mygtuką arba naudodami fizinę klaviatūrą.

3 lygis

Naršyklėje mums gali būti ribota erdvė, tačiau yra daugybė užrašų, svarstyklių ir garsų, kuriuos galbūt gali padaryti elektrinė klaviatūra su papildomais efektais.

Sukurti efektų perjungiklius, kurie pakeičia užrašų garsą, kai jie įjungiami.

Daryti

  • Sukurti mygtukus
  • Leiskite garsą, kai paspaudžiate
  • Išdėstykite užrašus masteliu
  • Sukurkite fortepijono išdėstymą
  • Nustatykite klaviatūros įvykius
  • Sukurti efektų išdėstymą
  • Perjungti garso efektus

Įrankių dėžutė

  • Reaguokite „HotKeys“ (github.com)

Pamokos

  • Pianino su reakciniais kabliais statymas (dev. Į)
  • Kaip sukurti fortepijono klaviatūrą naudojant „Vanilla JavaScript“ (freecodecamp.org)
  • Statyti fortepijoną su tone.js! (dev. į)
  • Kaip aš sukūriau fortepijoną tik 1 KB „JavaScript“ (frankforce.com)

Įkvėpimas

  • „React Guitar“ (reak-guitar.com)

Maketo idėja

Tinklaraštis

Kategorija: Asmeniniai ir portfeliai

Sukurkite tinklaraštį, kurį galėsite naudoti norėdami pasidalinti savo karjeros patirtimi ir projektais.

Trumpai

Bet kokioje karjeroje tinklaraštis, skirtas pasidalinti savo patirtimi, yra geras būdas pranešti žmonėms, su kuo dirbate, ir padėti kitiems mokytis iš jūsų patirties.

Tai taip pat būdas sustiprinti tai, ką išmokote, kad galėtumėte į tai remtis ateityje.

1 lygis

Kad galėtumėte pasidalinti savo patirtimi, jums reikia svetainės struktūros, kuri leistų kurti naują turinį ir tvarkyti esamą turinį.

Vienas iš būdų tai padaryti yra sukurti žymėjimo failus, kuriuos jūsų svetainė teikia naujiems puslapiams kurti ir įrašams rodyti.

Sukurkite tinklaraštį naudodami žymėjimo failus kaip turinio šaltinį.

2 lygis

Turinio turėjimas žymėjimo rinkmenose yra geras būdas valdyti statinį turinį, tačiau galbūt nenorite, kad kiekvieną kartą rašant ar redaguojant įrašą tektų redaguoti kodą.

Integruokite turinio valdymo sistemą, kuri leidžia jums pridėti naują turinį arba redaguoti esamą naudodama gražią vartotojo sąsają.

3 lygis

Jei savo tinklaraštyje dalijatės kodu, HTML savaime palaiko kodą ir išankstines žymas, kurios padeda formatuoti kodą skaitomu būdu. Bet tai neapima sintaksės paryškinimo, kuris padeda pagerinti skaitomumą.

Integruokite sintaksės žymeklį, kuris padaro kodų blokus lengviau skaitomus.

Daryti

  • Sukurkite tinklaraštį
  • Pridėti pirmąjį statinį turinį
  • Šaltinio statinis turinys
  • Integruoti TVS
  • Pridėkite kodą prie turinio
  • Pridėti sintaksės paryškinimą

Įrankių dėžutė

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

Pamokos

  • „Gatsby“ tinklaraščio kūrimas naudojant „Netlify CMS“ (gatsbyjs.org)
  • Kaip susikurti savo kodavimo tinklaraštį nuo nulio naudojant „Gatsby“ ir MDX (freecodecamp.org)

Įkvėpimas

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

Maketo idėja

Užrašų knygelė

Kategorija: Produktyvumas

Sukurkite bloknotų programą, kad pridėtumėte, tvarkytumėte ir tvarkytumėte užrašų grupę.

Trumpai

Užrašų rašymas yra puikus būdas įsitikinti, kad sekame savo mintis ar prisimename svarbius susitikimo išsinešimus. Galimybė lengvai juos valdyti ir organizuoti yra svarbu, kad vėliau juos rastum!

1 lygis

Pirmasis sąsiuvinio reikalavimas yra galimybė užsirašyti. Tai gali būti gana paprasta pradėti, kur tikrai reikia kažkokio įvesties, kuris surinktų tai, ką parašėte, ir išsaugotų kur nors vėliau.

Sukurkite formą, kad pridėtumėte naujų pastabų ir peržiūrėtumėte jas sąraše.

2 lygis

Kad vėliau rastumėte savo užrašus, norite, kad šie užrašai būtų tvarkomi ir kaip jų ieškoti. Tai apima kategorijų ar žymėjimo sistemos pridėjimą ir vartotojo sąsają, kad būtų galima atlikti paiešką.

Pridėkite galimybę pažymėti ar suskirstyti užrašus ir įvestį, kad galėtumėte jų ieškoti.

3 lygis

Nesvarbu, ar tai suvokiame, ar ne, galime rasti sąsajų tarp savo minčių ir, svarbiausia, užrašų, kur galime pasinaudoti tuo minčių tinklu savo užrašų knygutei.

Norėdami sukurti minčių tinklą, pridėkite „Roam Research“ įkvėptą užrašų susiejimą.

Daryti

  • Sukurkite formą
  • Saugokite naujus užrašus
  • Išvardykite pastabas
  • Pridėkite žymų ar kategorijų
  • Pridėti užrašų paiešką
  • Pridėti užrašų tinklą

Įrankių dėžutė

  • „Gatsby Brain“ tema (github.com)
  • „Fuse.js“ („fusejs.io“)

Pamokos

  • Kaip pridėti paiešką prie „React“ programos naudojant „Fuse.js“ (freecodecamp.org)

Įkvėpimas

  • Putplastis (foambubble.github.io)
  • „Roam Research“ (roamresearch.com)
  • Getsbio sodo tema (github.com)

Maketo idėja

Puolikai iš kosmoso

Kategorija: Galvosūkiai ir žaidimai

Sukurkite kosminių įsibrovėlių erdvėlaivių šaudyklės žaidimą, kad šaudytumėte į kelias priešo laivų bangas.

Trumpai

„Space Invaders“ yra klasikinis arkadinis žaidimas, kuris nukreipia jus į erdvėlaivį prieš ateivių invaziją. Kai bandote juos numušti, jie šaudo atgal, o jūs turite tik ribotą apsaugą, kol esate pasirengę nukentėti.

1 lygis

Pagrindinė žaidimo dalis yra ta, kad jūs judate po erdvėlaivį, bandydami ginklais pataikyti į daugybę ateivių. Nors yra vienas iš jūsų, jų yra daug.

Sukurkite erdvėlaivį, kuris galėtų judėti ir šaudyti nejudančius ateivius.

2 lygis

Žaidimą padaro keblu tai, kad užsieniečiai nuolat juda. Kiekvieną kartą, kai jie atsitrenkia į žaidimo zonos kraštą, jie nuleidžiami ir pagreitėja, priartėdami prie jūsų laivo.

Pridėkite judesį užsieniečiams, einantiems žaidimų aikštelėje. Kiekvieną kartą, kai ateiviai pasiekia vieną pusę, jie turėtų nuleisti lygį. Jie taip pat turėtų spartėti tam tikrais intervalais.

3 lygis

Jūs esate vienas, bet laimei, jūs galite gauti tam tikrą apsaugą. Jūs turite skydus, už kurių galite paslėpti ir kurie apsaugo jus, kol jie tęsis.

Sukurkite kelis skydus priešais grotuvo erdvėlaivius, kurie gali padaryti ribotą žalą.

Daryti

  • Sukurkite naują žaidimą
  • Kurkite statinius ateivius
  • Sukurkite grotuvo erdvėlaivį
  • Pridėti erdvėlaivio valdiklius
  • Pridėti erdvėlaivio ginklą
  • Konfigūruokite svetimą žalą
  • Priverskite ateivius šaudyti atgal
  • Priverskite ateivius judėti
  • Pridėkite ateivių intervalus
  • Pridėkite skydus

Pamokos

  • Sužinokite „JavaScript“ kurdami 7 žaidimus (freecodecamp.org)

Įkvėpimas

  • „Space Invaders“ (codepen.io)

Maketo idėja

Pagrindinė tema

Kategorija: Įrankiai ir bibliotekos

Sukurkite „Gatsby“ temą, nustatančią projektą naudojant „Tailwind CSS“ sistemą.

Trumpai

Kaip kūrėjai, mes visada turime atlikti daugybę panašių veiksmų kiekvieną kartą, kai kuriame naują projektą. Tačiau tokie įrankiai kaip temos leidžia mums abstrakčiai atlikti veiksmus ir supakuoti juos lengvai naudojamu būdu, kuris gali būti naudingas bet kuriam naujam projektui.

1 lygis

„Gatsby“ temos yra į įskiepius panaši sistema, kur mes galime pasinaudoti „Gatsby“ dujotiekio pranašumais ir pasidalinti funkcijomis kaip paketu „npm“.

Tai atveria duris iš tikrųjų daryti viską, ką darytume „Gatsby“ svetainėje, bet padaryti jį pakartotinai tinkamu naudoti bet kurioje „Gatsby“ svetainėje.

Sukurkite naują „Gatsby“ temą, kuri naudodama sukuria naują stiliaus vadovo puslapį kiekvienam projektui, prie kurio jis yra pridėtas.

2 lygis

Temų tikslas yra ne tik kurti puslapius, bet ir pridėti funkcionalumą, kuris padaro mus produktyvius. Tai apima tokius dalykus kaip sistemos ir projektų konfigūracijos.

Prie „Gatsby“ temos pridėkite CSS sistemą, kuri leidžia pridėtam projektui naudoti tą sistemą.

3 lygis

Kartais temos yra geresnės tik kaip priemonės, kartais naudinga būti nuomonėmis. Vienas iš būdų pridėti naudingų funkcijų CSS sistemoje yra akcijų komponentų kūrimas.

Sukurkite daugkartinius „React“ komponentus naudodami CSS sistemą, kurią galima naudoti projekte, prie kurio tema yra pridėta.

Daryti

  • Sukurkite naują temą
  • Pridėti prie projekto pavyzdžio
  • Sukurkite naują stiliaus puslapį
  • Pridėti CSS sistemą
  • Pavyzdžiui, naudokite CSS
  • Kurkite komponentus
  • Naudokite komponentus

Įrankių dėžutė

  • „Gatsby“ temos (gatsbyjs.org)
  • „Tailwind“ (tailwindcss.com)

Pamokos

  • Temos kūrimas (gatsbyjs.org)
  • Kas yra „Tailwind CSS“ ir kaip ją pridėti prie savo svetainės ar „React“ programos? (freecodecamp.org)

Įkvėpimas

  • „Gatsby Tailwind“ tema (github.com)

Maketo idėja

Webmentions

Kategorija: Projektų priedai

Pridėkite žiniatinklio paminėjimų integraciją svetainėje, kurioje rodoma „Twitter“ sąveika su svetaine.

Trumpai

Socialinė sąveika yra įtakingas būdas pritraukti daugiau auditorijos ir pokalbio prie temų, apie kurias rašome.

Turint ką nors svetainėje, paaiškėja, kad sąveika gali būti naudinga įkvėpti žmones norėti įsitraukti arba leisti žmonėms pasijausti esanti to dalimi.

1 lygis

Kad būtų galima naudoti „Webmentions“, svetainė turi būti sukonfigūruota naudojant metažymas, kad būtų pateikta informacija.

Pridėkite tinkamas metažymas į svetainę ir patvirtinkite jos naudojimą naudodami webmention.io.

2 lygis

„Webmentions“ API yra būdas programiškai pamatyti ryšius socialinėse sąveikose iš jūsų svetainės URL. Tai leidžia jums gauti sąveikos tipą ir netgi asmens profilio pseudoportretą.

Prijunkite svetainę prie „Webmentions“ ir pridėkite socialinių sąveikų sąrašą prie tinklaraščio įrašų puslapių.

3 lygis

Dabar, kai svetainėje rodomos visos sąveikos, turėtų būti paprastas būdas prisijungti prie pokalbio.

Pridėkite socialinę nuorodą, kurią spustelėjus sukuriamas „tweet“ su nuoroda į puslapį.

Daryti

  • Įtraukite metažymas į svetainę
  • Patvirtinti metažymas
  • Prisijunkite prie „Webmention“
  • Prijunkite socialinius ryšius su Bridgy
  • Išvardykite sąveikas
  • Pridėti mygtuką „Twitter“

Įrankių dėžutė

  • Webmention.io (webmention.io)
  • Bridgy (brid.gy)
  • „Gatsby“ papildinio žiniatinklis (github.com)

Pamokos

  • „Indieweb pt2“: „Webmentions“ naudojimas vienuolikoje (mxb.dev)
  • „Websideions“ klientams (swyx.io)
  • Darbo su „Webmentions“ pradžia Getsbyje (knutmelvaer.no)
  • „Gatsby“ papildinio žiniatinklio kūrimas (christopherbiscardi.com)

Įkvėpimas

  • Knutas Melværas (knutmelvaer.no)
  • „Swyx“ (swyx.io)

Maketo idėja

Produktų medžioklė

Kategorija: Klonai

Sukurkite „Product Hunt“ kloną, leidžiantį žmonėms paskelbti naują produktą su įvertinimais.

Trumpai

Mes visi gyvename už produktus, nesvarbu, ar tai būtų mūsų mobilieji telefonai, ar programos, kurias naudojame nešiojamuose kompiuteriuose.

Nors pasaulyje yra daugybė produktų, gali būti sunku naršyti per gerus ir blogus. Tokie įrankiai kaip „Product Hunt“ suteikia platformą, kad sužinotumėte apie naujus įrankius ir gautumėte kitų reakciją bei atsiliepimus.

1 lygis

Svarbiausia dalis apie naujus produktus yra pats produktas. Mes norime žinoti, koks yra produktas, kaip jis atrodo ir kaip jis veikia.

Sukurkite puslapį, leidžiantį pridėti naują produktą į svetainę su pavadinimu, paveikslėliu ir aprašymu.

2 lygis

Sužinodami apie produktus, apžvalgos yra būdas patikėti produktui prieš jį įsigyjant. Tai padeda mums įgyti pasitikėjimą tuo, kam ketiname išleisti pinigus ar laiką.

Pridėkite žmonėms galimybę pridėti atsiliepimų apie kiekvieną produktą.

3 lygis

Žmonės mėgsta produktus, todėl pasaulyje jų yra daugybė. Bandyti rūšiuoti rankiniu būdu yra per daug, todėl mums reikia mechanizmo, kad galėtume ieškoti ir naršyti.

Pridėkite galimybę ieškoti produktų ir naršyti pagal kategorijas.

Daryti

  • Sukurkite produkto svetainę
  • Sukurti duomenų bazę
  • Pridėti produkto formą
  • Pridėti produktą į duomenų bazę
  • Prašyti produkto puslapyje
  • Pridėti peržiūros formą
  • Pridėti apžvalgas prie duomenų bazės
  • Pridėti atsiliepimus prie produkto
  • Pridėti produkto paiešką
  • Pridėti produktų kategorijas

Įrankių dėžutė

  • Hasura (hasura.io)

Pamokos

  • „Product Hunt“ klono programos kūrimas naudojant „Hasura“ ir „Next.js“ (logrocket.com)
  • Kaip sukurti pagrindinę „Product Hunt“ versiją naudojant „React“ (freecodecamp.org)

Maketo idėja

Daugiau projektų

Jei norite daugiau projekto idėjų, peržiūrėkite 50 „React & Static Web“ projektų!

Nebeklausk savęs, ką turėčiau statyti? Atsisiųskite nemokamą 50reactprojects.com

Sekite mane, norėdami sužinoti daugiau „Javascript“, „UX“ ir kitų įdomių dalykų!

  • ? Sekite mane „Twitter“
  • ? ️ Užsiprenumeruokite „My Youtube“
  • ✉️ Prisiregistruokite gauti mano naujienlaiškį