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

Tot ce ar trebui sa stii despre React Notiunile de

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:

1611970329 933 Tot ce ar trebui sa stii despre React Notiunile de

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 <script> tag in index.html spirith the 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:

1611970329 69 Tot ce ar trebui sa stii despre React Notiunile de

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>
1611970330 732 Tot ce ar trebui sa stii despre React Notiunile de

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>    );  }}
1611970330 769 Tot ce ar trebui sa stii despre React Notiunile de

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 ojoacă?

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ă.

1611970330 151 Tot ce ar trebui sa stii despre React Notiunile de

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ă:

1611970330 370 Tot ce ar trebui sa stii despre React Notiunile de

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 <audio> 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 <audio> tag and call either Joaca() or pause () 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 <audio> element ca prim argument. Este nevoie de that &lt; audio> element și assigns it to 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 <audio> 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 <script> 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.