Μάθετε το React.js δημιουργώντας έργα - Δημιουργήστε μια εφαρμογή υπενθύμισης γενεθλίων

Όταν μαθαίνετε μια νέα ικανότητα, τα εκπαιδευτικά βίντεο μπορούν να σας οδηγήσουν μόνο μέχρι τώρα. Πολλοί άνθρωποι συμφωνούν ότι το να βάζεις τα χέρια σου βρώμικα δημιουργώντας ένα έργο είναι ο τρόπος που πρέπει να προχωρήσεις.

Έτσι, σε αυτήν τη σειρά πρακτικών άρθρων, δεν θα δημιουργήσουμε ένα ή δύο, αλλά πέντε μικρές εφαρμογές React.

Αυτές οι εφαρμογές θα κυμαίνονται από μικρές έως μεσαίες και θα απαιτήσουν από εσάς να δημιουργήσετε το όλο πράγμα μόνοι σας. Όπως θα κωδικοποιήσετε πραγματικά την εφαρμογή και θα περάσετε τις δοκιμαστικές περιπτώσεις και βεβαιωθείτε ότι έχετε μάθει κάθε δεξιότητα.

Ετοιμος να αρχίσω?

Πώς θα λειτουργήσει αυτό

Αυτό το άρθρο εμπνέεται σε μεγάλο βαθμό από το βίντεο του freeCodeCamp εδώ. Αλλά αντί να παρακολουθείτε μόνο το βίντεο, θα πρέπει να ολοκληρώσετε τα έργα με τα χέρια σας.

Καθ 'όλη τη διάρκεια αυτής της σειράς mini blog, θα δημιουργήσετε πέντε μικρά έργα. Και για κάθε έργο, υπάρχουν μερικοί βασικοί κανόνες:

  1. Πρέπει να κωδικοποιήσετε ορισμένες (ή όλες) πτυχές μιας δυνατότητας
  2. Πρέπει να περάσετε τις δοκιμασίες για τις προκλήσεις
  3. Μπορείτε να αναζητήσετε εξωτερική βοήθεια. Αλλά θα συνιστούσα να περάσετε λίγο χρόνο με τη διεπαφή και τις οδηγίες πρώτα. Αυτό συμβαίνει επειδή η διεπαφή έχει σχεδιαστεί με βάση τον τρόπο που πιθανότατα θα ξοδεύετε το χρόνο σας ως προγραμματιστής σε εργαλεία που βασίζονται σε προγραμματιστές.

Απλώς μια σημείωση: το codedamn περιστρέφει μια παρουσία διακομιστή για κάθε χρήστη, οπότε για να χρησιμοποιήσετε την τάξη πρέπει να εγγραφείτε / να συνδεθείτε.

Εάν θέλετε απλώς να δείτε τον κώδικα και να δουλέψετε μόνοι σας, όχι στην τάξη, μπορείτε να τον δείτε στο GitHub. Έχω συνδέσει το GitHub σε κάθε ενότητα παρακάτω, ώστε να μπορείτε να μεταβείτε στο σχετικό μέρος του κώδικα.

Ας ξεκινήσουμε λοιπόν με το πρώτο έργο. Εάν λάβω καλά σχόλια, θα συνεχίσω τις αναλύσεις και τα έργα.

Τρόπος δημιουργίας εφαρμογής υπενθύμισης γενεθλίων (Project # 1)

Επειδή αυτό είναι το πρώτο μας έργο, θα διατηρήσω την πολυπλοκότητα πολύ χαμηλή. Σε αυτό το έργο, θα χρησιμοποιήσουμε το React για να αποδώσουμε μια λίστα στοιχείων δεδομένων, δηλαδή τα γενέθλια λίγων ατόμων.

Αυτά τα δεδομένα θα αποδίδονται από μια στατική πηγή δεδομένων και θα σας βοηθήσουν να κατανοήσετε τον τρόπο εισαγωγής και χρήσης / εκκαθάρισης δεδομένων σε μια κατάσταση. Θα εργαστούμε μέσα σε μια τάξη που έχω δημιουργήσει με το έργο μου Codedamn. Μπορείτε να ξεκινήσετε αυτήν την τάξη εδώ.

Συνιστώ ανεπιφύλακτα να ολοκληρώσετε αυτό και άλλες τάξεις όσο μπορείτε μόνοι σας. Μπορείτε (και πρέπει) να χρησιμοποιήσετε αυτήν την ανάρτηση ιστολογίου ως οδηγό.

Να τι θα μάθετε σε αυτήν την τάξη:

  1. Πώς φαίνεται ένα βασικό έργο React
  2. Πώς να φορτώσετε δεδομένα από ένα στατικό αρχείο JS
  3. Τρόπος χρήσης του useState για την αποθήκευση δεδομένων
  4. Πώς να διαγράψετε τη μεταβλητή κατάστασης και να δείτε ότι αντικατοπτρίζεται στο περιβάλλον χρήστη

Εργαστήριο 1 - Εισαγωγή στο έργο

Αυτός είναι ο σύνδεσμος προς αυτό το εργαστήριο.

Αυτή η πρώτη πρόκληση σας εισάγει στο έργο και τη δομή του. Αφιερώστε λίγο χρόνο εντοπίζοντας όλα τα σχετικά κομμάτια σε αυτό, και μόλις τελειώσετε, απλώς πατήστε "Εκτέλεση δοκιμών" για να περάσετε αυτήν την πρόκληση. Τίποτα φανταχτερό εδώ :)

Lab 2 - Πώς να δημιουργήσετε το κοντέινερ προβολής γενεθλίων

Ακολουθεί ο σύνδεσμος για αυτό το εργαστήριο πρακτικής.

Μπορείτε επίσης να βρείτε τα αρχεία εγκατάστασης του εργαστηρίου στο GitHub εδώ.

Τώρα που έχετε εξετάσει τον τρόπο οργάνωσης της δομής και των αρχείων του έργου, είναι καιρός να δημιουργήσετε μερικές στατικές προβολές.

Να θυμάστε ότι μπορείτε πάντα να δημιουργήσετε πρώτα στατικούς κάτοχους δεδομένων και, στη συνέχεια, να τους συμπληρώσετε με δυναμικά δεδομένα αργότερα.

Πρόκειται για μια πολύ καθαρή προσέγγιση για τη δημιουργία δυναμικών στοιχείων, καθώς σας επιτρέπει να προετοιμάσετε το στοιχείο προτού το γεμίσετε δυναμικά με δεδομένα.

Σε αυτό το εργαστήριο, έχετε τις ακόλουθες προκλήσεις που πρέπει να ολοκληρώσετε:

  • Μέσα στο αρχείο App.jsx, δημιουργήστε την ακόλουθη ιεραρχία HTML:
main > section.container > h3 + List
  • Συμβουλή: Η παραπάνω συντομογραφία σημαίνει ότι η δομή σας πρέπει να μοιάζει με την ακόλουθη:

  • Θα h3πρέπει να περιέχει το κείμενο:
0 birthdays today
  • Το στοιχείο σας πρέπει να είναι το List.jsxστοιχείο που εισάγεται στην κορυφή.

Για να περάσετε όλες τις δοκιμές, βεβαιωθείτε ότι έχετε κάνει τα εξής:

  • Ένα στοιχείο «h3» πρέπει να υπάρχει στο αρχείο App.jsx
  • Η ετικέτα 'h3' θα πρέπει να περιέχει "0 γενέθλια σήμερα" (χωρίς εισαγωγικά)
  • Το στοιχείο "Λίστα" πρέπει να αποδίδεται

Εδώ είναι η λύση σε αυτήν την πρόκληση:

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 - Τρόπος συμπλήρωσης δεδομένων στατικής λίστας

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.

Υπάρχουν πολλά κενά που πρέπει να καλυφθούν ακόμη, αλλά υπάρχει μια καλή πιθανότητα να σας ξεκινήσει αρκετά ομαλά εάν είστε καινούργιοι.

Φροντίστε να μου πείτε πώς ήταν η εμπειρία σας στη λαβή του Twitter, καθώς αυτό θα με βοηθήσει να διαμορφώσω τις επόμενες αίθουσες πρακτικής.