React (cunoscut și sub numele de React.js) este una dintre cele mai populare biblioteci de dezvoltare front-end JavaScript. Iată o colecție de sintaxă și utilizare React pe care le puteți folosi ca ghid sau referință la îndemână.

Conţinut

0.1 Exemplu de componentă React

1 Exemplu React Fragment
2 Exemplu de reacție JSX

Exemplu de componentă React

Componentele sunt reutilizabile în React.js. Puteți injecta valoare în recuzită așa cum este prezentat mai jos:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Faisal Arkan" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

name="Faisal Arkan" va da valoare în {props.name} din function Welcome(props) și returnarea unei componente care a dat valoare de name="Faisal Arkan". După aceea, React va reda elementul în html.

Alte modalități de declarare a componentelor

Există multe modalități de a declara componente atunci când utilizați React.js. Există două tipuri de componente, Fara stare componente și starea de stat componente.

Starea de stat

Componente de tip clasă

class Cat extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      humor: 'happy'
    }
  }
  render() {
    return(
      <div>
        <h1>{this.props.name}</h1>
        <p>
          {this.props.color}
        </p>
      </div>
    );
  }
}

Componente fără stare

Componente funcționale (funcția săgeată din ES6)

const Cat = props => {
  return (  
    <div>
      <h1>{props.name}</h1>
      <p>{props.color}</p>
    </div>;
  );
};

Componente de returnare implicite

const Cat = props => 
  <div>
    <h1>{props.name}</h1>
    <p>{props.color}</p>
  </div>;

Exemplu React Fragment

Fragmentele sunt o modalitate de a reda mai multe elemente fără a utiliza un element de împachetare. Când încercați să redați elemente fără o etichetă de închidere în JSX, veți vedea mesajul de eroare Adjacent JSX elements must be wrapped in an enclosing tag. Acest lucru se datorează faptului că atunci când JSX transpilează, creează elemente cu numele lor corespunzătoare de etichete și nu știe ce nume de etichetă să utilizeze dacă sunt găsite mai multe elemente.

În trecut, o soluție frecventă la acest lucru a fost utilizarea unui div wrapper pentru a rezolva această problemă. Cu toate acestea, versiunea 16 din React a adus adăugarea de Fragment, ceea ce face ca acest lucru să nu mai fie necesar.

Fragment acționează ca un wrapper fără a adăuga divs inutile la DOM. Îl puteți folosi direct din importul React sau îl puteți deconstrui:

import React from 'react';

class MyComponent extends React.Component {
  render(){
    return (
      <React.Fragment>
        <div>I am an element!</div>
        <button>I am another element</button>
      </React.Fragment>
    );
  }
}

export default MyComponent;

// Deconstructed
import React, { Component, Fragment } from 'react';

class MyComponent extends Component {
  render(){
    return (
      <Fragment>
        <div>I am an element!</div>
        <button>I am another element</button>
      </Fragment>
    );
  }
}

export default MyComponent;

Versiunea 16.2 React a simplificat acest proces în continuare, permițând ca etichetele JSX goale să fie interpretate ca fragmente:

return (
  <>
    <div>I am an element!</div>
    <button>I am another element</button>
  </>
);

Exemplu de reacție JSX

JSX

JSX este prescurtarea pentru JavaScript XML.

JSX este o expresie care folosește instrucțiuni HTML valide în JavaScript. Puteți atribui această expresie unei variabile și o puteți folosi în altă parte. Puteți combina alte expresii JavaScript valide și JSX în cadrul acestor instrucțiuni HTML plasându-le în paranteze ({}). Babel compilează în continuare JSX într-un obiect de tip React.createElement().

Expresii cu o singură linie și cu mai multe linii

Expresia cu o singură linie este ușor de utilizat.

const one = <h1>Hello World!</h1>;

Când trebuie să utilizați mai multe linii într-o singură expresie JSX, scrieți codul într-o singură paranteză.

const two = (
  <ul>
    <li>Once</li>
    <li>Twice</li>
  </ul>
);

Folosind numai etichete HTML

const greet = <h1>Hello World!</h1>;

Combinarea expresiei JavaScript cu etichete HTML

Putem folosi variabile JavaScript în paranteze.

const who = "Quincy Larson";
const greet = <h1>Hello {who}!</h1>;

De asemenea, putem apela alte funcții JavaScript în interiorul parantezelor.

function who() {
  return "World";
}
const greet = <h1>Hello {who()}!</h1>;

Este permisă doar o singură etichetă părinte

O expresie JSX trebuie să aibă o singură etichetă părinte. Putem adăuga mai multe etichete imbricate numai în elementul părinte.

// This is valid.
const tags = (
  <ul>
    <li>Once</li>
    <li>Twice</li>
  </ul>
);

// This is not valid.
const tags = (
  <h1>Hello World!</h1>
  <h3>This is my special list:</h3>
  <ul>
    <li>Once</li>
    <li>Twice</li>
  </ul>
);

Exemplu de stare de reacție

Statul este locul de unde provin datele.

Ar trebui să încercăm întotdeauna să ne facem starea cât mai simplă posibilă și să minimalizăm numărul de componente stabile. Dacă avem, de exemplu, zece componente care au nevoie de date de la stat, ar trebui să creăm o componentă de container care să păstreze starea pentru toate.

Starea este practic ca un obiect global care este disponibil peste tot într-o componentă.

Exemplu de componentă de clasă cu stare:

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
      
    // We declare the state as shown below
    
    this.state = {                           
      x: "This is x from state",    
      y: "This is y from state"
    }
  }
  render() {
    return (
      <div>
        <h1>{this.state.x}</h1>
        <h2>{this.state.y}</h2>
      </div>
    );
  }
}
export default App;

Alt exemplu:

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    
    // We declare the state as shown below
    this.state = {                           
      x: "This is x from state",    
      y: "This is y from state"
    }
  }

  render() {
    let x1 = this.state.x;
    let y1 = this.state.y;

    return (
      <div>
        <h1>{x1}</h1>
        <h2>{y1}</h2>
      </div>
    );
  }
}
export default App;

Actualizarea statului

Puteți modifica datele stocate în starea aplicației dvs. utilizând setState metodă pe componentă.

this.setState({ value: 1 });

Ține minte că setState este asincron, deci ar trebui să aveți grijă când utilizați starea curentă pentru a seta o nouă stare. Un bun exemplu în acest sens ar fi dacă doriți să creșteți o valoare în starea dvs.

Calea gresita

this.setState({ value: this.state.value + 1 });

Acest lucru poate duce la un comportament neașteptat în aplicația dvs. dacă codul de mai sus este apelat de mai multe ori în același ciclu de actualizare. Pentru a evita acest lucru, puteți transmite o funcție de apelare de actualizare către setState în locul unui obiect.

Calea cea buna

this.setState(prevState => ({ value: prevState.value + 1 }));

Actualizarea statului

Puteți modifica datele stocate în starea aplicației dvs. utilizând setState metodă pe componentă.

this.setState({value: 1});

Ține minte că setState poate fi asincron, deci ar trebui să aveți grijă atunci când utilizați starea curentă pentru a seta o nouă stare. Un bun exemplu în acest sens ar fi dacă doriți să creșteți o valoare în starea dvs.

Calea gresita

this.setState({value: this.state.value + 1});

Calea cea buna

this.setState(prevState => ({value: prevState.value + 1}));

Calea mai curată

this.setState(({ value }) => ({ value: value + 1 }));

Când este necesar doar un număr limitat de câmpuri în obiectul de stare, distrugerea obiectului poate fi utilizată pentru cod mai curat.

React State VS Props Exemplu

Când începem să lucrăm cu componentele React, auzim frecvent doi termeni. Sunt state și props. Deci, în acest articol vom explora care sunt acestea și cum diferă acestea.

Stat:

Starea este ceva pe care îl deține o componentă. El aparține acelei componente particulare în care este definită. De exemplu, vârsta unei persoane este o stare a acelei persoane.
Starea este mutabilă. Dar poate fi schimbat numai prin acea componentă care o deține. Deoarece eu doar îmi pot schimba vârsta, nu altcineva.
Puteți schimba o stare folosind this.setState()

Vedeți exemplul de mai jos pentru a vă face o idee despre stare:

Person.js

  import React from 'react';

  class Person extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
        age:0
      this.incrementAge = this.incrementAge.bind(this)
    }

    incrementAge(){
      this.setState({
        age:this.state.age + 1;
      });
    }

    render(){
      return(
        <div>
          <label>My age is: {this.state.age}</label>
          <button onClick={this.incrementAge}>Grow me older !!<button>
        </div>
      );
    }
  }

  export default Person;

În exemplul de mai sus, age este starea de Person componentă.

Recuzită:

Recuzita este similară cu argumentele metodei. Acestea sunt transmise unei componente în care este utilizată acea componentă.
Recuzita este imuabilă. Sunt doar pentru citire.

Vedeți exemplul de mai jos pentru a vă face o idee despre accesorii:

Person.js

  import React from 'react';

  class Person extends React.Component{
    render(){
      return(
        <div>
          <label>I am a {this.props.character} person.</label>
        </div>
      );
    }
  }

  export default Person;

  const person = <Person character = "good"></Person>

În exemplul de mai sus, const person = <Person character = "good"></Person> trecem character = "good" prop Person componentă.

Dă rezultate ca „Sunt o persoană bună”, de fapt sunt.

Mai sunt multe de învățat despre State și Recuzită. Multe lucruri pot fi învățate prin scufundarea efectivă în codificare. Deci, murdărește-ți mâinile prin codificare.

Reacționează Exemplu de componentă de ordin superior

În React, a Componenta de ordin superior (HOC) este o funcție care preia o componentă și returnează o componentă nouă. Programatorii folosesc HOC-uri pentru a realiza reutilizarea logică a componentelor.

Dacă ați folosit Redux’s connect, ați lucrat deja cu componente de ordin superior.

Ideea de bază este:

const EnhancedComponent = enhance(WrappedComponent);

Unde:

enhance este componenta de ordin superior;
WrappedComponent este componenta pe care doriți să o îmbunătățiți; și
EnhancedComponent este noua componentă creată.

Acesta ar putea fi corpul enhance HOC:

function enhance(WrappedComponent) {
  return class extends React.Component {
    render() {
      const extraProp = 'This is an injected prop!';
      return (
        <div className="Wrapper">
          <WrappedComponent
            {...this.props}
            extraProp={extraProp}
          />
        </div>
      );
    }
  }
}

În acest caz, enhance returnează un clasă anonimă care se extinde React.Component. Această nouă componentă face trei lucruri simple:

Redarea WrappedComponent intr-un div element;
Transmiterea propriilor sale recuzite către WrappedComponent; și
Injectarea unui suport suplimentar pentru WrappedComponent.

HOC-urile sunt doar un model care folosește puterea naturii compoziționale a lui React. Acestea adaugă caracteristici unei componente. Există mult mai multe lucruri pe care le puteți face cu ele!

#Cele #mai #bune #exemple #reacție

Cele mai bune exemple de reacție

Exemplu de componentă React

Alte modalități de declarare a componentelor

Starea de stat

Componente de tip clasă

Componente fără stare

Componente funcționale (funcția săgeată din ES6)

Componente de returnare implicite

Exemplu React Fragment

Exemplu de reacție JSX

JSX

Expresii cu o singură linie și cu mai multe linii

Folosind numai etichete HTML

Combinarea expresiei JavaScript cu etichete HTML

Este permisă doar o singură etichetă părinte

Exemplu de stare de reacție

Actualizarea statului

Calea gresita

Calea cea buna

Actualizarea statului

Calea gresita

Calea cea buna

Calea mai curată

React State VS Props Exemplu

Stat:

Person.js

Recuzită:

Person.js

Reacționează Exemplu de componentă de ordin superior

Notificare despre "cookies"