Lær React.js ved at bygge projekter - Opret en app til fødselsdagspåmindelse

Når du lærer en ny færdighed, kan videotutorials kun tage dig så langt. Mange mennesker er enige om, at det er den rigtige vej at få snavsede hænder ved at bygge et projekt.

Så i denne serie af praktiske artikler bygger vi ikke en eller to, men fem små React-applikationer.

Disse apps vil variere fra små til mellemstore og kræver, at du selv bygger det hele. Som om du virkelig koder appen og bestå testcases og sørger for at lære hver færdighed.

Klar til at starte?

Hvordan dette vil fungere

Denne artikel er stærkt inspireret af freeCodeCamps egen video her. Men i stedet for bare at se videoen, bliver du nødt til at gennemføre projekterne med dine egne hænder.

I løbet af denne mini-blogserie bygger du fem små projekter. Og for hvert projekt er der nogle grundlæggende regler:

  1. Du skal kode bestemte (eller alle) aspekter af en funktion
  2. Du skal bestå de givne tests for udfordringerne
  3. Du kan søge ekstern hjælp. Men jeg vil anbefale at bruge lidt tid på grænsefladen og instruktionerne først. Dette skyldes, at grænsefladen er designet ud fra, hvordan du sandsynligvis faktisk bruger din tid som udvikler i udviklerbaserede værktøjer.

Bare en note: codedamn spinder en serverinstans op for hver bruger, så for at bruge klasseværelset skal du registrere / logge på.

Hvis du bare vil tjekke koden og arbejde igennem projektet alene, ikke i klasseværelset, kan du se det på GitHub. Jeg har linket til GitHub i hvert afsnit nedenfor, så du kan springe til den relevante del i koden.

Så lad os komme i gang med det første projekt. Hvis jeg modtager god feedback, fortsætter jeg opskrivningerne og projekterne.

Sådan opbygges fødselsdagspåmindelsesapp (projekt nr. 1)

Fordi dette er vores første projekt, vil jeg holde kompleksiteten meget lav. I dette projekt bruger vi React til at gengive en liste over dataelementer, det vil sige fødselsdage for et par personer.

Disse data gengives fra en statisk datakilde og skal hjælpe dig med at forstå, hvordan du importerer og bruger / rydder data i en tilstand. Vi arbejder inde i et klasseværelse, jeg har oprettet med mit projekt Codedamn. Du kan starte dette klasseværelse her.

Jeg anbefaler stærkt at udfylde dette og andre klasselokaler så meget som du selv kan. Du kan (og bør) bruge dette blogindlæg som en vejledning.

Her er hvad du lærer i dette klasseværelse:

  1. Hvordan et grundlæggende React-projekt ser ud
  2. Sådan indlæses data fra en statisk JS-fil
  3. Sådan bruges useState til at gemme data
  4. Sådan ryddes tilstandsvariablen og ser det afspejles i brugergrænsefladen

Lab 1 - Introduktion til projektet

Her er linket til dette laboratorium.

Denne første udfordring introducerer dig til projektet og dets struktur. Brug lidt tid på at finde alle relevante bits og stykker i denne, og når du er færdig, skal du blot trykke på "Kør tests" for at bestå denne udfordring. Intet smukt her :)

Lab 2 - Sådan oprettes en container til fødselsdagsvisning

Her er linket til dette praksislaboratorium.

Du kan også finde installationsfiler fra laboratoriet på GitHub her.

Nu hvor du har set på, hvordan projektstrukturen og filerne er organiseret, er det tid til at oprette nogle statiske visninger.

Husk, at du altid altid kan oprette statiske dataholdere og derefter udfylde dem med dynamiske data senere.

Dette er en meget ren tilgang til opbygning af dynamiske komponenter, da det giver dig mulighed for at gøre komponenten klar, før du fylder den dynamisk med data.

I dette laboratorium har du følgende udfordringer at gennemføre:

  • Inde i din App.jsx-fil skal du oprette følgende HTML-hierarki:
main > section.container > h3 + List
  • Tip: Ovenstående forkortelse betyder, at din struktur skal se ud som følger:
  • Din h3skal indeholde teksten:
0 birthdays today
  • Din komponent skal være den List.jsxkomponent, der importeres øverst.

For at bestå alle testene skal du sørge for at gøre følgende:

  • Et 'h3'-element skal være til stede i din App.jsx-fil
  • Dit 'h3' -tag skal indeholde "0 fødselsdage i dag" (uden anførselstegn)
  • Din 'List' komponent skal gengives

Her er løsningen på denne udfordring:

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 - Sådan udfyldes 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.

Der er mange huller, der skal udfyldes endnu, men der er en god chance for, at det får dig i gang ret glat, hvis du er ny.

Sørg for at fortælle mig, hvordan din oplevelse var på mit Twitter-håndtag, da dette vil hjælpe mig med at indramme de næste praksisundervisningslokaler.