I den här handledningen tar vi en titt på hur man börjar med att skapa en React-app och försöka förstå grunderna i JSX. Handledningen förutsätter att du har en bra förståelse av HTML och JavaScript.

Vad är React?

React är ett JavaScript-bibliotek som utvecklats av Facebook för att enkelt hantera användargränssnittet för webbapplikationer. En av huvudpunkterna i React är att det hjälper till att skapa hanterbara användargränssnittskomponenter, vilket gör det enklare att skala stora webapplikationer. React fungerar på begreppet Virtual DOM, där det håller en spegelbild av den faktiska DOM. När en förändring uppstår, kör React en skillnadsprocess, identifierar förändringen och uppdaterar den till den faktiska DOM. Konceptet Virtual DOM gör app-rendering snabbare och förbättrar prestanda.

Vad är JSX?

JSX är en JavaScript-syntaxförlängning som liknar XML. Här är ett exempel:

ReactDOM.render ( 
Välkommen React, TutsPlus !!
, document.getElementById ("container"));

JSX-koden ser ut som HTML men är faktiskt en blandning av JavaScript och HTML. Ovanstående kod gör meddelandet inuti h1 tagga i behållare element. JSX är snabbare än JavaScript eftersom det utför optimering samtidigt som källkoden sammanställs. JSX är också att föredra eftersom det är lättare att använda än vanlig JavaScript-kod.

Från de officiella dokumenten:

JSX är en XML-liknande syntaxförlängning till ECMAScript utan någon definierad semantik. Det är inte avsett att genomföras av motorer eller webbläsare. Det är INTE ett förslag att införliva JSX i ECMAScript-specifikationen. Den är avsedd att användas av olika förprocessorer (transpilers) för att omvandla dessa tokens till standard ECMAScript.

Varför använda JSX?

Det är egentligen inte nödvändigt att använda JSX medan du arbetar med React apps. Du kan gå med den vanliga gamla JavaScript-koden. Men att använda JSX har sina egna fördelar:

1. Jämfört med JavaScript är det lättare att skriva JSX. Det är lika enkelt som att öppna och stänga XML-taggar. Här är ett JSX-exempel:

 
Välkommen till TutsPlus
 

Här är den sammanställda React-koden: 

"använd strikt"; React.createElement ("div", null, React.createElement ("p", null, "Welcome to TutsPlus"));

2. JSX-koden garanterar läsbarhet och underlättar underhållet.

3. JSX optimerar koden under kompilering, så den går snabbare jämfört med motsvarande JavaScript-kod.

Komma igång

Låt oss lära oss vidare genom att skriva lite JSX-kod och göra det i webbläsaren. För att komma igång med att skapa en React-app, skapa en enkel index.html sida med följande sidstruktur:

Som framgår av ovanstående kod har vi hänvisat till reagera och reagerar-dom skript i index.html sida. Vi har också använt babel skriptreferens, som skulle förvandla JSX-kod till att reagera funktionssamtal. Tänk på följande JSX-kod:

var grp = 
 
Välkommen till TutsPlus
 
;

Babel skulle omvandla ovanstående JSX-kod till den erforderliga reaktionsfunktionen som visas:

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

Skriva reaktorkomponenter med JSX

Låt oss skapa en React-komponent som skulle visa ett välkomstmeddelande. Så här ser koden ut:

Meddelande är en reaktionskomponent som returnerar ovanstående JSX kod, som sedan kompileras till React function code using Babel. Använder sig av ReactDOM.render, Vi gör komponenten inuti HTML-elementet div huvud. 

Spara ovanstående ändringar och försök att bläddra i index.html sida i webbläsaren, och du ska kunna se meddelandet Välkommen till TutsPlus i webbläsaren.

Passande attribut till komponenter

För det mesta krävs det att vi skickar data till våra komponenter som skulle utvärderas eller modifieras och sedan återges. Låt oss titta på hur vi kan skicka attribut till våra komponenter och visa data.

Antag att vi vill skicka ett namn till vår Meddelande komponent och visa namnet i vårt meddelande. Först lägger vi till ett anpassat attribut till vår komponent.

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

Det godkända attributet kan läsas från insidan av komponentens funktion genom att använda this.props på komponentnyckeln. Ändra koden enligt nedan:

var Message = React.createClass (render: function () return 
Välkommen till TutsPlus, this.props.name
 );

Spara ovanstående ändringar och bläddra i index.html sida och du ska kunna se meddelandet.

Välkommen till TutsPlus, Roy

Skapa en Google Map React-komponent med JSX

Nu när vi är bekanta med JSX och skapar React-komponenter med JSX, låt oss försöka skapa en React-komponent för visning av Google Maps. 

Börja med att lägga till referens till Google Maps API i index.html.

Skapa en MyMap komponent enligt nedan:

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

Lägg till en metod som heter componentDidMount i React-komponenten, och inuti den här metoden definierar de kartrelaterade variablerna som visas:

var MyMap = React.createClass (componentDidMount: function () var latLong = nya google.maps.LatLng (-47.888723, 444.675360); var options = zoom: 2, center: latLong, map = nya google.maps. Kart (ReactDOM.findDOMNode (detta), alternativ), markör = ny google.maps.Marker (karta: karta, animering: google.maps.Animation.BOUNCE, position: latLong);, render: function lämna tillbaka ( 
 ); );

De componentDidMount Metoden åberopas omedelbart efter den ursprungliga återgivningen, och alla kartobjekt initieras inom denna metod. ReactDOM.findDOMNode finner en referens till komponentens DOM-nod och skapar kartobjektet. markör har definierats för att ställa in marköregenskaperna som Karta, placera, och animering.

Prova att göra kartkomponenten inuti #main div.

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

Spara ovanstående ändringar och försök att bläddra i index.html sida, och du borde kunna visa Google Maps i åtgärd.

Wrapping It Up

I denna handledning såg vi en grundläggande introduktion till React och JSX för att komma igång. Vi såg hur man skapar React-komponenter med JSX och skapade också en Google Map React Component. I de kommande handledningarna kommer vi att fokusera på några fler funktioner i React.

Källkoden från denna handledning finns på GitHub.

Har du försökt att skapa en React-komponent nyligen? Jag skulle gärna höra din erfarenhet. Låt mig veta dina tankar i kommentaren nedan.