Početak rada s React.js

React.js je fleksibilna i bazirana na komponentama JavaScript knjižnica za izgradnja interaktivnih korisničkih sučelja. Bilo je stvorio i otvorio Facebook i koriste ga mnoge vodeće tehnološke tvrtke kao što su Dropbox, AirBnB, PayPal i Netflix. React dopušta programerima da stvoriti aplikacije koje su teške za podatke koje možete bezbolno ažurirati ponovno prikazivanje samo potrebnih komponenti.

Reagira se Prikaz sloja iz MVC uzorak dizajna softvera, i to uglavnom fokusira se na manipulaciju DOM-om. Kako danas ovih dana svi pričaju o Reactu, u ovom postu ćemo pogledati kako možete započnite s njim.

Instaliraj Reagiraj

Možete instalirati i React s upraviteljem paketa npm ili ručno dodavanje potrebnih knjižnica na svoju HTML stranicu. Preporučuje se koristeći React with Babel to vam omogućuje koristiti sintaksu ECMAScript6 i JSX u svom React kodu.

Ako želiš ručno instalirajte React, službeni dokumenti preporučuju koristite ovu HTML datoteku. Stranicu možete preuzeti klikom na Datoteka> Spremi stranicu kao ... u pregledniku. Skripte koje će vam trebati (React, React DOM, Babel) također će se preuzeti u reagiraju-example_files / mapa. Zatim dodajte sljedeće oznake skripta u odjeljka HTML dokumenta:

Umjesto da ih preuzmete, možete dodati React skripte od CDN također.

Možete koristiti i izmijenjene verzije od gore navedenih JavaScript datoteka:

Ako želite instalirajte React s npm, najbolji način je da koristite Izradite aplikaciju React Github repo koji je stvorio Facebook inkubator - to je ujedno i rješenje koje preporučuju Reactovi dokumenti. Osim Reacta, također sadrži Webpack, Babel, Autoprefixer, ESLint i druge razvojne alate. Za početak koristite sljedeće CLI naredbe:

 npm install -g create-react-app izradi-reagiraj-app moj-app cd moj-app npm početi

Kada budete spremni, možete pristupite svojoj novoj aplikaciji React na localhost: 3000 URL:

Ako želite pročitati više o tome kako instalirati React, provjerite smjernica za ugradnju dokumenata.

Reagirajte i JSX

Iako to nije obvezno, možete koristiti sintaksu JSX u aplikaciji React. JSX označava JavaScript XML, i to prelazi u običan JavaScript. Velika prednost JSX-a je u tome omogućuje uključivanje HTML-a u JavaScript datoteke, stoga olakšava definiranje React elemenata.

Ovo su najvažnije stvari o JSX-u:

Označava to početi s malim slovima (donji slučaj deve) kao uobičajeni HTML elementi.
Označava to početi s velikim slovima (gornji slučaj kamele) kao React components.
Bilo koji kôd napisano unutar vitičastih zagrada … tumače kao književni JavaScript.

Ako želite znati više o tome kako koristiti JSX s React pogledajte ovu stranicu u dokumentima i za zadana JSX dokumentacija možete pogledati JSX wiki.

Stvorite elemente React

React ima arhitektura temeljena na komponentama u kojem programeri stvaraju komponente koje se mogu ponovno koristiti kako bi se riješili različiti problemi. Komponenta React je izgrađena od nekih ili mnogih Reagirajući elementi koji su najmanjih jedinica aplikacije React.

Ispod možete vidjeti jednostavan primjer elementa React koja dodaje gumb Kliknite na HTML stranicu. U HTML-u dodamo a

spremnik s "MyDiv" ID koji će biti popunjen elementom React. Kreiramo naš React element unutar

   Izražavamo naš element React sa ReactDOM.render () način koji uzima dva potrebna parametra,  Reagirajući element () i njegov kontejner (document.getElementById ( 'myDiv')). Više o tome možete pročitati kako djeluju elementi reaktora u “Elementi prikazivanja” odjeljku dokumenata.
 Stvorite komponente
 Reagirajte komponente su višestruke, neovisne UI jedinice u kojem možete jednostavno ažurirati podatke. Komponenta može biti izrađena od jednog ili više React elemenata. Rekviziti su proizvoljni ulazi možete koristiti za prijenos podataka komponenti. Komponenta React radi slično funkcijama JavaScripta - svaki put kad se ona pozove generira neku vrstu outputa.
 Možete koristiti oba sintaksa klasične funkcije ili novo ES6 sintaksa klase do definirajte komponentu React. U ovom članku koristit ću potonje, jer nam Babel dopušta korištenje ECMAScripta 6. Ako vas zanima kako stvoriti komponentu bez ES6, pogledajte stranicu Komponente i rekviziti u dokumentima.
 Dolje možete vidjeti jednostavna komponenta React stvorit ćemo kao primjer. To je osnovna obavijest koju korisnik vidi nakon prijave na web-lokaciju. Postoje tri dijela podataka koji će to učiniti promijeniti od slučaja do slučaja: ime korisnika, broj poruka i broj obavijesti, mi ćemo ih proslijediti kao rekviziti.
  
Svaka komponenta React je JavaScript klasa koja proteže se React.Component osnovna klasa. Naša komponenta će biti pozvana Statistike jer korisniku pruža osnovnu statistiku. Prvo, mi stvorite Statistike klasa s klasa Stats proširuje React.Component … sintaksa, onda mi prikazati na zaslonu pozivom na ReactDOM.render () metoda (ovo smo već koristili u prethodnom odjeljku).
  klasa Statistika proširuje React.Component render () return (  Pozdrav this.props.name, imaš this.props.notifications nove obavijesti i this.props.messages nove poruke. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 Prvi argument ReactDOM.render () Metoda se sastoji od naziv naše komponente React (), i njegove rekvizite (Ime, obavijesti, i poruke) s njihovim vrijednostima. Kada deklariramo vrijednosti rekvizita, trebamo biti nizovi u navodnicima (Kao "John Doe") i brojčane vrijednosti u zagradama (Kao 3).
 Imajte na umu da zbog JavaScripta mi koristi className umjesto klasa kako bi proslijedili atribut klase HTML oznaci (className = "sažetak").
 Odgovarajuća HTML stranica je sljedeća:
          
    
 U dokumentima React postoji mnogo drugih sjajnih primjera kako izgraditi i upravljati React komponentama, i što drugo znati o rekvizitima.
 Daljnje čitanje
 S Reactom, Facebook je predstavio nova vrsta okvira u razvoj front-end-a izazove MV * dizajn uzorak. Ako želite bolje razumjeti kako funkcionira i što s njim možete i ne možete postići, evo nekoliko zanimljivih članaka koji vam mogu pomoći:
 Facebook na blogu zašto su izgradili React.
 Sjajni blog na Andrewu Rayu na dobro i loše od Reacta.
 Codementor on kako usporediti React i AngularJS.
 FreeCodeCamp razmišlja o tome hoće li MVC je mrtav na prednjoj strani.
 Članak na HackerNunu kako optimizirati izvedbu povezanu s reakcijom.