Komma igång med React.js

React.js är en flexibel och komponentbaserad JavaScript-bibliotek för bygga interaktiva användargränssnitt. Det var skapas och öppnas av Facebook och används av många ledande tekniska företag som Dropbox, AirBnB, PayPal och Netflix. Reakt tillåter utvecklare att skapa data tunga appar som kan smärtfritt uppdateras av Återställ endast de nödvändiga komponenterna.

Reagera är Visa lager från MVC mjukvarutesignmönster, och det huvudsakligen fokuserar på DOM-manipulation. Som idag talar alla om React, i det här inlägget tar vi en titt på hur du kan börja med det.

Installera React

Du kan installera React either med npm-pakethanteraren eller genom Lägga till nödvändiga bibliotek manuellt till din HTML-sida. Det rekommenderas använder React with Babel som tillåter dig att använd ECMAScript6-syntaxen och JSX i din React-kod.

Om du vill Installera React manuellt, den officiella doktorn rekommenderar att använd den här HTML-filen. Du kan ladda ner sidan genom att klicka på Fil> Spara sidan som ... menyn i din webbläsare. Skripten du behöver (React, React DOM, Babel) kommer också att hämtas till reagerar-example_files / mapp. Lägg sedan till följande skript taggar i del av ditt HTML-dokument:

Istället för att ladda ner dem kan du lägga till React-skript från CDN också.

Du kan också använda minifierade versioner av ovanstående JavaScript-filer:

Om du hellre vill installera React with npm, Det bästa sättet är att använda Skapa React App Github repo skapad av Facebook Incubator - det här är också den lösning som React docs rekommenderar. Bortsett från React, det också innehåller Webpack, Babel, Autoprefixer, ESLint och andra utvecklingsverktyg. För att komma igång, använd följande CLI-kommandon:

 npm installera -g skapa-reagera-app skapa-reagera-app min-app cd min-app npm starta

När du är redo kan du Öppna din nya React-app på localhost: 3000 URL:

Om du vill läsa mer på hur man installerar React, kolla in installationsriktlinje av dokumenten.

React och JSX

Även om det inte är obligatoriskt, kan du använd JSX-syntaxen i dina React-appar. JSX står för JavaScript XML, och det transpilerar till vanligt JavaScript. Den stora fördelen med JSX är den låter dig inkludera HTML i dina JavaScript-filer, Därför blir det enklare att definiera React-element.

Här är de viktigaste sakerna att veta om JSX:

Tags det Börja med små bokstäver (nedre kamelfall) görs som vanliga HTML-element.
Tags det börja med stor bokstav (övre kamelfall) görs som reaktorkomponenter.
Vilken kod som helst skrivet inom lockiga hängslen ... tolkas som bokstavlig JavaScript.

Om du vill veta mer om hur man använder JSX med React kolla in den här sidan från docs och för standard JSX dokumentation du kan ta en titt på JSX wiki.

Skapa React-element

React har a komponentbaserad arkitektur där utvecklare skapar återanvändbara komponenter för att lösa olika problem. En React-komponent är uppbyggd av vissa eller många Reagera element som är de minsta enheterna av React apps.

Nedan ser du ett enkelt exempel på ett React-element som lägger till en Click me-knapp på en HTML-sida. I HTML lägger vi till en

behållare med "MyDiv" ID som kommer att bli befolkade med React-elementet. Vi skapar vårt React-element inom en

   Vi gör vårt reaktionselement med ReactDOM.render () metod som tar två erforderliga parametrar, de Reaktionselement () och dess behållare (document.getElementById ( 'myDiv')). Du kan läsa mer på hur React-elementen fungerar i “Rendering Elements” del av dokumenten.
 Skapa komponenter
 Reaktorkomponenter är återanvändbara, oberoende enheter där du enkelt kan uppdatera data. En komponent kan göras av ett eller flera React-element. Rekvisita är godtyckliga ingångar Du kan använda för att skicka data till en komponent. En React-komponent fungerar på samma sätt som JavaScript-funktionerna - varje gång det åberopas det genererar någon form av produktion.
 Du kan använda antingen klassisk funktionssyntax eller den nya ES6-klassens syntax till definiera en React-komponent. I den här artikeln använder jag sistnämnden, eftersom Babel tillåter oss att använda ECMAScript 6. Om du är intresserad av hur du skapar en komponent utan ES6, ta en titt på sidan Komponenter och rekvisita i dokumenten.
 Nedan ser du enkel Reaktorkomponent Vi ska skapa som ett exempel. Det är en grundläggande anmälan som användaren ser efter att ha loggat in på en webbplats. Det finns tre bitar av data som kommer att Ändra från fall till fall: Användarens namn, antal meddelanden och antalet anmälningar, vi kommer att vidarebefordra dessa som rekvisita.
  
Varje React-komponent är en JavaScript-klass som sträcker sig React.Component basklass. Vår komponent kommer att kallas stats eftersom det ger användaren en grundläggande statistik. Först Vi skapa stats klass med Klassstatistik utökar React.Component ... syntax, då vi gör det till skärmen genom att ringa ReactDOM.render () metod (vi har redan använt den senare i föregående avsnitt).
  klassstatistik utökar React.Component render () return (  Hej this.props.name, du har this.props.notifications nya meddelanden och this.props.messages nya meddelanden. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 Det första argumentet från ReactDOM.render () Metoden består av namnet på vår React-komponent (), och dess rekvisita (namn, aviseringar, och meddelanden) med sina värden. När vi förklarar värdena hos rekvisita, måste strängar vara bifogad i citattecken (tycka om "John Doe") och numeriska värden inom krökta parenteser (tycka om 3).
 Observera att på grund av JavaScript, vi Begagnade klassnamn istället för klass för att klara en klassattribut till en HTML-tagg (classname = "Sammanfattning").
 Den matchande HTML-sidan är följande:
          
    
 I React docs finns det många andra coola exempel på hur man bygger och hanterar React-komponenter, och vad mer att veta om rekvisita.
 Vidare läsning
 Med React introducerade Facebook en ny typ av ramverk in i front-end utveckling som utmanar MV * designmönstret. Om du vill förstå bättre hur det fungerar och vad du kan och inte kan uppnå med det, här är några intressanta artiklar som kan hjälpa till:
 Facebook: s blogginlägg på varför de byggde React.
 Andrew Rays briljanta blogginlägg på det goda och det dåliga med React.
 Codementor på hur React och AngularJS jämför.
 FreeCodeCamps tänkande om huruvida MVC är död på framsidan.
 HackerNons artikel om hur man optimerar React-relaterad prestanda.