Prvi koraki z React.js

React.js je prilagodljiv in temelji na komponentah Knjižnica JavaScript za izgradnjo interaktivnih uporabniških vmesnikov. Bilo je ustvarjeno in odprto s strani Facebooka in ga uporabljajo številna vodilna tehnološka podjetja, kot so Dropbox, AirBnB, PayPal in Netflix. React dovoljuje razvijalcem ustvarjanje težkih aplikacij ki jih je mogoče brez bolečin posodobiti ponovni prikaz samo potrebnih komponent.

Reagira se Oglejte si plast iz MVC vzorec oblikovanja programske opreme, in predvsem osredotoča na manipulacijo DOM. Ker te dni vsi govorijo o Reactu, v tem postu si ogledamo, kako lahko začnite z njim.

Namesti React

Lahko namestite tudi React z upraviteljem paketov npm ali z ročno dodajanje potrebnih knjižnic na svojo stran HTML. Priporočljivo je z uporabo React with Babel ki vam omogoča uporabite sintakso ECMAScript6 in JSX v kodi React.

Če želiš ročno namestite React, uradni dokumenti priporočajo uporabite to datoteko HTML. Stran lahko prenesete s klikom na Datoteka> Shrani stran kot ... v brskalniku. Skripte, ki jih boste potrebovali (React, React DOM, Babel), bodo preneseni tudi v reagiraj-primer_file / mapo. Nato dodajte naslednje oznake skripta v dokumentu HTML:

Namesto, da jih prenesete, lahko dodate skripte React od CDN prav tako.

Uporabite lahko tudi omejene različice od zgornjih datotek JavaScript:

Če bi raje namestite React z npm, najboljši način je, da uporabite Ustvari aplikacijo React Github repo, ki ga je ustvaril Facebook Incubator - to je tudi rešitev, ki jo priporočajo Reactovi dokumenti. Poleg Reacta je tudi vsebuje Webpack, Babel, Autoprefixer, ESLint in druga orodja za razvijalce. Za začetek uporabite naslednje ukaze CLI:

 npm install -g create-react-app ustvarite-reagiraj-app moj-app cd moj-app npm začetek

Ko boste pripravljeni, lahko dostop do nove aplikacije za React na localhost: 3000 URL:

Če želite prebrati več o tem kako namestiti React, Oglejte si navodilo za montažo dokumentov.

React in JSX

Čeprav to ni obvezno, lahko uporabite skladnjo JSX v aplikacijah React. JSX pomeni JavaScript XML, in to se pretvori v običajni JavaScript. Velika prednost JSX je v tem omogoča vključitev HTML-ja v datoteke JavaScript, zato je lažje opredeliti elemente React.

Najpomembnejše informacije o JSX:

Označuje to začnite z malimi črkami (primer nižje kamele) kot navadni elementi HTML.
Označuje to začnite z velikimi črkami (zgornji primer kamele) kot React components.
Vsaka koda napisano v zavitih oklepajih … se razlagajo kot dobeseden JavaScript.

Če želite izvedeti več o tem kako uporabljati JSX z React Oglejte si to stran v dokumentih in za privzeto JSX dokumentacijo si lahko ogledate wiki JSX.

Ustvarite elemente React

React ima a arhitektura na osnovi komponent v katerem razvijalci ustvarjajo sestavnih delov za večkratno uporabo za reševanje različnih problemov. Komponenta React je sestavljena iz nekaterih ali več Reagirajte elemente ki so najmanjše enote aplikacij React.

Spodaj lahko vidite preprost primer elementa React ki doda gumb »Klikni me« na stran HTML. V HTML dodamo a

posodo z "myDiv" ID, ki bo posel z elementom React. Ustvarjamo naš element React znotraj a

   Svoj element React prikažemo z ReactDOM.render () metodo ki ima dva zahtevana parametra,  Reagirajoči element () in posodi (document.getElementById ('myDiv')). Več lahko preberete na kako delujejo elementi reaktorja v “Elementi upodabljanja” v dokumentih.
 Ustvarite komponente
 Reagirajte komponente so enote UI za večkratno uporabo v katerem lahko preprosto posodobite podatke. Sestavni del je lahko sestavljen iz enega ali več elementov React. Rekviziti so poljubnih vhodov lahko uporabite za posredovanje podatkov komponenti. Komponenta React deluje podobno kot funkcije JavaScript - vsakič, ko jo pokličete ustvarja nekakšen rezultat.
 Uporabite lahko oba sintaksa klasične funkcije ali novega Sintaksa razreda ES6 do določite komponento React. V tem članku bom uporabil slednje, saj nam Babel omogoča uporabo ECMAScripta 6. Če vas zanima, kako ustvariti komponento brez ES6, si oglejte stran Komponente in rekviziti v dokumentih.
 Spodaj lahko vidite preprosta komponenta React ustvarjali bomo kot primer. To je osnovno obvestilo, ki ga uporabnik vidi po prijavi v spletno mesto. Na voljo bodo trije podatki sprememba od primera do primera: ime uporabnika, število sporočil in število obvestil, ki jih bomo posredovali kot rekviziti.
  
Vsaka komponenta React je razred JavaScript, ki razširja React.Component osnovni razred. Našo komponento bomo poklicali Statistika uporabniku zagotavlja osnovno statistiko. Prvič, mi ustvarite Statistika razred z Razred Stats razširja React.Component … Sintaksa, potem smo prikaže na zaslonu s klicem ReactDOM.render () metoda (slednjo smo že uporabili v prejšnjem razdelku).
  Razred Stats razširja React.Component render () return (  Pozdravljeni this.props.name, imate this.props.notifications nova obvestila in this.props.messages nova sporočila. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 Prvi argument ReactDOM.render () metoda je sestavljena iz ime naše komponente React (), in njegove rekvizite (ime, obvestil, in sporočila) s svojimi vrednotami. Ko deklariramo vrednosti rekvizitov, morajo biti nizi v narekovajih (kot "John Doe") in številske vrednosti znotraj zavitih oklepajih (kot 3).
 Upoštevajte, da zaradi JavaScripta uporablja className namesto razred za prenos atributa razreda v oznako HTML (className = "povzetek").
 Ustrezna stran HTML je naslednja:
          
    
 V dokumentih React obstaja še veliko drugih kul primerov kako zgraditi in upravljati komponente React, in kaj naj vem o rekvizitih.
 nadaljnje branje
 Z React je Facebook predstavil nov okvir v razvoj, ki je v ospredju izziva vzorec MV *. Če želite bolje razumeti, kako deluje in kaj z njim ne morete doseči, je tu nekaj zanimivih člankov, ki vam lahko pomagajo:
 Facebook na blogu zakaj so zgradili React.
 Briljantna objava bloga Andrewa Raya o dobrem in slabem od Reacta.
 Codementor on kako React in AngularJS primerjata.
 FreeCodeCamp razmišlja o tem, ali MVC je mrtev na sprednji strani.
 Članek o HackerNunu kako optimizirati delovanje, povezano z React.