Õppige React.js ehitades projekte - looge sünnipäevase meeldetuletuse rakendus

Uut oskust õppides võivad videoõpetused viia teid vaid nii kaugele. Paljud inimesed nõustuvad, et projekti ehitamise abil on oma käed määrdunud.

Nii et selles praktiliste artiklite seerias ei loo me mitte ühte ega kahte, vaid viis väikest rakendust React.

Need rakendused varieeruvad väikestest kuni keskmise suurusega ja nõuavad, et te ise kogu selle ehitaksite. Nagu kodeeriksite tõesti rakenduse, läbiksite proovijuhud ja veenduge, et olete iga oskuse õppinud.

Kas olete alustamiseks valmis?

Kuidas see töötab?

See artikkel on suuresti inspireeritud freeCodeCampi enda videost siin. Kuid video vaatamise asemel peate projektid oma kätega lõpule viima.

Kogu selle ajaveebisarja jooksul ehitate viis väikest projekti. Ja iga projekti jaoks on mõned põhireeglid:

  1. Peate kodeerima funktsiooni teatud (või kõik) aspektid
  2. Väljakutseteks peate läbima antud testid
  3. Võite otsida välist abi. Kuid ma soovitaksin kõigepealt veidi aega kasutada liidese ja juhistega. Selle põhjuseks on see, et liides on kavandatud lähtuvalt sellest, kuidas tõenäoliselt arendajapõhistes tööriistades oma aega arendajana veedate.

Lihtsalt märkus: codedamn keerutab iga kasutaja jaoks serveri eksemplari, nii et klassiruumi kasutamiseks peate registreeruma / sisse logima.

Kui soovite lihtsalt koodi üle vaadata ja projekti ise läbi viia, mitte klassiruumis, saate seda vaadata GitHubis. Olen linkinud GitHubiga igas allpool olevas jaotises, et saaksite hüpata koodi vastavasse ossa.

Alustame siis esimese projektiga. Kui saan head tagasisidet, jätkan kirjutamist ja projekte.

Kuidas luua sünnipäeva meeldetuletuse rakendust (projekt nr 1)

Kuna see on meie esimene projekt, hoian keerukust väga madalal. Selles projektis kasutame React'i abil andmeüksuste loendi renderdamist, see tähendab mõne inimese sünnipäeva.

Need andmed renderdatakse staatilisest andmeallikast ja need peaksid aitama teil mõista, kuidas olekus andmeid importida ja kasutada / kustutada. Töötame klassiruumis, mille olen loonud oma projektiga Codedamn. Seda klassiruumi saate alustada siit.

Soovitan tungivalt selle ja teiste klassiruumide komplekteerimine nii palju kui võimalik ise. Saate (ja peaksite) seda blogipostitust juhendina kasutama.

Selles klassiruumis saate teada järgmist:

  1. Kuidas põhiline Reacti projekt välja näeb
  2. Kuidas laadida andmeid staatilisest JS-failist
  3. Kuidas kasutada teenust useState andmete salvestamiseks
  4. Kuidas olekumuuturit kustutada ja näha, mis kajastub kasutajaliideses

1. labor - sissejuhatus projekti

Siin on link sellele laborile.

See esimene väljakutse tutvustab teile projekti ja selle ülesehitust. Veenduge mõnda aega, leidmaks selles asjas kõik asjakohased tükid ja kui olete lõpetanud, vajutage selle väljakutse läbimiseks lihtsalt käsku Käivita testid. Siin pole midagi uhket :)

2. labor - kuidas luua sünnipäevavaate konteiner

Siin on link sellele praktikalaborile.

GitHubist leiate labori seadistusfailid ka siit.

Nüüd, kui olete uurinud, kuidas projekti struktuur ja failid on korraldatud, on aeg luua staatilised vaated.

Pidage meeles, et saate alati esmalt luua staatilisi andmekandjaid ja seejärel neid hiljem dünaamiliste andmetega asustada.

See on väga puhas lähenemine dünaamiliste komponentide ehitamisel, kuna see võimaldab teil komponendi valmis teha enne, kui selle dünaamiliselt andmetega täidate.

Selles laboris peate täitma järgmised väljakutsed:

  • Looge oma failis App.jsx järgmine HTML-hierarhia:
main > section.container > h3 + List
  • Vihje: ülaltoodud lühend tähendab, et teie struktuur peaks välja nägema järgmine:

  • Teie h3peaks sisaldama järgmist teksti:
0 birthdays today
  • Teie komponent peaks olema List.jsxkomponent, mis imporditakse ülaosas.

Kõigi testide läbimiseks tehke kindlasti järgmist.

  • Teie failis App.jsx peaks olema üks element h3
  • Teie silt „h3” peaks sisaldama „0 sünnipäeva täna” (jutumärkideta)
  • Teie komponent "Loend" peaks olema renderdatud

Selle väljakutse lahendus on järgmine:

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 - kuidas staatiliste loendite andmeid täita

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.

Täitmiseks on veel palju lünki, kuid on hea võimalus, et see aitab teil üsna sujuvalt alustada, kui olete uus.

Kindlasti öelge mulle, kuidas teie kogemused minu Twitteri käepidemes olid, sest see aitab mul raamistada järgmised harjutusklassid.