Lernen Sie React.js durch Erstellen von Projekten - Erstellen Sie eine Geburtstagserinnerungs-App

Wenn Sie eine neue Fähigkeit erlernen, können Video-Tutorials Sie nur so weit bringen. Viele Menschen sind sich einig, dass es der richtige Weg ist, sich beim Bau eines Projekts die Hände schmutzig zu machen.

In dieser Reihe von praktischen Artikeln werden wir also nicht eine oder zwei, sondern fünf kleine React-Anwendungen erstellen.

Diese Apps reichen von klein bis mittelgroß und erfordern, dass Sie das Ganze selbst erstellen. Als würden Sie die App wirklich codieren und die Testfälle bestehen und sicherstellen, dass Sie jede Fähigkeit erlernen.

Bereit zum Start?

Wie das funktionieren wird

Dieser Artikel ist stark von freeCodeCamps eigenem Video hier inspiriert. Aber anstatt nur das Video anzusehen, müssen Sie die Projekte mit Ihren eigenen Händen abschließen.

Im Verlauf dieser Mini-Blog-Reihe werden Sie fünf kleine Projekte erstellen. Und für jedes Projekt gibt es einige Grundregeln:

  1. Sie müssen bestimmte (oder alle) Aspekte einer Funktion codieren
  2. Sie müssen die gegebenen Tests für die Herausforderungen bestehen
  3. Sie können externe Hilfe suchen. Aber ich würde empfehlen, zuerst einige Zeit mit der Benutzeroberfläche und den Anweisungen zu verbringen. Dies liegt daran, dass die Benutzeroberfläche darauf ausgelegt ist, wie Sie Ihre Zeit als Entwickler wahrscheinlich tatsächlich mit entwicklerbasierten Tools verbringen.

Nur eine Anmerkung: codedamn startet für jeden Benutzer eine Serverinstanz. Um das Klassenzimmer nutzen zu können, müssen Sie sich registrieren / anmelden.

Wenn Sie nur den Code auschecken und das Projekt selbst und nicht im Klassenzimmer durcharbeiten möchten, können Sie es auf GitHub anzeigen. Ich habe in jedem Abschnitt unten auf GitHub verlinkt, damit Sie zum entsprechenden Teil im Code springen können.

Beginnen wir also mit dem ersten Projekt. Wenn ich ein gutes Feedback erhalte, werde ich die Zuschreibungen und Projekte fortsetzen.

So erstellen Sie eine Geburtstagserinnerungs-App (Projekt Nr. 1)

Da dies unser erstes Projekt ist, werde ich die Komplexität sehr gering halten. In diesem Projekt verwenden wir React, um eine Liste von Datenelementen zu rendern, dh die Geburtstage einiger weniger Personen.

Diese Daten werden aus einer statischen Datenquelle gerendert und sollen Ihnen helfen, das Importieren und Verwenden / Löschen von Daten innerhalb eines Status zu verstehen. Wir werden in einem Klassenzimmer arbeiten, das ich mit meinem Projekt Codedamn erstellt habe. Sie können dieses Klassenzimmer hier beginnen.

Ich empfehle dringend, dieses und andere Klassenzimmer so weit wie möglich selbst zu absolvieren. Sie können (und sollten) diesen Blog-Beitrag als Leitfaden verwenden.

Folgendes lernen Sie in diesem Klassenzimmer:

  1. Wie ein grundlegendes React-Projekt aussieht
  2. So laden Sie Daten aus einer statischen JS-Datei
  3. Verwendung von useState zum Speichern von Daten
  4. So löschen Sie die Statusvariable und sehen, dass sie sich in der Benutzeroberfläche widerspiegelt

Übung 1 - Einführung in das Projekt

Hier ist der Link zu diesem Labor.

Diese erste Herausforderung führt Sie in das Projekt und seine Struktur ein. Verbringen Sie einige Zeit damit, alle relevanten Teile in diesem zu finden. Wenn Sie fertig sind, klicken Sie einfach auf "Tests ausführen", um diese Herausforderung zu bestehen. Nichts Besonderes hier :)

Übung 2 - Erstellen des Containers für die Geburtstagsansicht

Hier ist der Link zu diesem Übungslabor.

Hier finden Sie auch die Setup-Dateien des Labors auf GitHub.

Nachdem Sie sich die Organisation der Projektstruktur und der Dateien angesehen haben, ist es an der Zeit, einige statische Ansichten zu erstellen.

Denken Sie daran, dass Sie immer zuerst statische Datenhalter erstellen und diese später mit dynamischen Daten füllen können.

Dies ist ein sehr sauberer Ansatz zum Erstellen dynamischer Komponenten, da Sie die Komponente vorbereiten können, bevor Sie sie dynamisch mit Daten füllen.

In diesem Labor müssen Sie die folgenden Herausforderungen bewältigen:

  • Erstellen Sie in Ihrer App.jsx-Datei die folgende HTML-Hierarchie:
main > section.container > h3 + List
  • Hinweis: Die obige Abkürzung bedeutet, dass Ihre Struktur wie folgt aussehen sollte:

  • Sie h3sollten den Text enthalten:
0 birthdays today
  • Ihre Komponente sollte die List.jsxKomponente sein, die oben importiert wird.

Stellen Sie Folgendes sicher, um alle Tests zu bestehen:

  • Ein 'h3'-Element sollte in Ihrer App.jsx-Datei vorhanden sein
  • Ihr 'h3'-Tag sollte "0 Geburtstage heute" enthalten (ohne Anführungszeichen)
  • Ihre 'List'-Komponente sollte gerendert werden

Hier ist die Lösung für diese Herausforderung:

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

Übung 3 - Auffüllen statischer Listendaten

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.