8 React.js projektnih ideja koje će vam pomoći da započnete s učenjem

Jedan od najboljih načina učenja je radeći. No, programeri se često muče s velikim pitanjem "što bih trebao izgraditi?"

Evo 8 projektnih ideja, zajedno s kratkim informacijama o projektima i idejama za raspored, kako biste započeli s učenjem.

  • Posao i stvarni svijet: Nadzorna ploča statistike karte
  • Zabavno i zanimljivo: Glazbeni instrument
  • Osobno i portfelj: Blog
  • Produktivnost: Bilježnica
  • Slagalice i igre: Space Invaders
  • Alati i knjižnice: Okvirna tema
  • Dodaci za projekt: Web spomenici
  • Klonovi: lov na proizvode

Ovo je pregled besplatne e-knjige 50 Projects for React & Static Web. Punih 50 projektnih ideja, uključujući ovih 8, možete pronaći na 50reactprojects.com.

Nadzorna ploča statistike karte

Kategorija: Posao i stvarni svijet

Stvorite nadzornu ploču karte koja prikazuje statistiku i geografske podatke o COVID-19.

Kratak

Suočavanje s globalnom pandemijom znači da virusi poput Coronavirusa različito utječu na svijet ovisno o zemljopisnom položaju.

Imati mapu sa slomljenim statistikama svake zemlje koristan je način da se mogu utvrditi stvari poput onih na koje su zemlje najviše pogođene.

Razina 1

Najlakši način da vidite statistiku od zemlje do zemlje je da imate kartu koju možete pregledavati sa statistikama svake zemlje dostupne pored te zemlje.

Izradite aplikaciju za mapiranje koja koristi API za koronavirus bolesti.sh za dodavanje oznaka na kartu za svaku zemlju zajedno s brojem slučajeva COVID-19.

Razina 2

Iako je posjedovanje statistike za svaku zemlju korisno, možda bi bilo korisno usporediti te statistike s brojem slučajeva u cijelom svijetu.

Dodajte nadzornu ploču sa statistikama koja prikazuje broj slučajeva COVID-19 širom svijeta, kao i bilo koju drugu korisnu statistiku iz API-ja.

Razina 3

Dobivanje trenutnih statistika dobar je način za razumijevanje trenutnog stanja u svijetu, ali kako se to povijesno uspoređuje?

Koristite API povijesnih podataka za prikaz grafikona na nadzornoj ploči koji pružaju kontekst rastu i širenju virusa.

Napraviti

  • Izradite novu aplikaciju za karte
  • Dohvaćanje podataka o zemljama API-ja
  • Dodajte oznake na kartu
  • Oznake dodajte statistiku
  • Dohvaćanje globalnih podataka API-ja
  • Izradite nadzornu ploču statistike
  • Dodajte globalnu statistiku
  • Dohvaćanje povijesnih podataka API-ja
  • Dodajte grafikone na kartu

Kutija s alatima

  • API za otvorene podatke o bolesti (disease.sh)
  • Letak za reakciju (reagirajte na list.js.org)
  • Starter letaka Gatsby (github.com)

Vodiči

  • Kako stvoriti aplikaciju nadzorne ploče i mape Coronavirus-a (COVID-19) u React-u s Gatsby-jem i Leaflet-om (freecodecamp.org)
  • Kako dodati statistiku slučaja Coronavirus (COVID-19) na vašu nadzornu ploču React karte s Gatsby (freecodecamp.org)
  • Mapiranje pomoću React Leafleta (egghead.io)

Inspiracija

  • Nadzorna ploča COVID-19 Centra za sistemsku znanost i inženjerstvo (CSSE) na Sveučilištu Johns Hopkins (JHU) (coronavirus.jhu.ed)
  • Demonstracija nadzorne ploče za Coronavirus (COVID-19) (coronavirus-map-dashboard.netlify.app)

Ideja za izgled

Glazbeni instrument

Kategorija: Zabavno i zanimljivo

Stvorite interaktivni klavir koji možete koristiti za reprodukciju glazbe pomoću tipkovnice.

Kratak

Nemaju svi luksuz posjedovanja glazbenog instrumenta, ali možda ti ljudi imaju prijenosno računalo, telefon ili tablet. Imati glasovir moćan je način da ljudima dopustite da puštaju glazbu čak i ako prije nisu imali priliku.

Razina 1

Korištenjem API-ja preglednika i internetskog zvuka možemo stvoriti zvukove koji, kad se slože, zapravo mogu zvučati poput glazbe.

Stvorite skup gumba koji reproduciraju bilješke ljestvice kad se kliknu.

Razina 2

Iako nisu svi svirali na nekom instrumentu prije, koncept i sučelje instrumenta poput klavira uglavnom su intuitivniji od gomile tipki.

Stvorite raspored klavira pomoću gumba koji rade klikom na gumb ili pomoću fizičke tipkovnice.

Razina 3

Možda imamo ograničen prostor u pregledniku, ali postoji širok raspon nota, ljestvica i zvukova koje bi električna tipkovnica mogla izdati s nekim dodatnim efektima.

Prekidači za stvaranje efekata koji mijenjaju zvuk bilješki kad se uključe.

Napraviti

  • Stvori gumbe
  • Reproduciraj zvuk kad se klikne
  • Rasporedite bilješke u mjerilu
  • Stvorite raspored klavira
  • Postavite događaje na tipkovnici
  • Stvaranje izgleda efekata
  • Uključi / isključi zvučne efekte

Kutija s alatima

  • Hitne tipke za reagiranje (github.com)

Vodiči

  • Izgradnja klavira s reakcijskim kukama (za razvoj)
  • Kako izraditi klavirsku tipkovnicu pomoću vanilin JavaScript-a (freecodecamp.org)
  • Izgradnja klavira sa tone.js! (za razvoj)
  • Kako sam izradio klavir u samo 1 kb JavaScript-a (frankforce.com)

Inspiracija

  • Reagirajte gitaru (reagirajte-guitar.com)

Ideja za izgled

Blog

Kategorija: Osobno i portfelj

Stvorite blog koji možete koristiti za razmjenu iskustava i projekata u karijeri.

Kratak

Uz bilo koju karijeru, imati blog za dijeljenje svojih iskustava dobar je način da ljudi znaju na čemu radite i pomognete drugima da uče iz vašeg iskustva.

To je također način da pojačate ono što ste naučili kako biste se mogli pozivati ​​na njega u budućnosti.

Razina 1

Da biste mogli dijeliti svoja iskustva, potrebna vam je struktura web stranice koja će vam omogućiti stvaranje novog sadržaja i upravljanje postojećim sadržajem.

Jedan od načina da to napravite je stvaranje datoteka za označavanje koje vaše web mjesto stvara za stvaranje novih stranica i prikaz postova.

Stvorite blog koristeći datoteke s oznakama kao izvor sadržaja.

Razina 2

Sadržaj u datotekama s oznakama dobar je način za upravljanje statičkim sadržajem, ali možda nećete morati uređivati ​​kôd svaki put kad napišete ili uredite post.

Integrirajte sustav za upravljanje sadržajem koji vam omogućuje dodavanje novog sadržaja ili uređivanje postojećeg s lijepim korisničkim sučeljem.

Razina 3

Ako kôd dijelite na svom blogu, HTML izvorno podržava kôd i unaprijed oznake koje vam pomažu u čitanju formatiranja koda. Ali to ne uključuje isticanje sintakse koje pomaže poboljšati čitljivost.

Integrirajte označivač sintakse koji blokove koda čini čitljivijima.

Napraviti

  • Stvorite blog
  • Dodajte prvi statični sadržaj
  • Izvorni statički sadržaj
  • Integrirajte CMS
  • Dodajte kôd sadržaju
  • Dodajte isticanje sintakse

Kutija s alatima

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

Vodiči

  • Izrada Gatsby bloga s Netlify CMS-om (gatsbyjs.org)
  • Kako izraditi svoj blog o kodiranju od nule pomoću Gatsbyja i MDX-a (freecodecamp.org)

Inspiracija

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

Ideja za izgled

Bilježnica

Kategorija: Produktivnost

Stvorite aplikaciju bilježnice za dodavanje, upravljanje i organiziranje grupe bilješki.

Kratak

Bilježenje je izvrstan način da osiguramo da pratimo svoje misli ili se sjetimo važnih ponosa sa sastanka. Sposobnost jednostavnog upravljanja i organiziranja važno je za kasnije pronalaženje!

Razina 1

Prvi zahtjev bilježnice je sposobnost vođenja bilješki. Ovo može biti prilično jednostavno započeti, gdje vam zaista treba neka vrsta ulaza koji prikuplja ono što napišete i sprema negdje za kasnije.

Stvorite obrazac za dodavanje novih bilješki i prikaz na popisu.

Razina 2

Da biste kasnije pronašli svoje bilješke, želite na neki način organizirati te bilješke i način da ih potražite. To uključuje dodavanje kategorija ili sustava označavanja, kao i korisničkog sučelja za pretraživanje.

Dodajte mogućnost označavanja ili kategoriziranja bilješki i unosa za njihovo pretraživanje.

Razina 3

Shvaćali mi to ili ne, možemo pronaći veze između svojih misli i još važnije svojih bilješki, gdje tu mrežu misli možemo iskoristiti za svoju bilježnicu.

Dodajte povezivanje bilješki inspirisano Roam Researchom kako biste stvorili mrežu misli.

Napraviti

  • Stvorite obrazac
  • Pohranite nove bilješke
  • Bilješke popisa
  • Dodajte oznake ili kategorije
  • Dodajte pretraživanje bilješki
  • Dodaj mrežu bilješki

Kutija s alatima

  • Tema za mozak Gatsby (github.com)
  • Fuse.js (fusejs.io)

Vodiči

  • Kako dodati pretraživanje u React aplikaciju pomoću Fuse.js (freecodecamp.org)

Inspiracija

  • Pjena (foambubble.github.io)
  • Istraživanje roama (roamresearch.com)
  • Vrtna tema Gatsby (github.com)

Ideja za izgled

Svemirski uljezi

Kategorija: Slagalice i igre

Stvorite svemirsku napadačku svemirsku letjelicu za pucanje za pucanje u više valova neprijateljskih brodova.

Kratak

Space Invaders je arkadna klasika koja vas stavlja u svemirsku letjelicu protiv invazije vanzemaljaca. Dok ih pokušavate oboriti, oni uzvraćaju udarac, a vi imate samo ograničenu količinu zaštite prije nego što ste otvoreni za udarac.

Razina 1

Osnovni dio igre je da se krećete oko svemirske letjelice pokušavajući oružjem pogoditi hrpu vanzemaljaca. Iako je jedan od vas, ima ih mnogo.

Stvorite svemirsku letjelicu koja se može kretati i pucati u vanzemaljce koji se ne kreću.

Razina 2

Ono što igru ​​čini nezgodnom je to što se vanzemaljci neprestano kreću. Svaki put kad dođu na rub područja za igru, spuste se i ubrzaju, približavajući se vašem brodu.

Dodajte pokret vanzemaljcima koji idu bokom uz bok na prostoru za igru. Svaki put kad vanzemaljci dođu na jednu stranu, trebali bi se spustiti nivo. Oni bi također trebali ubrzati u određenim intervalima.

Razina 3

Prepušteni ste sebi, ali srećom možete dobiti zaštitu. Imate štitove iza kojih se možete sakriti koji vas pomažu zaštititi dok traju.

Stvorite nekoliko štitova ispred svemirske letjelice igrača koji mogu odnijeti ograničenu količinu štete.

Napraviti

  • Stvorite novu igru
  • Stvorite statične strance
  • Stvorite svemirsku letjelicu za igrača
  • Dodajte kontrole svemirske letjelice
  • Dodajte oružje svemirske letjelice
  • Konfigurirajte oštećenja izvanzemaljaca
  • Natjerajte vanzemaljce
  • Natjerajte vanzemaljce
  • Dodajte vanzemaljske intervale
  • Dodajte štitove

Vodiči

  • Naučite JavaScript gradeći 7 igara (freecodecamp.org)

Inspiracija

  • Space Invaders (codepen.io)

Ideja za izgled

Okvirna tema

Kategorija: Alati i knjižnice

Stvorite Gatsby temu koja postavlja projekt s Tailwind CSS okvirom.

Kratak

Kao programeri, obično moramo napraviti hrpu sličnih koraka svaki put kad stvaramo novi projekt. Ali alati poput tema dopuštaju nam apstrahiranje tih koraka i pakiranje na jednostavan način koji može raditi za bilo koji novi projekt.

Razina 1

Gatsby teme su sustav sličan dodatku gdje možemo iskoristiti Gatsbyjevo cjevovod za dijeljenje funkcionalnosti kao paketa na npm.

Ovo otvara vrata za stvarno raditi bilo što što bismo radili na web mjestu Gatsby, ali čineći ga ponovnim za upotrebu na bilo kojem mjestu Gatsby.

Stvorite novu Gatsby temu koja, kada se koristi, stvara novu stranicu vodiča za stil za bilo koji projekt u koji je dodana.

Razina 2

Cilj tema nije samo stvaranje stranica, već i dodavanje funkcionalnosti koja nas čini produktivnima. To uključuje stvari poput okvira i konfiguracija projekata.

Tema Gatsby dodajte CSS okvir koji omogućuje da se dodan projekt koristi tim okvirom.

Razina 3

Ponekad su teme bolje samo kao alati, ponekad je korisno biti mišljenje. Jedan od načina za dodavanje korisne funkcionalnosti CSS okviru je stvaranje dijelova zaliha.

Stvorite komponente za reakciju za višekratnu upotrebu pomoću CSS okvira koji se može koristiti u projektu kojem je tema dodana.

Napraviti

  • Stvorite novu temu
  • Dodajte primjeru projekta
  • Stvorite novu stranicu sa stilom
  • Dodajte CSS okvir
  • Primjerice koristite CSS
  • Stvaranje komponenata
  • Koristite komponente

Kutija s alatima

  • Gatsby teme (gatsbyjs.org)
  • Stražnji vjetar (tailwindcss.com)

Vodiči

  • Izgradnja teme (gatsbyjs.org)
  • Što je Tailwind CSS i kako ga mogu dodati na svoje web mjesto ili u aplikaciju React? (freecodecamp.org)

Inspiracija

  • Tema Gatsby Tailwind (github.com)

Ideja za izgled

Web spomenici

Kategorija: Dodaci za projekte

Dodajte integraciju web spomenica web mjestu koje prikazuje interakcije Twittera s web mjestom.

Kratak

Društvena interakcija utjecajan je način za privlačenje više publike i razgovora na teme o kojima pišemo.

Imati nešto na web mjestu pokazuje da interakcija može biti korisna kako bi potaknula ljude da se žele uključiti ili omogućiti ljudima da osjećaju kao da mogu biti dio toga.

Razina 1

Da bi se koristile web spomenicama, web mjesto mora biti konfigurirano s metaoznakama za pružanje informacija.

Dodajte odgovarajuće metaoznake web mjestu i provjerite njegovu upotrebu s webmention.io.

Razina 2

Webmentions API je način da programski vidite veze u društvenim interakcijama s URL-a vašeg web mjesta. Omogućuje vam vrstu interakcije, pa čak i avatar profila osobe.

Povežite web mjesto s Webmentions i dodajte popis društvenih interakcija na stranice bloga.

Razina 3

Sad kad web stranica prikazuje sve interakcije, trebao bi postojati jednostavan način za pridruživanje razgovoru.

Dodajte društvenu vezu koja kada se klikne stvara tweet s vezom na stranicu.

Napraviti

  • Dodajte metaoznake na web mjesto
  • Provjerite metaoznake
  • Povežite se na Webmention
  • Povežite društvenu mrežu s Bridgy
  • Popis interakcija
  • Dodaj gumb za tweet

Kutija s alatima

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

Vodiči

  • Indieweb pt2: Korištenje webmena u Eleventy (mxb.dev)
  • Spomenice na strani klijenta (swyx.io)
  • Početak rada s web spomenicima u Gatsbyju (knutmelvaer.no)
  • Izrada web stranica za dodatak Gatsby (christopherbiscardi.com)

Inspiracija

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

Ideja za izgled

Lov na proizvode

Kategorija: Klonovi

Stvorite klon za lov na proizvode koji omogućava ljudima da objavljuju novi proizvod s ocjenama.

Kratak

Svi živimo za proizvode, bilo da se radi o našim mobilnim telefonima ili aplikacijama koje koristimo na svojim prijenosnicima.

Iako na svijetu postoji mnoštvo proizvoda, teško je kretati se kroz dobre i zle. Alati poput Product Hunt pružaju platformu za učenje o novim alatima i dobivanje reakcija i recenzija od drugih.

Razina 1

Najvažniji dio učenja o novim proizvodima je sam proizvod. Želimo znati što je proizvod, kako izgleda i kako djeluje.

Izradite stranicu koja vam omogućuje dodavanje novog proizvoda na web mjesto s naslovom, slikom i opisom.

Razina 2

Kada učimo o proizvodima, recenzije su način na koji možemo vjerovati proizvodu prije nego što ga kupimo. Pomaže nam da steknemo povjerenje u ono na što ćemo potrošiti svoj novac ili vrijeme.

Dodajte mogućnost da ljudi dodaju recenzije o svakom proizvodu.

Razina 3

Ljudi vole proizvode, pa ih na svijetu ima na tone. Previše ih je pokušati ručno razvrstati, pa nam je potreban mehanizam za pretraživanje i pregledavanje.

Dodajte mogućnost pretraživanja proizvoda i pregledavanja po kategorijama.

Napraviti

  • Izradite web stranicu proizvoda
  • Stvaranje baze podataka
  • Dodajte obrazac proizvoda
  • Dodajte proizvod u bazu podataka
  • Zatražite proizvod za stranicu
  • Dodajte obrazac za pregled
  • Dodajte recenzije u bazu podataka
  • Dodajte recenzije na proizvod
  • Dodajte pretragu proizvoda
  • Dodajte kategorije proizvoda

Kutija s alatima

  • Hasura (hasura.io)

Vodiči

  • Izgradnja klonske aplikacije Product Hunt pomoću Hasure i Next.js (logrocket.com)
  • Kako izraditi osnovnu verziju lova na proizvode pomoću React-a (freecodecamp.org)

Ideja za izgled

Više projekata

Ako želite još projektnih ideja, pogledajte 50 projekata za React & Static web!

Prestanite se pitati što bih trebao izgraditi? Preuzmite besplatno na 50reactprojects.com

Slijedite me za još Javascripta, UX-a i drugih zanimljivosti!

  • ? Slijedite me na Twitteru
  • ? Pretplatite se na moj Youtube
  • Up Prijavite se za moj bilten