Ismerje meg a React.js-t építési projektek segítségével - Hozzon létre egy születésnapi emlékeztető alkalmazást

Amikor új készségeket tanul, a video-oktatóanyagok csak idáig vezethetnek. Sokan egyetértenek abban, hogy a projekt megépítésével bepiszkolhatja a kezét.

Tehát ebben a gyakorlati cikk-sorozatban nem egy vagy kettőt, hanem öt kis React alkalmazást építünk fel.

Ezek az alkalmazások kicsi és közepes méretűek lehetnek, és megkövetelik, hogy maga készítse el az egészet. Mintha valóban kódolná az alkalmazást, átadná a teszteseteket, és mindenképpen megtanulja az egyes készségeket.

Készen áll az indulásra?

Hogyan fog működni

Ezt a cikket nagyban inspirálta a freeCodeCamp saját videója. De ahelyett, hogy csak a videót néznéd, a projekteket saját kezűleg kell elvégezned.

A mini blogsorozat során öt kis projektet épít. És minden projekt esetében van néhány alapvető szabály:

  1. Kódolnia kell egy funkció bizonyos (vagy az összes) aspektusát
  2. A kihívásokhoz át kell adnia a megadott teszteket
  3. Külső segítséget kérhet. De azt javaslom, hogy töltsön el egy kis időt a kezelőfelülettel és az utasításokkal. Ennek oka, hogy a kezelőfelületet arra tervezték, hogy valójában hogyan töltheti el fejlesztőként eltöltött idejét a fejlesztőalapú eszközökben.

Csak egy megjegyzés: a codedamn minden felhasználó számára felpörget egy szerverpéldányt, így az osztályterem használatához regisztrálnia / be kell jelentkeznie.

Ha csak meg akarja nézni a kódot, és egyedül végig akarja dolgozni a projektet, nem pedig az osztályteremben, megtekintheti a GitHubon. Az alábbi szakaszokban a GitHubhoz linkeltem, így a kód megfelelő részéhez ugorhat.

Kezdjük tehát az első projekttel. Ha jó visszajelzéseket kapok, folytatom az írásokat és a projekteket.

Hogyan készítsünk születésnapi emlékeztető alkalmazást (1. projekt)

Mivel ez az első projektünk, a bonyolultságot nagyon alacsony szinten fogom tartani. Ebben a projektben a React használatával megjelenítjük az adatok listáját, vagyis néhány ember születésnapját.

Ezek az adatok statikus adatforrásból kerülnek előállításra, és segítenek megérteni, hogyan lehet adatokat importálni és felhasználni / törölni egy állapoton belül. Egy olyan tanteremben fogunk dolgozni, amelyet a Codedamn projektemmel hoztam létre. Itt kezdheti meg ezt a tantermet.

Nagyon ajánlom, hogy töltse ki ezt és más tanteremeket, amennyire csak tudja egyedül. Használhatja (és kell is) ezt a blogbejegyzést útmutatóként.

A következőket tanulhatja meg ebben a tanteremben:

  1. Hogyan néz ki egy alapvető React projekt
  2. Hogyan lehet adatokat betölteni egy statikus JS fájlból
  3. Hogyan kell használni a useState-t az adatok tárolásához
  4. Hogyan lehet törölni az állapotváltozót és látni, ami tükröződik a felhasználói felületen

1. labor - Bevezetés a projektbe

Itt található a link erre a laborra.

Ez az első kihívás megismerteti Önt a projekttel és annak felépítésével. Töltsön el egy kis időt az összes releváns darab megtalálásával ebben az egyben, és ha végzett, egyszerűen nyomja meg a "Tesztek futtatása" gombot, hogy megfeleljen ennek a kihívásnak. Itt semmi divatos :)

2. labor - A születésnapi nézet tárolójának létrehozása

Itt található a link erre a gyakorlólaborra.

A laboratórium telepítőfájljait itt is megtalálhatja a GitHubon.

Most, hogy megnézte a projekt felépítésének és fájljainak felépítését, ideje statikus nézeteket létrehozni.

Ne feledje, hogy először mindig létrehozhat statikus adattartókat, majd később dinamikus adatokkal töltheti fel őket.

Ez nagyon tiszta megközelítés a dinamikus komponensek felépítéséhez, mivel lehetővé teszi az alkatrész készenlétét, mielőtt dinamikusan megtöltené adatokkal.

Ebben a laboratóriumban a következő kihívásokat kell teljesítenie:

  • Az App.jsx fájlban hozza létre a következő HTML-hierarchiát:
main > section.container > h3 + List
  • Tipp: A fenti rövidítés azt jelenti, hogy a szerkezetének a következőképpen kell kinéznie:

  • A h3szövegnek tartalmaznia kell:
0 birthdays today
  • Az Ön összetevőjének kell lennie List.jsxa tetején importált összetevőnek.

Az összes teszt teljesítéséhez győződjön meg arról, hogy a következőket hajtotta végre:

  • Egy 'h3' elemnek kell lennie az App.jsx fájlban
  • A "h3" címkédnek tartalmaznia kell "ma 0 születésnapot" (idézőjelek nélkül)
  • A 'List' komponensét meg kell jeleníteni

Íme a megoldás erre a kihívásra:

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

3. labor - A statikus lista adatainak feltöltése

Itt található a link erre a laborra.

A laboratórium telepítőfájljait itt is megtalálhatja a GitHubon.

A rendelkezésünkre áll az alapvető felhasználói felület. Töltsük fel most a statikus adatokat a data.jsfájlból.

Ezt a fájlt már megnyitották az Ön számára a szerkesztő jobb oldalán. Nézze meg ezt a fájlt, és nézze meg, hogyan néz ki a JSON adat.

Ebben a laboratóriumban a következő dolgokat kell tennie:

  • Belül a App.jsxfájlt, akkor most már cserélni 0 Birthdays Todaya Birthdays Today. Ezért kezdetben meg kell mutatnia 5 Birthdays Today. Ne feledje, hogy a dataváltozó belsejében lévő elemek számából származik .
  • Tipp: Használhatja data.length
  • Adja át az importált dataváltozót propneként az Listösszetevőnek. Ezt a támaszt kell hívnipeople
  • Célzás:
  • A Listkomponensben használja ezt az átadott adatot, hogy egyelőre csak az emberek nevét jelenítse meg. Akkor mapát ezeket az embereket, és megjeleníti a nevüket.

Itt van 3 teszt, amelyet le kell tennie:

  • Az App.jsx-nél mostantól az „5 születésnapot” kell mutatnia, ahol az „5” a tetején importált elemek hosszából származik
  • A képernyőn meg kell jeleníteni a listában szereplő összes ember nevét
  • Az adatok továbbításához használja a Lista összetevő "people" prop-ját, és meg kell jelenítenie a neveket

És itt van a megoldás a kihívásra.

App.jsx fájl:

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 fájl:

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

4. labor - Az új felhasználói felület megjelenítése

Itt van egy link erre a laboratóriumra

A laboratórium telepítőfájljait itt is megtalálhatja a GitHubon.

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.

There are a lot of gaps to fill yet, but there's a good chance that it will get you started pretty smoothly if you're new.

Make sure you tell me how your experience was on my Twitter handle, as this will help me frame the next practice classrooms.