Lær React.js ved å bygge prosjekter - Opprett en påminnelsesapp for bursdag

Når du lærer en ny ferdighet, kan videoopplæring bare ta deg så langt. Mange er enige om at veien å gå skitten ved å bygge et prosjekt.

Så i denne serien med praktiske artikler bygger vi ikke en eller to, men fem små React-applikasjoner.

Disse appene vil variere fra små til mellomstore og vil kreve at du bygger det hele selv. Som om du virkelig vil kode appen og bestå testtilfellene og sørge for at du lærer hver ferdighet.

Klar til å starte?

Hvordan dette vil fungere

Denne artikkelen er sterkt inspirert av freeCodeCamps egen video her. Men i stedet for bare å se på videoen, må du fullføre prosjektene med egne hender.

Gjennom løpet av denne mini-bloggserien bygger du fem små prosjekter. Og for hvert prosjekt er det noen grunnleggende regler:

  1. Du må kode visse (eller alle) aspekter av en funksjon
  2. Du må bestå de gitte testene for utfordringene
  3. Du kan søke ekstern hjelp. Men jeg vil anbefale å bruke litt tid på grensesnittet og instruksjonene først. Dette er fordi grensesnittet er designet basert på hvordan du sannsynligvis faktisk bruker tiden din som utvikler i utviklerbaserte verktøy.

Bare en merknad: codedamn spinner opp en serverinstans for hver bruker, så for å bruke klasserommet må du registrere / logge på.

Hvis du bare vil sjekke koden og jobbe gjennom prosjektet alene, ikke i klasserommet, kan du se den på GitHub. Jeg har koblet til GitHub i hver seksjon nedenfor, slik at du kan hoppe til den aktuelle delen i koden.

Så la oss komme i gang med det første prosjektet. Hvis jeg får gode tilbakemeldinger, vil jeg fortsette oppskrivningene og prosjektene.

Hvordan bygge bursdagspåminnelsesapp (prosjekt nr. 1)

Fordi dette er vårt første prosjekt, vil jeg holde kompleksiteten veldig lav. I dette prosjektet vil vi bruke React til å gjengi en liste over dataelementer, det vil si fødselsdagene til noen få personer.

Disse dataene blir gjengitt fra en statisk datakilde og skal hjelpe deg å forstå hvordan du importerer og bruker / tømmer data i en tilstand. Vi jobber inne i et klasserom jeg har laget med prosjektet mitt Codedamn. Du kan starte dette klasserommet her.

Jeg anbefaler på det sterkeste å fullføre dette og andre klasserom så mye du kan selv. Du kan (og bør) bruke dette blogginnlegget som en guide.

Dette lærer du i dette klasserommet:

  1. Hvordan et grunnleggende React-prosjekt ser ut
  2. Hvordan laste inn data fra en statisk JS-fil
  3. Hvordan bruke useState til å lagre data
  4. Hvordan tømme tilstandsvariabelen og se det som gjenspeiles i brukergrensesnittet

Lab 1 - Introduksjon til prosjektet

Her er lenken til dette laboratoriet.

Denne første utfordringen introduserer deg for prosjektet og dets struktur. Bruk litt tid på å finne alle relevante biter og brikker i denne, og når du er ferdig, trykker du bare på "Kjør tester" for å klare denne utfordringen. Ikke noe fancy her :)

Lab 2 - Hvordan lage bursdagsvisningsbeholder

Her er lenken til dette praksislaboratoriet.

Du kan også finne installasjonsfilene til laboratoriet på GitHub her.

Nå som du har sett på hvordan prosjektstrukturen og filene er organisert, er det på tide å lage noen statiske visninger.

Husk at du alltid kan opprette statiske dataholdere først og deretter fylle dem ut med dynamiske data senere.

Dette er en veldig ren tilnærming til å bygge dynamiske komponenter, da det lar deg gjøre komponenten klar før du fyller den dynamisk med data.

I dette laboratoriet har du følgende utfordringer:

  • Opprett følgende HTML-hierarki i App.jsx-filen:
main > section.container > h3 + List
  • Tips: Forkortelsen ovenfor betyr at strukturen din skal se slik ut:

  • Du h3skal inneholde teksten:
0 birthdays today
  • Din komponent bør være den List.jsxkomponenten som er importert på toppen.

For å bestå alle testene må du gjøre følgende:

  • Ett 'h3'-element skal være til stede i App.jsx-filen
  • H3-koden din skal inneholde "0 fødselsdager i dag" (uten anførselstegn)
  • Din 'List' komponent skal gjengis

Her er løsningen på denne utfordringen:

import React, { useState } from 'react' import data from './data' import List from './List' function App() { // Edit your return statement here to match the instructions return (   

0 birthdays today

) } export default App

Lab 3 - Hvordan fylle ut statiske listedata

Here's the link to this lab.

You can also find the setup files of the lab on GitHub here.

We have the basic UI available to us. Let's now populate the static data from the data.js file.

This file has already been opened for you on the right side of the editor. Check out this file and see how the JSON data looks.

In this lab, you have to do the following things:

  • Inside your App.jsx file, you should now replace 0 Birthdays Today with Birthdays Today. Therefore, initially, it should show 5 Birthdays Today. Remember, the comes from the number of elements inside your data variable imported at the top.
  • Hint: You can use data.length
  • Pass the imported data variable as a prop to the List component. This prop should be called people
  • Hint:
  • In the List component, use this passed data to render just the names of the people for now. You can map over these people and display their names.

Here are 3 tests you have to pass:

  • Your App.jsx should now show "5 Birthdays Today" where "5" comes from the length of items imported at top
  • Your screen should show the names of all people in the list
  • You should use the "people" prop in the List component to pass the data and it should display the names

And here's the solution for the challenge.

App.jsx file:

import React, { useState } from 'react' import data from './data' import List from './List' function App() { return (   {/* Make change to "0" here */} 

{data.length} birthdays today

{/* pass data to list component */} ) } export default App

List.jsx file:

import React from 'react' // accept props here const List = (props) => { const { people } = props // Map over prop "people" and display only the names in any way you like return people.map((item) => { return 

{item.name}

}) } export default List

Lab 4 - How to display the new UI

Here's a link to this lab

You can also find the setup files of the lab on GitHub here.

Now that we have the names of people from the static data, let's make the UI a little bit better. You can look through all the CSS in the css files first, and then we will simply start using the CSS classes directly.

In this challenge, you only have to build up from the last challenge and create a UI inside List component.

In this lab, you have to do the following things:

  • Inside your List.jsx file, iterate over the people prop and display the following HTML structure:

NAME_OF_USER

AGE_OF_USER years

  • Make sure you replace the placeholders appropriately. Also, CSS classes in React JSX are named className, just a reminder!

Here are 4 tests you have to pass:

  • Your List component should render the "article" tag as parent
  • Your List component should render the "img" tag inside "article" tag with the correct src and alt tag
  • Your List component should render the "div > h4" inside the "article" tag with the name of the person
  • Your List component should render the "div > p" inside the "article" tag with the age of the person

And here's the solution (List.jsx file):

import React from 'react' // accept props here const List = (props) => { const { people } = props // Map over prop "people" and code the right structure return people.map((person) => { const { id, name, age, image } = person return (  

{name}

{age} years

) }) } export default List

Lab 5 - How to add a Clear All button

Here's a link to this lab

You can also find the setup files of the lab on GitHub here.

In this final lab, let's now add a “Clear” button which will clear the records and reset it to 0 birthdays. The button is already available for you, you just have to make sure it functions properly.

In this lab, you have to do the following things:

  • Create a new state variable called people
  • The initial value of this state variable should be the imported data from the top.
  • Pass this state variable now in the List component.
  • When the Clear button is pressed, empty the state variable so that no record is displayed (Hint: set it to an empty array)

And these are the tests you have to pass:

  • There should be a "Clear All" button on the screen (already done for you)
  • Initially, all records should be visible
  • When the "Clear All" button is pressed, it should remove all records from the screen

Here's the App.jsx solution file for this lab:

import React, { useState } from 'react' import data from './data' import List from './List' function App() { // create a state variable here const [people, setPeople] = useState(data) // this should clear all records function clearAllRecords() { setPeople([]) } return (   

{people.length} birthdays today

Clear All ) } export default App

And you're done! Congrats on completing a small project in React. Way to go :)

Conclusion

I hope you enjoyed this codedamn classroom. You can find many others in the React Mastery learning path on codedamn.

Det er mange hull å fylle ennå, men det er en god sjanse for at det kommer i gang ganske greit hvis du er ny.

Sørg for at du forteller meg hvordan opplevelsen din var på Twitter-håndtaket mitt, da dette vil hjelpe meg å ramme de neste praksisklasserommene.