Când înveți o nouă abilitate, tutorialele video te pot duce doar până acum. Mulți oameni sunt de acord că murdărirea mâinilor prin construirea unui proiect este calea de urmat.

Deci, în această serie de articole practice, vom construi nu una sau două, ci cinci aplicații mici React.

Aceste aplicații vor varia de la mici la mijlocii și vă vor cere să construiți singur totul. Ca și cum ai codifica cu adevărat aplicația și vei trece testele și te vei asigura că înveți fiecare abilitate.

Sunteți gata să începeți?

Cum va funcționa acest lucru

Acest articol este puternic inspirat de Routech propriul videoclip aici. Dar, în loc să vizionați doar videoclipul, va trebui să finalizați proiectele cu propriile mâini.

Pe parcursul acestei mini serii de bloguri, veți construi cinci proiecte mici. Și pentru fiecare proiect, există câteva reguli de bază:

  1. Trebuie să codificați anumite (sau toate) aspecte ale unei caracteristici
  2. Trebuie să treci testele date pentru provocări
  3. Puteți căuta ajutor extern. Dar aș recomanda mai întâi să petreceți ceva timp cu interfața și instrucțiunile. Acest lucru se datorează faptului că interfața este concepută pe baza modului în care probabil vă veți petrece timpul ca dezvoltator în instrumente bazate pe dezvoltatori.

Doar o notă: codedamn creează o instanță de server pentru fiecare utilizator, deci pentru a putea folosi clasa trebuie să vă înregistrați / să vă conectați.

Dacă doriți doar să verificați codul și să lucrați singur prin proiect, nu în clasă, îl puteți vizualiza pe GitHub. M-am conectat la GitHub în fiecare secțiune de mai jos, astfel încât să puteți trece la partea relevantă din cod.

Deci, să începem cu primul proiect. Dacă primesc feedback bun, voi continua redactările și proiectele.

Cum să construiești aplicația de memento pentru ziua de naștere (proiectul nr. 1)

Deoarece acesta este primul nostru proiect, voi menține complexitatea foarte scăzută. În acest proiect, vom folosi React pentru a reda o listă de elemente de date, adică zilele de naștere ale câtorva persoane.

Aceste date vor fi redate dintr-o sursă de date statice și ar trebui să vă ajute să înțelegeți cum să importați și să utilizați / ștergeți datele într-o stare. Vom lucra într-o sală de clasă pe care am creat-o cu proiectul meu Codedamn. Poti începe această sală de clasă aici.

Vă recomand cu încredere să finalizați această și alte săli de clasă, cât de mult puteți de unul singur. Puteți (și ar trebui) să utilizați această postare de blog ca ghid.

Iată ce veți învăța în această clasă:

  1. Cum arată un proiect de bază React
  2. Cum se încarcă datele dintr-un fișier JS static
  3. Cum se utilizează useState pentru a stoca date
  4. Cum să ștergeți variabila de stare și să o vedeți reflectată în interfața de utilizare

Laboratorul 1 – Introducere în proiect

Aflati Reactjs prin construirea de proiecte Creati o aplicatie
Previzualizare a laboratorului în care finalizați această sarcină

Iată linkul către acest laborator.

Această primă provocare vă introduce în proiect și structura acestuia. Petreceți ceva timp localizând toate piesele și piesele relevante în acesta și, odată ce ați terminat, pur și simplu apăsați „Run Tests” pentru a trece la această provocare. Nimic de lux aici 🙂

Laboratorul 2 – Cum să creați containerul pentru vizualizarea zilei de naștere

1611465966 222 Aflati Reactjs prin construirea de proiecte Creati o aplicatie
Previzualizare a laboratorului în care finalizați această sarcină

Iată linkul către acest laborator de practică.

De asemenea, puteți găsi fișierele de configurare ale laboratorului pe GitHub aici.

Acum că ați analizat cum sunt organizate structura și fișierele proiectului, este timpul să creați câteva vizualizări statice.

Amintiți-vă că puteți crea oricând mai întâi suporturi de date statice și apoi să le completați cu date dinamice mai târziu.

Aceasta este o abordare foarte curată pentru a construi componente dinamice, deoarece vă permite să pregătiți componenta înainte de a o umple dinamic cu date.

În acest laborator, aveți următoarele provocări de îndeplinit:

  • În fișierul dvs. App.jsx, creați următoarea ierarhie HTML:
main > section.container > h3 + List
  • Sugestie: abrevierea de mai sus înseamnă că structura dvs. ar trebui să arate după cum urmează:
<main>
	<section class="container">
    	<h3></h3>
        <List />
    </section>
</main>
  • Ta h3 ar trebui să conțină textul:
0 birthdays today
  • Ta <List /> componenta ar trebui să fie List.jsx componentă care este importată în partea de sus.

Pentru a trece toate testele, asigurați-vă că faceți următoarele:

  • Un fișier „h3” ar trebui să fie prezent în fișierul dvs. App.jsx
  • Eticheta „h3” ar trebui să conțină „0 zile de naștere astăzi” (fără ghilimele)
  • Componenta dvs. „Listă” ar trebui redată

Iată soluția la această provocare:

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 (
		<main>
			<section className="container">
				<h3>0 birthdays today</h3>
				<List />
			</section>
		</main>
	)
}

export default App

Laboratorul 3 – Cum se completează datele listei statice

1611465966 717 Aflati Reactjs prin construirea de proiecte Creati o aplicatie
Previzualizare a laboratorului în care finalizați această sarcină

Iată linkul către acest laborator.

De asemenea, puteți găsi fișierele de configurare ale laboratorului pe GitHub aici.

Avem la dispoziție interfața de bază. Să populăm acum datele statice din data.js fişier.

Acest fișier a fost deja deschis pentru dvs. în partea dreaptă a editorului. Verificați acest fișier și vedeți cum arată datele JSON.

În acest laborator, trebuie să faceți următoarele lucruri:

  • În interiorul tău App.jsx fișier, ar trebui să înlocuiți acum 0 Birthdays Today cu <item count> Birthdays Today. Prin urmare, inițial, ar trebui să arate 5 Birthdays Today. Amintiți-vă, <item count> provine din numărul de elemente din interiorul dvs. data variabilă importată în partea de sus.
  • Sugestie: Puteți utiliza data.length
  • Treceți importul data variabilă ca un suport pentru List componentă. Ar trebui numit acest prop people
  • Aluzie: <List people={data} />
  • În List componentă, utilizați aceste date transmise pentru a reda doar numele persoanelor pentru moment. Poti map peste acești oameni și afișează-le numele.

Iată 3 teste pe care trebuie să le treci:

  • App.jsx ar trebui să afișeze acum „5 zile de naștere astăzi”, unde „5” provine din lungimea elementelor importate în partea de sus
  • Ecranul dvs. ar trebui să afișeze numele tuturor persoanelor din listă
  • Ar trebui să utilizați elementul „oameni” din componenta Listă pentru a transmite datele și ar trebui să afișeze numele

Iată soluția pentru provocare.

Fișier App.jsx:

import React, { useState } from 'react'
import data from './data'
import List from './List'
function App() {
	return (
		<main>
			<section className="container">
				{/* Make change to "0" here */}
				<h3>{data.length} birthdays today</h3>
				{/* pass data to list component */}
				<List people={data} />
			</section>
		</main>
	)
}

export default App

Fișier List.jsx:

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 <p key={item.id}>{item.name}</p>
	})
}

export default List

Laboratorul 4 – Cum se afișează noua interfață de utilizare

1611465966 936 Aflati Reactjs prin construirea de proiecte Creati o aplicatie

Iată un link către acest laborator

De asemenea, puteți găsi fișierele de configurare ale laboratorului pe GitHub aici.

Acum că avem numele persoanelor din datele statice, haideți să îmbunătățim ușor interfața de utilizare. Puteți căuta prin toate CSS din css mai întâi, apoi vom începe pur și simplu să folosim direct clasele CSS.

În această provocare, trebuie doar să vă construiți din ultima provocare și să creați o interfață interioară List componentă.

În acest laborator, trebuie să faceți următoarele lucruri:

  • În interiorul tău List.jsx fișier, iterați peste people propuneți și afișați următoarea structură HTML:
<article class="person">
	<img src="https://www.freecodecamp.org/news/react-practice-project-birthday-reminder-app/<image of user>" alt="<name of user>" />
	<div>
		<h4>NAME_OF_USER</h4>
		<p>AGE_OF_USER years</p>
	</div>
</article>
  • Asigurați-vă că înlocuiți substituenții în mod corespunzător. De asemenea, sunt denumite clasele CSS din React JSX className, doar un memento!

Iată 4 teste pe care trebuie să le treci:

  • Componenta Listă ar trebui să redea eticheta „articol” ca părinte
  • Componenta Listă dvs. trebuie să redea eticheta „img” în eticheta „articol” cu eticheta src și alt corectă
  • Componenta Listă dvs. ar trebui să redea eticheta „div> h4” din eticheta „articol” cu numele persoanei respective
  • Componenta Listă ar trebui să redea eticheta „div> p” din eticheta „articol” cu vârsta persoanei respective

Iată soluția (fișierul List.jsx):

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 (
			<article key={id} className="person">
				<img src={image} alt={name} />
				<div>
					<h4>{name}</h4>
					<p>{age} years</p>
				</div>
			</article>
		)
	})
}

export default List

Laboratorul 5 – Cum să adăugați un buton Ștergeți totul

1611465967 1 Aflati Reactjs prin construirea de proiecte Creati o aplicatie

Iată un link către acest laborator

De asemenea, puteți găsi fișierele de configurare ale laboratorului pe GitHub aici.

În acest laborator final, să adăugăm acum un buton „Șterge” care va șterge înregistrările și îl va reseta la 0 zile de naștere. Butonul este deja disponibil pentru dvs., trebuie doar să vă asigurați că funcționează corect.

În acest laborator, trebuie să faceți următoarele lucruri:

  • Creați o nouă variabilă de stare numită people
  • Valoarea inițială a acestei variabile de stare ar trebui să fie datele importate din partea de sus.
  • Treceți acum această variabilă de stare în List componentă.
  • Cand Clear butonul este apăsat, goliți variabila de stare, astfel încât să nu fie afișată nicio înregistrare (Sugestie: setați-o la o matrice goală)

Și acestea sunt testele pe care trebuie să le treci:

  • Ar trebui să existe un buton „Ștergeți totul” pe ecran (deja făcut pentru dvs.)
  • Inițial, toate înregistrările ar trebui să fie vizibile
  • Când este apăsat butonul „Ștergeți totul”, acesta ar trebui să elimine toate înregistrările de pe ecran

Iată App.jsx fișier soluție pentru acest laborator:

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 (
		<main>
			<section className="container">
				<h3>{people.length} birthdays today</h3>
				<List people={people} />
				<button onClick={clearAllRecords}>Clear All</button>
			</section>
		</main>
	)
}

export default App

Și gata! Felicitări pentru finalizarea unui mic proiect în React. Calea de urmat 🙂

Concluzie

Sper că ți-a plăcut această clasă codedamn. Puteți găsi multe altele în Reacționează maiestria cale de învățare pe codedamn.

Există încă o mulțime de lacune de completat, dar există șanse mari să vă facă să începeți destul de bine dacă sunteți nou.

Asigurați-vă că spuneți-mi cum a fost experiența dvs. Mâner Twitter, deoarece acest lucru mă va ajuta să încadrez următoarele săli de practică.