React.js n käytön aloittaminen

React.js on joustava ja komponenttipohjainen JavaScript-kirjasto interaktiivisten käyttöliittymien rakentaminen. Se oli luotu ja avoin lähde ja sitä käyttävät monet johtavat teknologiayritykset, kuten Dropbox, AirBnB, PayPal ja Netflix. React avulla kehittäjät voivat luoda suuria sovelluksia jonka voi päivittää vain tarvittavat komponentit.

Reagoi on Näytä kerros MVC ohjelmiston suunnittelumalli, ja se pääasiassa keskittyy DOM-manipulointiin. Kuten näinä päivinä kaikki puhuvat Reactista, tässä postissa tarkastelemme, miten voit aloita se.

Asenna React

Voit myös asentaa Reactin npm-paketinhallinnan kanssa tai tarvittavien kirjastojen lisääminen manuaalisesti HTML-sivulle. Se on suositeltavaa käyttäen reagoida Babelin kanssa jonka avulla voit käytä ECMAScript6-syntaksi ja JSX React-koodissasi.

Jos haluat asenna Reagoi manuaalisesti, viralliset asiakirjat suosittelevat käytä tätä HTML-tiedostoa. Voit ladata sivun napsauttamalla Tiedosto> Tallenna sivu nimellä ... valikosta selaimessasi. Tarvitset myös komentosarjat, joita tarvitset (React, React DOM, Babel) reagoida-example_files / kansio. Lisää sitten seuraavat komentosarjatunnisteet HTML-asiakirjan osio:

Niiden lataamisen sijasta voit lisätä React-skriptit CDN: ltä yhtä hyvin.

Voit myös käyttää minimoidut versiot yllämainituista JavaScript-tiedostoista:

Jos haluat mieluummin asenna React ja npm, paras tapa on käyttää Luo React App Facebookin inkubaattorin Github repo - tämä on myös ratkaisu, jota React-asiakirjat suosittelevat. Reactin lisäksi se myös sisältää Webpack, Babel, Autoprefixer, ESLint ja muut kehitystyökalut. Voit aloittaa seuraavat CLI-komennot:

 npm install -g luo -reagoi-sovelluksen luo-reagoi-sovelluksen sovellus cd-sovelluksen npm-käynnistys

Kun olet valmis, voit avaa uusi React-sovelluksesi on localhost: 3000 URL:

Jos haluat lukea lisää miten asentaa React, tutustu asennusohje asiakirjoja.

React ja JSX

Vaikka se ei ole pakollista, voit käytä JSX-syntaksia React-sovelluksissa. JSX tarkoittaa JavaScript XML, ja se siirtyy tavalliseen JavaScriptiin. JSX: n suuri etu on se voit lisätä HTML-koodin JavaScript-tiedostoihisi, siksi se helpottaa React-elementtien määrittelyä.

Tässä on tärkeimmät JSX: stä tietää:

Tunnistaa sen aloita pienillä kirjaimilla (alempi kamelin kotelo) HTML-elementteinä.
Tunnistaa sen aloita isoilla kirjaimilla (ylempi kamelin tapaus) React-komponentteina.
Mikä tahansa koodi kirjoitettu curly-suljissa … tulkitaan kirjaimellinen JavaScript.

Jos haluat tietää enemmän miten JSX: ää käytetään Reactilla tutustu tähän sivuun asiakirjoista ja oletusarvoiset JSX-asiakirjat voit katsoa JSX-wikiä.

Luo React-elementit

React on a komponenttipohjainen arkkitehtuuri jossa kehittäjät luovat uudelleenkäytettäviä komponentteja ongelmien ratkaisemiseksi. React-komponentti muodostuu joistakin tai monista Reagoi elementtejä jotka ovat React-sovellusten pienimmät yksiköt.

Alla näet yksinkertainen esimerkki React-elementistä joka lisää napsauttamalla-painiketta HTML-sivulle. HTML: ssä lisätään a

säiliö "MyDiv" ID, joka tulee olemaan React-elementillä. Luomme React-elementin a

   Teemme React-elementtimme ReactDOM.render () menetelmä joka ottaa kaksi vaadittavaa parametria,  Reagoi elementti () ja sen säiliöön (document.getElementById ( 'myDiv')). Voit lukea lisää miten React elementit toimivat vuonna “Renderointielementit” osio asiakirjoista.
 Luo komponentteja
 Reagoi komponentit olemme uudelleenkäytettäviä, itsenäisiä käyttöliittymiä jossa voit helposti päivittää tiedot. Komponentti voidaan valmistaa yhdestä tai useammasta React-elementistä. Rekvisiitta olemme mielivaltaiset tulot voit siirtää tietoja komponenttiin. React-komponentti toimii samoin kuin JavaScript-toiminnot - aina, kun sitä käytetään tuottaa jonkinlaisen tuotoksen.
 Voit käyttää joko klassinen funktion syntaksi tai uusi ES6-luokan syntaksi että määritellä React-komponentti. Tässä artikkelissa käytän viimeksi mainittua, koska Babel antaa meille mahdollisuuden käyttää ECMAScript 6. Jos olet kiinnostunut siitä, miten luodaan komponentti ilman ES6: a, tutustu asiakirjojen Components and Props -sivulle.
 Alla näet yksinkertainen React-komponentti aiomme luoda esimerkkinä. Se on perusilmoitus, jonka käyttäjä näkee sisäänkirjautumisen jälkeen. Tällöin on kolme tietoa muutos tapauskohtaisesti: käyttäjän nimi, viestien lukumäärä ja ilmoitusten lukumäärä rekvisiitta.
  
Jokainen React-komponentti on JavaScript-luokka laajentaa React.Component perusluokka. Osaamme kutsutaan tilastot koska se tarjoaa käyttäjälle perustilastot. Ensin me luo tilastot luokka kanssa luokka-tilastot ulottuvat React.Component … syntaksi, sitten me tee se näytölle soittamalla ReactDOM.render () menetelmä (olemme käyttäneet jälkimmäistä edellisessä osassa).
  luokan tilastot ulottuvat React.Component render () return (  Hei this.props.name, sinulla on this.props.notifications uusia ilmoituksia ja this.props.messages uusia viestejä. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 Ensimmäinen väite ReactDOM.render () menetelmä koostuu React-komponentin nimi () ja sen rekvisiitta (nimi, ilmoitukset, ja viestien) niiden arvojen kanssa. Kun julistamme rekvisiitta-arvot, jouset ovat lainausmerkeissä (Kuten "John Doe") ja numeeriset arvot sisäpuolella sulkeissa (Kuten 3).
 Huomaa, että JavaScriptin vuoksi me käytetty luokan nimi sijasta luokka jotta voit siirtää luokan attribuutin HTML-tunnisteeseen (classname = "yhteenveto").
 Vastaava HTML-sivu on seuraava:
          
    
 React-asiakirjoissa on monia muita viileitä esimerkkejä miten rakentaa ja hallita React-komponentteja, ja mitä muuta tietää rekvisiitta.
 Lue lisää
 Kun React, Facebook otettiin käyttöön uudenlaista kehystä etupään kehitykseen haastaa MV * -mallin. Jos haluat ymmärtää paremmin, miten se toimii ja mitä voit ja ei voi saavuttaa sen kanssa, tässä on joitakin mielenkiintoisia artikkeleita, jotka voivat auttaa:
 Facebookin blogiviesti miksi he rakensivat React.
 Andrew Rayn loistava blogiviesti Reactin hyvää ja pahaa.
 Codementor on miten React ja AngularJS vertaavat.
 FreeCodeCampin ajatus siitä, onko MVC on kuollut etupäässä.
 HackerNoonin artikkeli miten optimoida reagoimaan liittyvä suorituskyky.