8 React.js-projektidéer, der hjælper dig med at begynde at lære ved at gøre

En af de bedste måder at lære er ved at gøre. Men ofte kæmper udviklere med det store spørgsmål "hvad skal jeg bygge?"

Her er 8 projektideer, komplet med projekt briefs og layoutideer, for at komme i gang med at lære ved at gøre.

  • Business & Real-World: Dashboard til kortstatistikker
  • Sjovt og interessant: Musikinstrument
  • Personlig & portefølje: Blog
  • Produktivitet: Notebook
  • Puslespil og spil: Space Invaders
  • Værktøjer og biblioteker: Rammetema
  • Project Add-ons: Webmentions
  • Kloner: Produktjagt

Dette er en forhåndsvisning af den gratis e-bog 50 projekter til React & the Static Web. Du kan finde de fulde 50 projektideer inklusive disse 8 på 50reactprojects.com.

Kortstatistik Dashboard

Kategori: Erhverv og virkelighed

Opret et kortdashboard, der viser statistik og geografiske oplysninger om COVID-19.

Kort

At håndtere en global pandemi betyder, at vira som Coronavirus påvirker verden forskelligt baseret på geografisk placering.

At have et kort med en opdeling af hvert lands statistikker er en nyttig måde at være i stand til at bestemme ting som hvilke lande der er mest påvirket.

Niveau 1

Den nemmeste måde at se statistik fra land til land er at have et kort, som du kan gennemse med hvert lands statistik til rådighed ved siden af ​​det pågældende land.

Opret en kortapp, der bruger sygdommen.sh Coronavirus API til at tilføje markører til kortet for hvert land sammen med antallet af COVID-19 tilfælde.

Niveau 2

Selvom det er nyttigt at have statistikkerne for hvert land, kan det være nyttigt at kunne sammenligne disse statistikker med antallet af sager i hele verden.

Tilføj et statistikdashboard, der viser antallet af COVID-19 tilfælde rundt om i verden samt andre nyttige statistikker fra API'en.

Niveau 3

At få aktuelle statistikker er en god måde at forstå verdens nuværende tilstand på, men hvordan sammenlignes det historisk?

Brug API'en til historisk data til at vise grafer på instrumentbrættet, der giver sammenhæng til virusets vækst og spredning.

At gøre

  • Opret en ny kortapp
  • Hent API-landedata
  • Føj markører til kortet
  • Føj statistik til markører
  • Hent API-globale data
  • Opret et stats dashboard
  • Tilføj global statistik
  • Hent API-data
  • Tilføj grafer til kortet

Værktøjskasse

  • Open Disease Data API (disease.sh)
  • Reager indlægsseddel (react-leaflet.js.org)
  • Gatsby Leaflet Starter (github.com)

Selvstudier

  • Sådan oprettes et Coronavirus (COVID-19) Dashboard & Map-app i reaktion med Gatsby og Leaflet (freecodecamp.org)
  • Sådan tilføjes Coronavirus (COVID-19) case statistik til dit React-kort dashboard med Gatsby (freecodecamp.org)
  • Kortlægning med React Leaflet (egghead.io)

Inspiration

  • COVID-19 Dashboard af Center for Systems Science and Engineering (CSSE) ved Johns Hopkins University (JHU) (coronavirus.jhu.ed)
  • Coronavirus (COVID-19) Dashboard-demo (coronavirus-map-dashboard.netlify.app)

Layoutidee

Musikinstrument

Kategori: Sjov og interessant

Opret et interaktivt klaver, som du kan bruge til at afspille musik med dit keyboard.

Kort

Ikke alle har den luksus at eje et musikinstrument, men måske har disse mennesker en bærbar computer, telefon eller tablet. At have et klaver er en stærk måde at lade folk spille musik, selvom de ikke havde mulighed for før.

Niveau 1

Ved hjælp af browser- og weblyd-API'erne kan vi skabe lyde, der, når de er samlet, faktisk kan lyde som musik.

Opret et sæt knapper, der afspiller noter på en skala, når der klikkes på dem.

Niveau 2

Selvom ikke alle har spillet et instrument før, er konceptet og grænsefladen til et instrument som et klaver generelt mere intuitivt end en flok knapper.

Opret et klaverlayout ved hjælp af knapper, der fungerer ved enten at klikke på knappen eller bruge det fysiske keyboard.

Niveau 3

Vi har muligvis begrænset plads i browseren, men der er en bred vifte af noter, skalaer og lyde, som et elektrisk tastatur muligvis kan lave med nogle ekstra effekter.

Opret effektskiftere, der ændrer lyden af ​​noterne, når de aktiveres.

At gøre

  • Opret knapper
  • Afspil lyd, når der klikkes på
  • Arranger noter i en skala
  • Opret klaverlayout
  • Indstil tastaturhændelser
  • Opret effektlayout
  • Skift lydeffekter

Værktøjskasse

  • Reager HotKeys (github.com)

Selvstudier

  • Opbygning af et klaver med React Hooks (dev.to)
  • Sådan oprettes et klavertastatur ved hjælp af Vanilla JavaScript (freecodecamp.org)
  • Opbygning af et klaver med tone.js! (dev.to)
  • Hvordan jeg lavede et klaver på kun 1 kb JavaScript (frankforce.com)

Inspiration

  • React Guitar (react-guitar.com)

Layoutidee

Blog

Kategori: Personlig & Portefølje

Opret en blog, som du kan bruge til at dele dine karriereoplevelser og projekter.

Kort

Med enhver karriere er det en god måde at fortælle folk, hvad du arbejder på, og hjælpe andre med at lære af dine oplevelser at have en blog til at dele dine oplevelser.

Det er også en måde at styrke det, du har lært, så du kan henvise til det i fremtiden.

Niveau 1

For at kunne dele dine oplevelser har du brug for en webstedsstruktur, der giver dig mulighed for at oprette nyt indhold og administrere eksisterende indhold.

En måde at gøre dette på er ved at oprette markdown-filer, som dit websted kilder for at oprette nye sider og vise stillingerne.

Opret en blog ved hjælp af markdown-filer som indholdskilde.

Niveau 2

At have dit indhold i markdown-filer er en god måde at administrere statisk indhold på, men du vil måske ikke være nødt til at redigere kode hver gang du skriver eller redigerer et indlæg.

Integrer et indholdsstyringssystem, der giver dig mulighed for at tilføje nyt indhold eller redigere eksisterende med en flot brugergrænseflade.

Niveau 3

Hvis du deler kode på din blog, understøtter HTML indbygget koden og præ-tags, der hjælper dig med at formatere kode på en læsbar måde. Men det inkluderer ikke syntaksfremhævning, der hjælper med at forbedre læsbarheden.

Integrer en syntaks-highlighter, der gør kodeblokke mere læsbare.

At gøre

  • Opret en blog
  • Tilføj det første statiske indhold
  • Kildestatisk indhold
  • Integrer CMS
  • Føj kode til indhold
  • Tilføj syntaksfremhævning

Værktøjskasse

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

Selvstudier

  • Oprettelse af en Gatsby-blog med Netlify CMS (gatsbyjs.org)
  • Sådan opbygges din kodningsblog fra bunden ved hjælp af Gatsby og MDX (freecodecamp.org)

Inspiration

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

Layoutidee

Notesbog

Kategori: Produktivitet

Opret en notesbog-app for at tilføje, administrere og organisere en gruppe noter.

Kort

At tage noter er en fantastisk måde at sikre, at vi holder styr på vores tanker eller husker de vigtige takeaways fra et møde. At være i stand til nemt at styre dem og organisere dem er vigtigt for at finde dem senere!

Niveau 1

Det første krav til en notesbog er at kunne notere. Dette kan være ret simpelt at starte, hvor du virkelig har brug for en slags input, der samler det, du skriver, og gemmer det et sted til senere.

Opret en formular for at tilføje nye noter og se dem på en liste.

Niveau 2

For at finde dine noter senere, vil du have en måde at organisere disse noter på og en måde at slå dem op på. Det inkluderer tilføjelse af kategorier eller et tagging-system samt et brugergrænseflade til at foretage søgninger fra.

Tilføj muligheden for at tagge eller kategorisere noter og et input til at søge gennem dem.

Niveau 3

Uanset om vi indser det eller ej, kan vi finde forbindelser mellem vores tanker og vigtigere vores noter, hvor vi kan drage fordel af dette netværk af tanker til vores notesbog.

Tilføj Roam Research-inpsired sammenkædning af noter for at skabe et netværk af tanker.

At gøre

  • Opret en formular
  • Gem nye noter
  • Liste noter
  • Tilføj tags eller kategorier
  • Tilføj notatsøgning
  • Tilføj notenetværk

Værktøjskasse

  • Gatsby Brain Theme (github.com)
  • Fuse.js (fusejs.io)

Selvstudier

  • Sådan tilføjes søgning til en React-app med Fuse.js (freecodecamp.org)

Inspiration

  • Skum (foambubble.github.io)
  • Roam Research (roamresearch.com)
  • Gatsby Garden Theme (github.com)

Layoutidee

Space invaders

Kategori: Puslespil og spil

Opret et rumindtrængende rumfartøjsspil til at skyde flere bølger af fjendtlige skibe.

Kort

Space Invaders er en arkadeklassiker, der placerer dig i et rumfartøj mod en fremmed invasion. Når du prøver at skyde dem ned, skyder de tilbage, og du har kun en begrænset beskyttelse, før du er åben for at blive ramt.

Niveau 1

Kernedelen af ​​spillet er, at du bevæger dig rundt i et rumfartøj, der prøver at ramme en masse rumvæsener med dine våben. Mens der er en af ​​jer, er der mange af dem.

Opret et rumfartøj, der kan bevæge sig rundt og skyde udlændinge, der ikke bevæger sig.

Niveau 2

Hvad der gør spillet vanskeligt, er at udlændinge konstant bevæger sig. Hver gang de rammer kanten af ​​legepladsen, falder de ned og øger hastigheden og kommer tættere på dit skib.

Tilføj bevægelse til udlændinge, der går side om side på legepladsen. Hver gang udlændinge når den ene side, skal de falde ned et niveau. De skal også fremskynde med bestemte intervaller.

Niveau 3

Du er alene, men heldigvis kan du få en vis beskyttelse. Du har skjolde, som du kan skjule bag, som hjælper med at beskytte dig, mens de varer.

Opret flere skjolde foran spillerens rumfartøj, der kan tage en begrænset mængde skade.

At gøre

  • Opret et nyt spil
  • Opret statiske udlændinge
  • Opret et spillerumfartøj
  • Tilføj rumfartøjskontroller
  • Tilføj rumfartøjsvåben
  • Konfigurer fremmede skader
  • Få udlændinge til at skyde tilbage
  • Få udlændinge til at bevæge sig
  • Tilføj fremmede intervaller
  • Tilføj skjolde

Selvstudier

  • Lær JavaScript ved at opbygge 7 spil (freecodecamp.org)

Inspiration

  • Space Invaders (codepen.io)

Layoutidee

Rammetema

Kategori: Værktøjer og biblioteker

Opret et Gatsby-tema, der opretter et projekt med Tailwind CSS-rammen.

Kort

Som udviklere er vi ofte nødt til at udføre en masse lignende trin, hver gang vi opretter et nyt projekt. Men værktøjer som temaer lader os abstrakte disse trin og pakke dem på en brugervenlig måde, der kan fungere for ethvert nyt projekt.

Niveau 1

Gatsby-temaer er et plugin-lignende system, hvor vi kan udnytte Gatsby-pipelinen til at dele funktionalitet som en pakke på npm.

Dette åbner døren til virkelig at gøre noget, vi ville gøre på et Gatsby-sted, men gør det genanvendeligt til ethvert Gatsby-websted.

Opret et nyt Gatsby-tema, der, når det bruges, opretter en ny side med stilguide på ethvert projekt, det føjes til.

Niveau 2

Målet med temaer er ikke kun at oprette sider, men at tilføje funktionalitet, der gør os produktive. Dette inkluderer ting som rammer og projektkonfigurationer.

Føj en CSS-ramme til Gatsby-temaet, der lader det projekt, det tilføjes, bruge denne ramme.

Niveau 3

Undertiden er temaer kun bedre som værktøjer, nogle gange er det nyttigt at være meningsfuld. En måde at tilføje nyttige funktioner til en CSS-ramme er at oprette bestandskomponenter.

Opret genanvendelige React-komponenter ved hjælp af CSS-rammen, der kan bruges i det projekt, temaet er føjet til.

At gøre

  • Opret et nyt tema
  • Føj til eksempel på projekt
  • Opret ny stilside
  • Tilføj CSS-ramme
  • Brug eksempelvis CSS
  • Opret komponenter
  • Brug komponenter

Værktøjskasse

  • Gatsby-temaer (gatsbyjs.org)
  • Medvind (tailwindcss.com)

Selvstudier

  • Opbygning af et tema (gatsbyjs.org)
  • Hvad er Tailwind CSS, og hvordan kan jeg føje det til min hjemmeside eller React-app? (freecodecamp.org)

Inspiration

  • Gatsby Tailwind-tema (github.com)

Layoutidee

Webmentions

Kategori: Tilføjelser til projekter

Føj webmentionsintegration til et websted, der viser Twitter-interaktioner med webstedet.

Kort

Social interaktion er en effektiv måde at bringe mere af et publikum og en samtale til emner, vi skriver om.

At have noget på et websted viser, at interaktion kan være nyttigt for både at inspirere folk til at blive involveret eller lade folk føle, at de kan være en del af det.

Niveau 1

For at gøre brug af Webmentions skal et websted konfigureres med metatags for at give information.

Tilføj de korrekte metatags til et websted, og valider dets anvendelse med webmention.io.

Niveau 2

Webmentions API er en måde at programmatisk se forbindelser i sociale interaktioner fra en URL på dit websted. Det giver dig mulighed for at få typen af ​​interaktion og endda personens profilavatar.

Tilslut et websted til Webmentions og tilføj en liste over sociale interaktioner til sider med blogindlæg.

Niveau 3

Nu hvor webstedet viser alle interaktionerne, skal der være en nem måde at deltage i samtalen på.

Tilføj et socialt link, der, når der klikkes på, opretter en tweet med et link til siden.

At gøre

  • Tilføj metatags til webstedet
  • Valider metatags
  • Opret forbindelse til Webmention
  • Tilslut social til Bridgy
  • Liste interaktioner
  • Tilføj tweet-knap

Værktøjskasse

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

Selvstudier

  • Indieweb pt2: Brug af Webmentions in Eleventy (mxb.dev)
  • Clientside Webmentions (swyx.io)
  • Kom godt i gang med Webmentions i Gatsby (knutmelvaer.no)
  • Opbygning af Gatsby Plugin Webmentions (christopherbiscardi.com)

Inspiration

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

Layoutidee

Produktjagt

Kategori: Kloner

Opret en Product Hunt-klon, der lader folk sende et nyt produkt med ratings.

Kort

Vi lever alle for produkter, hvad enten det er vores mobiltelefoner eller de apps, vi bruger på vores bærbare computere.

Mens der er masser af produkter i verden, kan det være svært at navigere gennem det gode og det dårlige. Værktøjer som Product Hunt giver en platform til at lære om nye værktøjer og få reaktioner og anmeldelser fra andre.

Niveau 1

Den vigtigste del om at lære om nye produkter er selve produktet. Vi vil vide, hvad produktet er, hvordan det ser ud, og hvordan det fungerer.

Opret en side, der giver dig mulighed for at tilføje et nyt produkt til et websted med en titel, et billede og en beskrivelse.

Niveau 2

Når vi lærer om produkter, er anmeldelser en måde, vi kan stole på et produkt, inden vi køber det. Det hjælper os med at få tillid til det, vi skal bruge vores penge eller tid på.

Tilføj mulighed for, at folk kan tilføje anmeldelser om hvert produkt.

Niveau 3

Folk elsker produkter, så der er masser af dem i verden. Der er alt for mange til at prøve at sortere manuelt, så vi har brug for en mekanisme til at søge og søge med.

Tilføj muligheden for at søge på produkter og gennemse efter kategori.

At gøre

  • Opret produktwebsted
  • Opret database
  • Tilføj produktformular
  • Føj produkt til database
  • Anmod om produkt til side
  • Tilføj gennemgangsformular
  • Føj anmeldelser til databasen
  • Tilføj anmeldelser til produktet
  • Tilføj produktsøgning
  • Tilføj produktkategorier

Værktøjskasse

  • Hasura (hasura.io)

Selvstudier

  • Opbygning af en Product Hunt-klonapp ved hjælp af Hasura og Next.js (logrocket.com)
  • Sådan opbygges en grundlæggende version af Product Hunt ved hjælp af React (freecodecamp.org)

Layoutidee

Flere projekter

Hvis du vil have flere projektideer, skal du tjekke 50 projekter til React & the Static web!

Stop med at spørge dig selv, hvad skal jeg bygge? Download gratis på 50reactprojects.com

Følg mig for mere Javascript, UX og andre interessante ting!

  • ? Følg mig på Twitter
  • ? ️ Abonner på min Youtube
  • ✉️ Tilmeld dig mit nyhedsbrev