În acest tutorial, vom analiza cum să începeți crearea unei aplicații React și să încercați să înțelegeți elementele de bază ale JSX. Tutorialul presupune că aveți o bună înțelegere a codului HTML și JavaScript.

Ce este Reactul?

React este o bibliotecă JavaScript dezvoltată de Facebook pentru a gestiona ușor interfața cu utilizatorul pentru aplicațiile web. Unul dintre principalele aspecte ale React este că ajută la crearea unor componente UI ușor de gestionat, ceea ce face mai ușoară extinderea aplicațiilor web mari. React lucrează la conceptul de Virtual DOM, unde păstrează o imagine în oglindă a DOM-ului real. Ori de câte ori se produce o schimbare, React execută un proces de difuzare, identifică schimbarea și actualizează-l în DOM-ul real. Conceptul de Virtual DOM facilitează redarea aplicațiilor și îmbunătățește performanța.

Ce este JSX?

JSX este o extensie de sintaxă JavaScript care arată similar cu XML. Iată un exemplu:

ReactDOM.render ( 
Bun venit React, TutsPlus !!
, document.getElementById ("container"));

Codul JSX arată ca HTML, dar este de fapt un amestec de JavaScript și HTML. Codul de mai sus face mesajul în interiorul lui h1 etichetă în recipient element. JSX este mai rapid decât JavaScript, deoarece efectuează optimizarea în timp ce compilarea codului sursă. JSX este, de asemenea, preferat, deoarece este mai ușor de utilizat decât codul simplu JavaScript.

Din documentele oficiale:

JSX este o extensie de sintaxă asemănătoare XML cu ECMAScript fără nici o semantică definită. NU este destinat a fi implementat de motoare sau browsere. Nu este o propunere de a include JSX în spec. ECMAScript în sine. Se intenționează să fie folosit de diverse preprocesoare (transpilers) pentru a transforma aceste jetoane în ECMAScript standard.

De ce folosiți JSX?

Nu este necesar să utilizați JSX în timp ce lucrați cu aplicațiile React. Puteți merge cu codul JavaScript simplu vechi. Dar folosirea JSX are propriile sale avantaje:

1. În comparație cu JavaScript, este mai ușor să scrieți JSX. Este la fel de simplu ca deschiderea și închiderea etichetelor XML. Iată un exemplu JSX:

 
Bine ați venit la TutsPlus
 

Aici este codul React compilat: 

"folosiți stricte"; React.createElement ("div", null, React.createElement ("p", null, "Bine ati venit la TutsPlus"));

2. Codul JSX asigură citirea și ușurează mentenabilitatea.

3. JSX optimizează codul în timp ce compilează, deci rulează mai repede în comparație cu codul JavaScript echivalent.

Noțiuni de bază

Să învățăm mai mult scriind un cod JSX și redat-o în browser. Pentru a începe să creați o aplicație React, creați o listă simplă index.html cu următoarea structură a paginii:

După cum se vede din codul de mai sus, am făcut referire la reacţiona și reacționează-dom scripturi în index.html pagină. Am folosit de asemenea hărmălaie script de referință, care ar transforma codul JSX pentru a reacționa apelurile de funcții. De exemplu, luați în considerare următorul cod JSX:

var grp = 
 
Bine ați venit la TutsPlus
 
;

Babel va transforma codul JSX de mai sus la funcția de reacție necesară, după cum se arată:

var grp = React.createElement ("div", null, React.createElement ("p", null, "Bine ați venit la TutsPlus"));

Scrierea componentelor reactive utilizând JSX

Să creați o componentă React care să afișeze un mesaj de întâmpinare. Iată cum ar arăta codul:

Mesaj este o componentă de reacție care returnează cele de mai sus JSX cod, care este apoi compilat pentru a reactiva codul funcției folosind hărmălaie. Utilizarea ReactDOM.render, facem componenta în interiorul elementului HTML div principal. 

Salvați modificările de mai sus și încercați să răsfoiți index.html în browser și ar trebui să puteți vedea mesajul Bine ați venit la TutsPlus în browser.

Transmiterea atributelor la componente

De cele mai multe ori este necesară transmiterea datelor către componentele noastre, care vor fi evaluate sau modificate și apoi redate. Să aruncăm o privire asupra modului în care putem transmite atribute componentelor noastre și să afișăm datele.

Să presupunem că vrem să ne transmitem un nume Mesaj și afișați numele în mesajul nostru. Mai întâi, vom adăuga un atribut personalizat componentei noastre.

ReactDOM.render (,document.getElementById ( 'main'));

Atributul pass poate fi citit din interiorul funcției rendering component folosind this.props pe cheia componentei. Modificați codul după cum se arată mai jos:

var Mesaj = React.createClass (render: function () retur 
Bine ați venit la TutsPlus, this.props.name
 );

Salvați modificările de mai sus și răsfoiți index.html pagina și ar trebui să puteți vedea mesajul.

Bine ați venit la TutsPlus, Roy

Crearea unei componente Google Map React Utilizând JSX

Acum, că suntem familiarizați cu JSX și creăm componente React folosind JSX, să încercăm să creăm o componentă React pentru a afișa Hărți Google. 

Începeți prin adăugarea de referințe la API-ul Google Maps în index.html.

Creeaza o MyMap componentă după cum se arată mai jos:

var MyMap = React.createClass (render: function () retur ( 
 ); ); ReactDOM.render (,document.getElementById ( 'main'));

Adăugați o metodă numită componentDidMount în componenta React și în interiorul acelei metode se definesc variabilele legate de hartă după cum se arată:

var MyMap = React.createClass (componentDidMount: function () var latLong = nou google.maps.LatLng (-47.888723, 444.675360); var opțiuni = zoom: 2, center: latLong; Harta (ReactDOM.findDOMNode (aceasta), opțiuni), marker = new google.maps.Marker (map: map, animation: google.maps.Animation.BOUNCE, position: latLong întoarcere ( 
 ); );

componentDidMount metoda este invocată imediat după randarea inițială și toate obiectele de hartă sunt inițializate în interiorul acestei metode. ReactDOM.findDOMNode găsește o referință la nodul DOM al componentei și creează obiectul hărții. marcator a fost definită pentru a seta proprietățile markerului ca Hartă, poziţie, și animaţie.

Încercați redarea componentei hărții în interiorul #principal div.

ReactDOM.render (,document.getElementById ( 'main'));

Salvați modificările de mai sus și încercați să răsfoiți index.html și ar trebui să puteți vizualiza Google Maps în acțiune.

Înfășurați-o

În acest tutorial, am văzut o introducere de bază pentru React și JSX pentru a vă începe. Am văzut cum să creăm componente React utilizând JSX și, de asemenea, am creat o componentă Google Map React. În următoarele tutoriale, ne vom concentra pe mai multe caracteristici ale React.

Codul sursă din acest tutorial este disponibil pe GitHub.

Ați încercat să creați recent o componentă React? Mi-ar plăcea să vă aud experiența. Lăsați-mă să vă cunosc gândurile în comentariul de mai jos.