de Scott Domes
Tot ce ar trebui să știți despre reacționează: elementele de bază de care aveți nevoie pentru a începe să construiți
Ești curios de React și nu ai avut șansa să îl înveți? Sau poate ați încercat tutoriale în trecut, dar v-ați străduit să stăpâniți conceptele de bază? Sau poate ați învățat elementele de bază, dar doriți să vă consolidați cunoștințele? Oricum ar fi, acest articol este pentru dvs.
Vom construi un player de muzică React simplu, bazându-ne pe noile concepte React pe măsură ce mergem.
Iată ce vom acoperi:
- Ce este o componentă React?
- Redarea ReactDOM
- Componente clasă vs funcționale
- JSX
- Stat
- Tratarea evenimentelor
- SetState asincron
- Recuzită
- Ref
Este vorba despre tot ce aveți nevoie pentru a construi și a menține o aplicație React. Dar o vom introduce bucată cu bucată.
Înființat
Iată situația: un mic start-up te-a contactat pentru ajutor. Au creat o pagină pentru ca utilizatorii să încarce muzică și să o vizualizeze într-o culoare strălucitoare. Dar ei au nevoie de tine pentru a face partea grea – AKA pentru a-l face să funcționeze.
Pentru a începe, creați un nou director de proiect și adăugați următoarele trei fișiere.
Asigurați-vă că utilizați o versiune actualizată a Crom cu acest tutorial, altfel animațiile din codul de mai sus nu vor funcționa.
Mulțumită Steven Fabre pentru butonul de redare CSS și Justin Windle pentru cod de vizualizare (puteți vizualiza originalul aici).
Deschide index.html
atât în editorul de cod cât și în browserul dvs. și să începem!
Ce este React?
React este o modalitate de a construi interfețe utilizator. Este preocupat doar de ceea ce vedeți în front-end. React face interfețele utilizatorului foarte ușor de construit tăind fiecare pagină în bucăți. Le numim aceste piese componente.
Iată un exemplu de tăiere a unei pagini în componente:
Fiecare secțiune evidențiată mai sus este considerată o componentă. Dar ce înseamnă acest lucru pentru un dezvoltator?
Ce este o componentă React?
O componentă React este un pic de cod care reprezintă o parte a paginii. Fiecare componentă este o funcție JavaScript care returnează o bucată de cod care reprezintă o bucată dintr-o pagină web.
Pentru a construi o pagină, numim aceste funcții într-o anumită ordine, reunim rezultatul și îl prezentăm utilizatorului.
Să scriem o componentă în interiorul <scri
pt> tag in inde
x.html spirith th
e type of “text/
babel ”:
<script type="text/babel"> function OurFirstComponent() { return ( // Code that represents the UI element goes here ); }</script>
Când apelăm la OurFirstcomponent()
funcție, vom recupera o bucată de pagină.
De asemenea, puteți scrie funcții precum aceasta:
const OurFirstComponent = () => { return ( // Stuff to make this component goes here );}
React folosește un limbaj numit JSX care arată ca HTML, dar funcționează în JavaScript, lucru pe care HTML, de obicei, nu îl face.
Puteți adăuga HTML simplu la această secțiune pentru a face să apară în interfața de utilizare:
<script type="text/babel"> function OurFirstComponent() { return ( <h1>Hello, I am a React Component!</h1> ); }</script>
Când apelăm la OurFirstComponent()
funcție, ne întoarcem un pic de JSX. Putem folosi ceva numit ReactDOM pentru a-l pune pe pagină.
<script type="text/babel"> function OurFirstComponent() { return ( <h1>Hello, I am a React Component!</h1> ); }
const placeWeWantToPutComponent = document.getElementById('hook'); ReactDOM.render(OurFirstComponent(), placeWeWantToPutComponent);</script>
Acum <
h1> tag-ul va fi pus în interiorul elementului cu ID of
cârlig. Ar trebui să arate așa când vă reîmprospătați browserul:
De asemenea, putem scrie componenta noastră în JSX astfel:
ReactDOM.render(<OurFirstComponent />, placeWeWantToPutComponent);
Acesta este standard – invocați componentele dvs. ca și cum ați scrie HTML.
Unirea componentelor
Putem pune componentele React în alte componente.
<script type="text/babel"> function OurFirstComponent() { return ( <h1>I am the child!</h1> ); }
function Container() { return ( <div> <h1>I am the parent!</h1> <OurFirstComponent /> </div> ); }
const placeWeWantToPutComponent = document.getElementById('hook'); ReactDOM.render(<Container />, placeWeWantToPutComponent);</script>
Acesta este modul în care ne construim pagina din bucăți de React – cuibărind componente una în cealaltă.
Componente ale clasei
Până acum, am scris componente ca funcții. Acestea sunt numite componente funcționale.
Dar puteți scrie componente într-un alt mod, ca clase JavaScript. Acestea se numesc componente de clasă.
class Container extends React.Component { render() { return ( <div> <h1>I am the parent!</h1> <OurFirstComponent /> </div> ); }}
const placeWeWantToPutComponent = document.getElementById('hook');ReactDOM.render(<Container />, placeWeWantToPutComponent);
Componentele clasei trebuie să aibă o funcție numită render()
. Funcția de redare returnează JSX-ul componentei. Acestea pot fi utilizate în același mod ca și componentele funcționale, ca aceasta:<AClassComponent
/>.
Ar trebui să utilizați componente funcționale peste componentele clasei, deoarece acestea sunt mai ușor de citit, cu excepția cazului în care aveți nevoie de componentă stat (mai multe despre asta în curând).
JavaScript în JSX
Puteți pune variabile JavaScript în JSX astfel:
class Container extends React.Component { render() { const greeting = 'I am a string!'; return ( <div> <h1>{ greeting }</h1> <OurFirstComponent /> </div> ); }}
Acum, „Sunt un șir!” va fi în interiorul h1
.
De asemenea, puteți face lucruri mai dificile, cum ar fi apelarea unei funcții:
class Container extends React.Component { render() { const addNumbers = (num1, num2) => { return num1 + num2; }; return ( <div> <h1>The sum is: { addNumbers(1, 2) }</h1> <OurFirstComponent /> </div> ); }}
JSX Gotchas
Redenumiți OurFirstComponent()
la PlayButton
. Vrem să returneze următoarele:
<a href="https://www.freecodecamp.org/news/everything-you-need-to-know-about-react-eaedf53238c4/#" title="Play video" class="play" />
Dar există o problemă: class
este un cuvânt cheie în JavaScript, deci nu îl putem folosi. Deci, cum le oferim <
; a> a class o
joacă?
Folosiți o proprietate numită className
in schimb:
<script type="text/babel"> function PlayButton() { return <a href="https://www.freecodecamp.org/news/everything-you-need-to-know-about-react-eaedf53238c4/#" title="Play video" className="play" />; }
class Container extends React.Component { render() { return ( <div> <PlayButton /> </div> ); } }
const placeWeWantToPutComponent = document.getElementById('hook'); ReactDOM.render(<Container />, placeWeWantToPutComponent);</script>
Ce face această componentă?
Componentele clasei pot stoca informații despre situația lor actuală. Această informație se numește state
, care este stocat într-un obiect JavaScript.
În codul de mai jos, avem un obiect care reprezintă starea componentelor noastre. Are o key
de isMusicPlaying
care are o value
de false
. Acest obiect este atribuit this.state
în constructor
metoda, care se numește când se folosește prima dată clasa.
class Container extends React.Component { constructor(props) { super(props); this.state = { isMusicPlaying: false }; } render() { return ( <div> <PlayButton /> </div> ); }}
A constructor
metoda unei componente React trebuie să apeleze întotdeauna super(props)
înainte de orice.
Bine, cu ce ne ocupăm state
? De ce există?
Schimbarea componentei noastre de reacție pe baza stării
Starea este o modalitate de a ne actualiza interfața de utilizare bazată pe evenimente.
În acest tutorial, vom folosi starea pentru a schimba butonul de redare întrerupt la joc pe baza utilizatorului care face clic pe butonul de redare.
Când utilizatorul face clic pe buton, starea se va actualiza, care va actualiza apoi interfața de utilizare.
Iată cum începem. Putem privi starea componentă cu this.state
. În următorul cod, ne uităm la stare și îl folosim pentru a decide ce text să prezentăm utilizatorului.
class Container extends React.Component { constructor(props) { super(props); this.state = { isMusicPlaying: false }; }
render() { const status = this.state.isMusicPlaying ? 'Playing' : 'Not playing'; return ( <div> <h1>{ status }</h1> <PlayButton /> </div> ); }}
În funcția de redare, this
se referă întotdeauna la componenta în care se află.
Dar acest lucru nu este foarte util decât dacă avem o modalitate de a ne schimba this.state.isMusicPlaying
.
Când lucrurile se întâmplă cu componenta noastră
Utilizatorul poate interacționa cu componentele noastre făcând clic pe butonul de redare. Vrem să reacționăm (ha… ha…) la aceste evenimente.
Facem asta prin funcții care se ocupă de evenimente. Le numim acestea gestionari de evenimente.
class Container extends React.Component { constructor(props) { super(props); this.state = { isMusicPlaying: false }; }
handleClick(event) { // Do something about the click };
render() { let status = this.state.isMusicPlaying ? 'Playing :)' : 'Not playing :('; return ( <div> <h1 onClick={this.handleClick.bind(this)}>{ status }</h1> <PlayButton /> </div> ); }}
Când utilizatorul dă clic pe h1
, componenta noastră va face handleClick
funcția rulează. Funcția obține obiectul eveniment ca argument, ceea ce înseamnă că îl poate folosi dacă a vrut.
Noi folosim .bind
metoda pe handleClick
pentru a fi sigur this
se referă la întreaga componentă, mai degrabă decât doar la h1
.
Ce ar trebui să facă această componentă
Când schimbăm starea componentei noastre, aceasta va apela din nou funcția de redare.
Putem schimba starea cu this.setState()
, dacă îi dăm un nou obiect reprezentând noua stare.
Componenta noastră de pe pagină va reprezenta întotdeauna starea sa actuală. React face asta pentru noi.
handleClick() { if (this.state.isMusicPlaying) { this.setState({ isMusicPlaying: false }); } else { this.setState({ isMusicPlaying: true }); } };
Dar făcând clic pe un h1
nu este la fel de bun ca să dai clic pe butonul nostru de redare. Să facem asta să funcționeze.
Vorbind între componente
Componentele dvs. pot vorbi între ele. Hai sa incercam.
Putem spune PlayButton
dacă muzica se redă sau nu folosind ceva numit props
. Accesoriile sunt informații partajate de la o componentă părinte la o componentă copil.
Accesoriile din JSX arată la fel ca proprietățile HTML.
Noi dam PlayButton
o recuzită numită isMusicPlaying
, care este la fel ca isMusicPlaying
în this.state
.
class Container extends React.Component { constructor(props) { super(props); this.state = { isMusicPlaying: false }; }
handleClick() { if (this.state.isMusicPlaying) { this.setState({ isMusicPlaying: false }); } else { this.setState({ isMusicPlaying: true }); } };
render() { return ( <div> <PlayButton isMusicPlaying={this.state.isMusicPlaying} /> </div> ); }}
Când starea de Container
schimbări, PlayButton
prop se va schimba și el PlayButton
funcția va fi apelată din nou. Asta înseamnă că componenta noastră se va actualiza pe ecran.
Interior PlayButton
, putem reacționa la schimbare, pentru că PlayButton
primește recuzita ca argument:
function PlayButton(props) { const className = props.isMusicPlaying ? 'play active' : 'play'; return <a href="https://www.freecodecamp.org/news/everything-you-need-to-know-about-react-eaedf53238c4/#" title="Play video" className={className} />;}
Dacă ne schimbăm starea în this.state = { isMusicPlaying: true };
și reîncărcați pagina, ar trebui să vedeți butonul de pauză:
Evenimente ca recuzită
Accesoriile tale nu trebuie să fie doar informații. Ele pot fi funcții.
function PlayButton(props) { const className = props.isMusicPlaying ? 'play active' : 'play'; return <;a onClick={props.onClick} href="https://www.freecodecamp.org/news/everything-you-need-to-know-about-react-eaedf53238c4/#" title="Play video" className={className} />;}
class Container extends React.Component { constructor(props) { super(props); this.state = { isMusicPlaying: false }; }
handleClick() { if (this.state.isMusicPlaying) { this.setState({ isMusicPlaying: false }); } else { this.setState({ isMusicPlaying: true }); } };
render() { return ( <div> <PlayButton onClick={this.handleClick.bind(this)} isMusicPlaying={this.state.isMusicPlaying} /> </div> ); }}
Acum, când facem clic pe PlayButton
, va schimba starea de Container
, care va schimba props
de PlayButton
, ceea ce va determina actualizarea acestuia pe pagină.
Lucrul rău despre setState
setState
este rău pentru că nu face lucruri imediat. React așteaptă puțin pentru a vedea dacă există mai multe modificări de făcut, apoi schimbă starea.
Asta înseamnă că nu știți cu siguranță care va fi starea dvs. atunci când sunați setState
.
Deci nu ar trebui să faceți acest lucru:
handleClick() { this.setState({ isMusicPlaying: !this.state.isMusicPlaying });};
Dacă vă schimbați starea pe baza stării vechi, trebuie să faceți lucrurile diferit.
Trebuie să dai setState
o funcție, nu un obiect. Această funcție obține starea veche ca argument și returnează un obiect care este starea nouă.
Arată așa:
handleClick() { this.setState(prevState => { return { isMusicPlaying: !prevState.isMusicPlaying }; });};
Este mai dificil, dar este necesar doar atunci când utilizați starea veche pentru a crea starea nouă. Dacă nu, puteți doar să dați setState
un obiect.
Ce sunt ref-urile?
Să facem să se întâmple ceva muzică
Mai întâi, adăugăm un <aud
io> tag:
class Container extends React.Component { constructor(props) { super(props); this.state = { isMusicPlaying: false }; }
handleClick() { this.setState(prevState => { return { isMusicPlaying: !prevState.isMusicPlaying }; }); };
render() { return ( <div> <PlayButton onClick={this.handleClick.bind(this)} isMusicPlaying={this.state.isMusicPlaying} /> <audio id="audio" /> </div> ); }}
Avem nevoie de o modalitate de a obține asta <aud
io> tag and call either
Joaca() or p
ause () pe ea. Am putea să o facem with document.getElementById('audio').
play (), dar există un mod mai bun de reacție.
Îi dăm o recuzită numită ref
, care este apelat cu <aud
io> element ca prim argument. Este nevoie de that &
lt; audio> element și assigns it t
o this.audio.
<audio id="audio" ref={(audioTag) => { this.audio = audioTag }} />
Această funcție va fi numită de fiecare dată Container
redă, ceea ce înseamnă this.audio
va fi mereu actualizat și egal cu <aud
io> tag.
Apoi putem reda și întrerupe muzica:
handleClick() { if (this.state.isMusicPlaying) { this.audio.pause(); } else { this.audio.play(); } this.setState(prevState => { return { isMusicPlaying: !prevState.isMusicPlaying }; });};
Încărcați un fișier muzical (de preferință un fișier mp3) folosind Choose files
butonul și apăsați redare și urmăriți-l!
Mutarea în afara Index.html
După cum ați fi putut ghici, Reactul nostru nu ar trebui să trăiască veșnic în interiorul unui <scri
pt> etichetă.
React necesită multă configurație de construire. Din fericire, instrumente de genul Creați aplicația React ai grijă de toate acestea pentru tine.
Instalați-l pentru a crea propriul proiect React. Urmați scurtul lor tutorial și începeți să editați JavaScript în src
director, aplicând toate cunoștințele React pe care le-ați învățat aici!
Felicitări!
Acum poți face React lucruri.
Apoi, consultați câteva articole pentru mai multe informații. Unul este despre Reacționează cele mai bune practici, cealaltă despre o parte utilă din React numită metode ale ciclului de viață.
Dacă ați aflat ceva din acest articol, vă rugăm să faceți clic pe acele mâini și să le împărtășiți prietenilor.
Poți să mă urmărești și mai departe Mediu și Stare de nervozitate.