9 fantastiske React.js-prosjekter for nybegynnere, som vil hjelpe deg å bli ansatt

Prøv Instrumentet Vårt For Å Eliminere Problemer

Som en nybegynner ønsker å bryte inn i feltet av webutvikling, har en solid portefølje av React.js-prosjekter er nøkkelen til å bli ansatt. React.js fortsetter å være et av de mest etterspurte frontend-rammeverkene, og driver brukergrensesnitt for toppselskaper som Facebook, Instagram, Netflix og mer.

Men kommer opp med overbevisende Reactjs prosjektideer kan være vanskelig, spesielt når du nettopp har startet. Du vil ha prosjekter som utfordrer ferdighetene dine, samtidig som de er gjennomførbare å implementere som nybegynnere.

Det er derfor vi i dette innlegget har satt sammen denne listen over 9 fantastiske React.js-prosjekter for nybegynnere . Alt fra grunnleggende som en gjøremålsapp til mer komplekse bygg som en e-handelsside, vil fullføring av disse prosjektene utstyre deg med nye ferdigheter og fantastiske porteføljedeler du kan demonstrere for arbeidsgivere.



Liste over nybegynnerreaksjonsprosjekter

Her er en rask oversikt over de 9 React.js nybegynnerprosjektene vi skal dekke:

  • To-Do Web App
  • Vær-app
  • Oppskriftssøk-appen
  • GitHub Profiles Finder
  • Quiz/Survey-app
  • Kalkulator-app
  • Blogg/artikkelside
  • Produktside for e-handel
  • Dashboard for sosiale medier

La oss nå utforske hva hvert prosjekt innebærer og hva du vil lære av å bygge det.

1. To-Do Web App

Gjøremålsliste-appen er fortsatt et av de beste React-prosjektene for nybegynnere. Selv om det er enkelt i konseptet, lar det deg forstå kjernekonsepter som:

  • Administrere tilstand ved hjelp av kroker som useState
  • Oppdatering av brukergrensesnittet basert på tilstandsendringer
  • Hendelseshåndtering i React (som å sende inn nye gjøremål)

For ekstra utfordring, integrer funksjoner som prioritert merking, forfallsdatoer, kategorier/mapper for å organisere gjøremål og la brukere redigere eller slette elementer.

Selv om det er grunnleggende, legger dette prosjektet grunnlaget for å forstå kjernereact-konsepter. Og det ferdige produktet forblir nyttig for personlig produktivitet!

2. Vær-app

Å bygge en væroppslagsapp er et annet stift React-praksisprosjekt. Du lærer ferdigheter som:

  • Henter data fra eksterne APIer
  • Utforming av gjenbrukbare UI-komponenter
  • Håndtering av svar og feil
  • Administrere appstatus på tvers av komponenter

Funksjoner å implementere kan inkludere å vise gjeldende vær basert på nettleserens geolokalisering. La deretter brukere søke vær etter by. Utvid ved å vise 5–7 dagers prognoser, værvarsler, detaljerte detaljer og grafer.

Dette prosjektet hjelper med å sementere viktige React-ferdigheter mens du lager en polert app du faktisk kan bruke og demonstrere under intervjuer!

3. Oppskriftssøk-appen

Hvis du liker å lage mat, hva med å lage din egen React-app for oppskriftsøker? Ideene inkluderer:

  • Bla gjennom oppskrifter etter ingredienser/mat
  • Lagre favorittoppskrifter
  • Del oppskrifter sosialt

Funksjonalitet kan bruke APIene for MealDB og Spoonacular resept. Frontend-messig, utfordre deg selv med funksjoner som uendelig rulling, popups/modaler og dra+slipp. Den utnytter React-styrkene for å gjengi brukergrensesnitt raskt og jevnt.

Appen appellerer til en praktisk brukssak mens den viser frem ferdigheter i å hente og gjengi eksterne data. Bruk den til å overraske venner med smarte oppskriftsforslag!

4. GitHub Profiles Finder

Utviklere bor på GitHub i disse dager. Hvorfor ikke bygge din egen React-baserte GitHub-profilsøker-app? Ideene inkluderer:

  • Søk etter brukere
  • Vis profiler med følgere, repoer osv.
  • Vis nylige aktiviteter
  • Sammenlign brukere side ved side

Utnytt GitHub REST API for å laste inn ekte data. Øv på å hente og behandle JSON-brukerdata. Lag et visuelt overbevisende profildashbord komplett med diagrammer. Benytt deg av ruter og tilpassede kroker for gjenbruk av kode.

Siden GitHub er en utviklerstiftelse, utgjør denne appen en flott portefølje, samtidig som den bruker nøkkelkompetanse for React!

5. Quiz/Survey-app

Ønsker du å forbedre oppbevaring av kunnskap? Eller trenger du et sted for markedsundersøkelser? Reager på redningen med din egen quiz eller undersøkelsesapp!

Funksjonalitet kan omfatte:

  • Bygg quizer med tilpassede spørsmål
  • Støtt flervalg, sant/falsk, gratis svar
  • Vis umiddelbar scoring

Bruk statsadministrasjon for quizstatus på tvers av sider. Bruk ruter for flersides flyt med spørsmålsgrupper/resultater. Gjør spørsmål dynamiske ved å hente fra et eksempel på REST API eller din egen database.

Fra personlighetsquizer i buzzfeed-stil til studentstudiehjelpemidler, denne appen har et enormt potensial mens den fremhever Reacts interaktivitet og statlige håndteringstalent!

6. Kalkulator-app

Hvem sa at kalkulatorer må være kjedelige? Kickstart appen din ved å implementere kjernefunksjonalitet som:

  • Addisjon, subtraksjon og mer
  • Tastatur og klikk på input
  • Responsiv skjerm

Deretter krydres det med ekstrautstyr som vitenskapelig modus, prosentnøkler eller til og med grafisk plotting! Design den med glatte og raske UI-interaksjoner.

Under panseret fungerer selve kalkulatorlogikken som en god øvelse ved å bruke React-tilstand og effekter. Gjør appen til et utstillingsvindu ved å bruke stylingrammer som Material UI.

Alle trenger en kalkulator, så ikke bare er dette nyttig, men demonstrerer umiddelbart dine React-evner under jobbintervjuer!

7. Blogg/artikkelside

Vil du ha en innholdstung portefølje? Hvorfor ikke designe din egen blogg eller artikkelside i React!

Start med å implementere funksjoner som:

  • Hjemmeside
  • Artikler/innleggsliste
  • Individuelle artikkelsider
  • Grunnleggende redigeringsgrensesnitt

Støtt rik tekst ved hjelp av biblioteker som React Draft WYSISYG. Legg til kommentarseksjoner drevet av API-tjenester. Bruk ruter for ruting mellom visninger og tilpassede kroker for DRY-kode.

Ta det videre ved å tillate brukerkontoer, følgere, sanntidspostoppdatering via nettsockets. Himmelen er grensen!

Bloggeplattformer er fortsatt svært populære på nettet. Vis anmeldere at fullstacken din kanskje kan integreres med backends som Firebase, GraphQL eller ditt eget REST API!

8. Produktside for e-handel

Har du planer om å utvikle fullverdige nettbutikker? Start i det små ved å kode en responsiv React-produktsidekomponent med viktige e-handelselementer som:

  • Bildekarusell
  • Visning av kundevurdering
  • Pris-/alternativvelger
  • Legg til i handlekurv-knappen

Gjør det dynamisk ved å laste inn produktdata fra en falsk eller ekte API. Bytt ut bilder og data for å gjenbruke komponenten på tvers av produkter.

Legg til avansert funksjonalitet som visning og administrasjon av kundeanmeldelser. Bruk React-kontekst for tema og global statsstyring.

Selv om den er enkel, danner denne komponenten grunnlaget for mer komplekse utstillingsvinduer. Perfekt for å demonstrere relevante ferdigheter under utviklerintervjuer!

9. Dashboard for sosiale medier

Sosiale nettverk som Twitter og Facebook ser intens React-bruk. Modeller din egen miniplattform ved å gjøre narr av kjerneelementer:

  • Aktivitetsstrøm
  • Følger Tracker
  • Del boks

Bruk React-ruteren til å håndtere ruting mellom de forskjellige visningene. Implementer redux for state management på tvers av komponenter.

Få det til å føles dynamisk ved å koble til Pusher- eller Serverless web-socket-tjenestene. Dette muliggjør sanntids feedoppdatering når nye hendelser oppstår.

Til slutt, pakk komponentene inn i en temaleverandør for mørk modus-veksling og tilpassede CSS-variabler. Sluttproduktet utgjør et flott midtpunkt i kodingsporteføljen, samtidig som det viser React-kompetanser fra den virkelige verden!

Siste tanker

Der har du det - 9 fantastiske React-prosjektideer for nybegynnere alt fra håndterbare bygg som en gjøremålsliste til tunge oppgaver som en sosial medieplattform.

Hvert prosjekt presser dine React-ferdigheter litt lenger. De avslører hvordan React skinner for å lage komplekse, interaktive brukergrensesnitt samtidig som de opprettholder topp ytelse.

Å fullføre flere av disse gir deg en mangfoldig portefølje som beviser React-mestring for arbeidsgivere. Appene er også nyttige for personlig bruk eller som utgangspunkt for enda større produkter senere.

Så ikke vent - velg dine favoritter og begynn å kode! Vi gleder oss til å se hvilke fantastiske React-apper du bygger.

Se Også: