I denne veiledningen vil vi se på hvordan du kommer i gang med å lage en React-app, og prøv å forstå grunnleggende om JSX. Opplæringen tar utgangspunkt i at du har god forståelse av HTML og JavaScript.

Hva er React?

React er et JavaScript-bibliotek utviklet av Facebook for å administrere brukergrensesnittet for webapplikasjoner med letthet. Et av de viktigste høydepunktene i React er at det hjelper med å skape håndterbare brukergrensesnittkomponenter, noe som gjør det lettere å skalere store webapplikasjoner. React fungerer på konseptet Virtual DOM, der det holder et speilbilde av den faktiske DOM. Når en endring oppstår, kjører React en forskjellig prosess, identifiserer endringen, og oppdaterer den til den faktiske DOM. Konseptet med Virtual DOM gjør appgjenoppretting raskere og forbedrer ytelsen.

Hva er JSX?

JSX er en syntaksforlengelse for JavaScript som ligner på XML. Her er et eksempel:

ReactDOM.render ( 
Velkommen React, TutsPlus !!
, document.getElementById ('container'));

JSX kode ser ut som HTML, men er faktisk en blanding av JavaScript og HTML. Ovennevnte kode gjør meldingen inne i h1 tag i container element. JSX er raskere enn JavaScript siden det utfører optimalisering mens du samler kildekoden. JSX er også foretrukket siden det er enklere å bruke enn vanlig JavaScript-kode.

Fra de offisielle dokumentene:

JSX er en XML-lignende syntaksutvidelse til ECMAScript uten noen definert semantikk. Det er IKKE ment å bli implementert av motorer eller nettlesere. Det er IKKE et forslag om å inkorporere JSX i selve ECMAScript-spesifikasjonen. Det er ment å bli brukt av ulike forprosessorer (transpilere) for å transformere disse tokens til standard ECMAScript.

Hvorfor bruke JSX?

Det er egentlig ikke nødvendig å bruke JSX mens du arbeider med React apps. Du kan gå med vanlig gammel JavaScript-kode. Men å bruke JSX har sine egne fordeler:

1. Sammenlignet med JavaScript, er det lettere å skrive JSX. Det er like enkelt som å åpne og lukke XML-koder. Her er et JSX eksempel:

 
Velkommen til TutsPlus
 

Her er den sammensatte React-koden: 

"bruk strenge"; React.createElement ("div", null, React.createElement ("p", null, "Welcome to TutsPlus"));

2. JSX-koden sikrer lesbarhet og gjør vedlikeholdet enklere.

3. JSX optimaliserer koden mens du kompilerer, så den går raskere i forhold til tilsvarende JavaScript-kode.

Starter

La oss lære videre ved å skrive litt JSX-kode og gjøre det i nettleseren. For å komme i gang med å lage en React-app, opprett en enkel index.html side med følgende sidestruktur:

Som vist fra koden ovenfor har vi henvist til reagere og reagere-dom skript i index.html side. Vi har også brukt babel skriptreferanse, som ville forvandle JSX-kode til å reagere funksjonsanrop. For eksempel, vurder følgende JSX-kode:

var grp = 
 
Velkommen til TutsPlus
 
;

Babel ville transformere den ovennevnte JSX-koden til den nødvendige reaksjonsfunksjonen som vist:

var grp = React.createElement ("div", null, React.createElement ("p", null, "Welcome to TutsPlus"));

Skriving av reaktorkomponenter ved hjelp av JSX

La oss lage en React-komponent som vil vise en velkomstmelding. Slik ser koden ut:

Budskap er en reaksjonskomponent som returnerer ovenstående jsx kode, som deretter kompileres til React-funksjonskoden ved hjelp av Babel. Ved hjelp av ReactDOM.render, Vi gjør komponenten inne i HTML-elementet div hoved-. 

Lagre endringene ovenfor og prøv å bla gjennom index.html siden i nettleseren, og du bør kunne se meldingen Velkommen til TutsPlus i nettleseren.

Passerende egenskaper til komponenter

Mesteparten av tiden er det nødvendig å sende data til våre komponenter som ville bli evaluert eller modifisert og deretter gjengitt. La oss se på hvordan vi kan overføre attributter til komponentene våre og vise dataene.

Anta at vi vil sende et navn til vår Budskap komponent og vise navnet i vår melding. Først legger vi til et egendefinert attributt til komponenten vår.

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

Den bestått attributtet kan leses fra innsiden av komponentgjenopprettingsfunksjonen ved hjelp av this.props på komponentnøkkelen. Endre koden som vist nedenfor:

var Message = React.createClass (render: function () return 
Velkommen til TutsPlus, this.props.name
 );

Lagre endringene ovenfor og bla gjennom index.html siden, og du bør kunne se meldingen.

Velkommen til TutsPlus, Roy

Opprette en Google Map React-komponent ved hjelp av JSX

Nå som vi er kjent med JSX og oppretter React-komponenter ved hjelp av JSX, la oss prøve å lage en React-komponent for visning av Google Maps. 

Begynn med å legge til referanse til Google Maps API i index.html.

Lage en tilpasset kart komponent som vist nedenfor:

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

Legg til en metode som kalles componentDidMount i React-komponenten, og innenfor den metoden definerer kartrelaterte variabler som vist:

var MyMap = React.createClass (componentDidMount: funksjon () var latLong = nytt google.maps.LatLng (-47.888723, 444.675360); var options = zoom: 2, senter: latLong, map = nye google.maps. Kart (ReactDOM.findDOMNode (dette), valgmuligheter), markør = nytt google.maps.Marker (map: kart, animasjon: google.maps.Animation.BOUNCE, posisjon: latLong);, gjengi: funksjon komme tilbake ( 
 ); );

De componentDidMount Metoden påberopes umiddelbart etter den første rendering, og alle kartobjekter blir initialisert inne i denne metoden. ReactDOM.findDOMNode finner en referanse til komponentens DOM-node og lager kartobjektet. markør har blitt definert for å angi markøregenskapene som kart, stilling, og animasjon.

Prøv å gjengi kartkomponenten inne i #hoved div.

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

Lagre endringene ovenfor og prøv å bla gjennom index.html siden, og du bør kunne se Google Maps i aksjon.

Pakke det opp

I denne opplæringen så vi en grunnleggende introduksjon til React and JSX for å komme i gang. Vi så hvordan du lager React-komponenter ved hjelp av JSX og opprettet også en Google Map React Component. I de neste opplæringen vil vi fokusere på noen flere funksjoner i React.

Kildekoden fra denne opplæringen er tilgjengelig på GitHub.

Har du prøvd å lage en React-komponent nylig? Jeg vil gjerne høre din erfaring. Gi meg beskjed om dine tanker i kommentaren nedenfor.