Učite React.js izradom projekata - stvorite aplikaciju za podsjetnik za rođendan

Kad učite novu vještinu, video vodiči vas mogu odvesti samo do sada. Mnogi se ljudi slažu da je prljanje ruku izgradnjom projekta put koji treba ići.

Dakle, u ovoj seriji praktičnih članaka izradit ćemo ne jednu ili dvije, već pet malih React aplikacija.

Te će se aplikacije kretati od malih do srednjih i zahtijevat će da sami napravite cijelu stvar. Kao da ćete stvarno kodirati aplikaciju i proći test slučajeve i pobrinuti se da naučite svaku vještinu.

Spremni za početak?

Kako će ovo funkcionirati

Ovaj je članak nadahnut vlastitim videozapisom freeCodeCampa ovdje. No, umjesto da samo gledate video, morat ćete dovršiti projekte vlastitim rukama.

Kroz ovu mini seriju blogova izradit ćete pet malih projekata. I za svaki projekt postoje neka osnovna pravila:

  1. Morate kodirati određene (ili sve) aspekte značajke
  2. Morate proći zadane testove za izazove
  3. Možete potražiti vanjsku pomoć. No, preporučio bih da prvo provedete neko vrijeme sa sučeljem i uputama. To je zato što je sučelje dizajnirano na temelju toga kako ćete zapravo provesti vrijeme kao programer u alatima temeljenim na programerima.

Samo napomena: codedamn za svakog korisnika zavrti instancu poslužitelja, pa da biste koristili učionicu, morate se registrirati / prijaviti.

Ako samo želite provjeriti kod i samostalno razraditi projekt, a ne u učionici, možete ga pogledati na GitHubu. Povezao sam se s GitHubom u svakom odjeljku u nastavku kako biste mogli prijeći na odgovarajući dio koda.

Pa krenimo s prvim projektom. Ako primim dobre povratne informacije, nastavit ću s pisanjem i projektima.

Kako izraditi aplikaciju za podsjetnik na rođendan (projekt br. 1)

Budući da je ovo naš prvi projekt, složenost ću držati na vrlo niskoj razini. U ovom projektu koristit ćemo React za prikaz popisa podataka, to jest rođendana nekolicine ljudi.

Ti će se podaci prikazivati ​​iz statičkog izvora podataka i trebali bi vam pomoći da razumijete kako uvesti i koristiti / očistiti podatke unutar stanja. Radit ćemo u učionici koju sam stvorio svojim projektom Codedamn. Ovu učionicu možete pokrenuti ovdje.

Toplo preporučujem da sami i dovršite ovu i druge učionice. Ovaj post na blogu možete (i trebate) koristiti kao vodič.

Evo što ćete naučiti u ovoj učionici:

  1. Kako izgleda osnovni React projekt
  2. Kako učitati podatke iz statičke JS datoteke
  3. Kako koristiti useState za pohranu podataka
  4. Kako očistiti varijablu stanja i vidjeti kako se to odražava u korisničkom sučelju

Laboratorij 1 - Uvod u projekt

Evo veze do ovog laboratorija.

Ovaj prvi izazov upoznaje vas s projektom i njegovom strukturom. Provedite neko vrijeme locirajući sve bitne dijelove u ovom, a nakon što završite, jednostavno pritisnite "Pokreni testove" da biste prošli ovaj izazov. Ovdje nema ništa fensi :)

Laboratorij 2 - Kako stvoriti spremnik za rođendanski pogled

Evo poveznice s ovim laboratorijom.

Datoteke za postavljanje laboratorija na GitHubu također možete pronaći ovdje.

Sad kad ste pogledali kako su organizirane struktura projekta i datoteke, vrijeme je da stvorite neke statične prikaze.

Imajte na umu da uvijek možete prvo stvoriti držače statičkih podataka, a zatim ih kasnije popuniti dinamičkim podacima.

Ovo je vrlo čist pristup izradi dinamičkih komponenata, jer vam omogućuje da komponentu pripremite prije nego što je dinamički napunite podacima.

U ovom laboratoriju morate ispuniti sljedeće izazove:

  • Unutar datoteke App.jsx stvorite sljedeću HTML hijerarhiju:
main > section.container > h3 + List
  • Savjet: Gornja kratica znači da bi vaša struktura trebala izgledati ovako:

  • Vaš h3bi trebao sadržavati tekst:
0 birthdays today
  • Vaša komponenta trebala bi biti List.jsxkomponenta koja je uvezena na vrhu.

Da biste položili sve testove, učinite sljedeće:

  • U vašoj datoteci App.jsx trebao bi biti prisutan jedan element 'h3'
  • Vaša oznaka 'h3' trebala bi sadržavati "0 rođendana danas" (bez navodnika)
  • Vaša komponenta "Popis" trebala bi se prikazati

Evo rješenja za ovaj izazov:

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

Laboratorij 3 - Kako popuniti statičke podatke popisa

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.

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.