Acest tutorial vă va oferi o înțelegere de bază despre React prin construirea unui foarte aplicație simplă. Voi lăsa afară Tot ceea ce nu cred că este esențial.

Și apoi, dacă îți stârnește interesul și vrei să afli mai multe, poți să le vezi curs React gratuit pe Scrimba.

Dar, deocamdată, să ne concentrăm asupra elementelor de bază!

Pregatirea

Când începeți cu React, ar trebui să utilizați cea mai simplă configurare posibilă: un fișier HTML care importă fișierul React si ReactDOM biblioteci folosind etichete script.

Se pare că:

<html>
<head>  
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>  
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>  
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>  
</head>  
<body>  
    <div id="root"></div>  
    <script type="text/babel">  
      
    /*   
    ADD REACT CODE HERE 
    */  
      
    </script>  
</body>  
</html>

De asemenea, am importat Babel, deoarece React folosește ceva numit JSX pentru a scrie markup. Va trebui să transformăm JSX în JavaScript simplu, astfel încât browserul să îl poată înțelege.

Vreau să observi două lucruri:

  1. <div> cu id-ul lui #root. Acesta este punctul de intrare pentru aplicația noastră. Aici va trăi întreaga noastră aplicație.
  2. <script type="text/babel"> eticheta în corp. Aici vom scrie codul nostru React.

Dacă doriți să experimentați codul, verificați acest loc de joacă Scrimba.

Componente

Totul din React este o componentă, iar acestea iau de obicei forma unor clase JavaScript. Creați o componentă extinzându-vă asupra React-Component clasă. Să creăm o componentă numită Hello:

class Hello extends React.Component {  
    render() {  
        return <h1>Hello world!</h1>;  
    }  
}

Apoi definiți metodele pentru componentă. În exemplul nostru, avem o singură metodă și se numește render().

Interior render() veți returna o descriere a ceea ce doriți să desene React pe pagină. În cazul de mai sus, dorim pur și simplu să afișeze un h1 etichetați cu textul Salut Lume! inauntru.

Pentru ca aplicația noastră mică să fie redată pe ecran, trebuie să folosim și noi ReactDOM.render():

ReactDOM.render(  
    <Hello />,   
    document.getElementById("root")  
);

Deci, aici ne conectăm Hello componentă cu punctul de intrare pentru aplicație (<div id="root"></div>).

Deci, pur și simplu spunem: Hei, reacționează! Vă rugăm să redați Buna ziua componentă din nodul DOM cu un ID de rădăcină!

Rezultă următoarele:

Aflati React in 5 minute Un tutorial Reactjs pentru

Sintaxa HTML’ish pe care tocmai am analizat-o (<h1> și <Hello/>) este codul JSX pe care l-am menționat mai devreme. De fapt nu este HTML, este mult mai puternic. Deși ceea ce scrieți acolo ajunge să fie etichete HTML în DOM.

Următorul pas este ca aplicația noastră să gestioneze datele.

Manipularea datelor

Există două tipuri de date în React: recuzită și stat. Diferența dintre cele două este cam dificil de înțeles la început, așa că nu vă faceți griji dacă vi se pare puțin confuz. Va deveni mai ușor odată ce vei începe să lucrezi cu ei.

Diferența cheie este că stat este privat și poate fi modificat din interiorul componentei în sine. Recuzită sunt externe și nu sunt controlate de componenta în sine. Este transmis de la componentele de sus din ierarhie, care controlează și datele.

O componentă își poate schimba direct starea internă. Nu își poate schimba recuzita direct.

Să aruncăm o privire mai atentă mai întâi la recuzită.

Recuzită

Al nostru Hello componenta este complet statică. Redă același mesaj indiferent de ce. Cu toate acestea, o mare parte din React este reutilizarea, adică capacitatea de a scrie o componentă o singură dată și apoi de a o reutiliza în diferite cazuri de utilizare. De exemplu pentru a afișa mesaje diferite.

Pentru a realiza acest tip de reutilizare, vom adăuga recuzită. Acesta este modul în care treceți recuzită la o componentă:

ReactDOM.render(  
    <Hello message="my friend" />,   
    document.getElementById("root")  
);

Acest accesoriu se numește message și are valoarea „prietenul meu”. Putem accesa acest prop din interiorul componentei Hello făcând referință this.props.message, asa:

class Hello extends React.Component {  
    render() {  
        return <h1>Hello {this.props.message}!</h1>;  
    }  
}

Ca rezultat, acest lucru este redat pe ecran:

1612107786 325 Aflati React in 5 minute Un tutorial Reactjs pentru

Motivul pentru care scriem {this.props.message} cu aparate dentare curate se datorează faptului că trebuie să spunem JSX că dorim să adăugăm o expresie JavaScript. Aceasta se numește scăpând.

Deci, acum avem o componentă reutilizabilă care poate reda orice mesaj dorim pe pagină. Woo hoo!

Cu toate acestea, dacă vrem ca componenta să își poată schimba propriile date? Atunci trebuie să folosim statul în schimb!

Stat

Cealaltă modalitate de stocare a datelor în React este în starea componentei. Și spre deosebire de recuzită – care nu poate fi modificată direct de componentă – starea poate.

Deci, dacă doriți ca datele din aplicația dvs. să se schimbe – de exemplu, pe baza interacțiunilor utilizatorilor – acestea trebuie stocate în starea unei componente undeva în aplicație.

Stare de inițializare

Pentru a inițializa starea, pur și simplu setați this.state în constructor() metoda clasei. Starea noastră este un obiect care în cazul nostru are o singură cheie numită message.

class Hello extends React.Component {  
      
    constructor(){  
        super();  
        this.state = {  
            message: "my friend (from state)!"  
        };  
    }  
      
    render() {  
        return <h1>Hello {this.state.message}!</h1>;  
    }  
}

Înainte de a stabili starea, trebuie să sunăm super() în constructor. Asta pentru ca this este neinitializat înainte super() a fost chemat.

Schimbarea stării

Pentru a modifica starea, sună pur și simplu this.setState (), trecând în noul obiect de stare ca argument. Vom face acest lucru într-o metodă pe care o vom apela updateMessage.

class Hello extends React.Component {  
      
    constructor(){  
        super();  
        this.state = {  
            message: "my friend (from state)!"  
        };  
        this.updateMessage = this.updateMessage.bind(this);   
   }

   updateMessage() {  
        this.setState({  
            message: "my friend (from changed state)!"  
        });  
    }

    render() {  
        return <h1>Hello {this.state.message}!</h1>;  
    }  
}

Notă: Pentru a face acest lucru, a trebuit să legăm și fișierul this cuvânt cheie la updateMessage metodă. Altfel nu am fi putut accesa this în metodă.

Manipulatori de evenimente

Următorul pas este să creăm un buton pe care să facem clic, astfel încât să putem declanșa updateMessage() metodă.

Deci, să adăugăm un buton la render() metodă:

render() {  
  return (  
     <div>  
       <h1>Hello {this.state.message}!</h1>  
       <button onClick={this.updateMessage}>Click me!</button>  
     </div>     
  )  
}

Aici, conectăm un ascultător de evenimente la buton, ascultând onClick eveniment. Când se declanșează acest lucru, apelăm updateMessage metodă.

Iată întreaga componentă:

class Hello extends React.Component {  
      
    constructor(){  
        super();  
        this.state = {  
            message: "my friend (from state)!"  
        };  
        this.updateMessage = this.updateMessage.bind(this);  
    }

    updateMessage() {  
        this.setState({  
            message: "my friend (from changed state)!"  
        });  
    }

    render() {  
         return (  
           <div>  
             <h1>Hello {this.state.message}!</h1>  
             <button onClick={this.updateMessage}/>Click me!</button>  
           </div>     
        )  
    }  
}

updateMessage apoi apelează this.setState () care schimbă this.state.message valoare. Și când facem clic pe buton, iată cum se va desfășura acest lucru:

Aflati React in 5 minute Un tutorial Reactjs pentru

Felicitări! Acum aveți o înțelegere de bază a celor mai importante concepte din React.

Dacă doriți să aflați mai multe, asigurați-vă că consultați curs React gratuit pe Scrimba.

Mult noroc cu codificarea 🙂


Mulțumesc pentru lectură! Numele meu este Per Borgen, sunt cofondatorul Scrimba – cel mai simplu mod de a învăța să codezi. Ar trebui să verificați bootcamp de design web receptiv dacă doriți să învățați să construiți un site web modern la nivel profesional.

bootcamp banner
Faceți clic aici pentru a ajunge la bootcampul avansat.