React.jsiga alustamine

React.js on paindlik ja komponendipõhine JavaScripti teek interaktiivsete kasutajaliideste loomine. See oli Facebook on loodud ja avatud ja seda kasutavad paljud juhtivad techettevõtted, nagu Dropbox, AirBnB, PayPal ja Netflix. Reageerib võimaldab arendajatel luua suuri andmeid mida saab ainult vajalikud komponendid.

Reageeri on Vaata kihti MVC tarkvara kavandamise muster, ja see peamiselt keskendub DOMi manipuleerimisele. Kuna nendel päevadel räägivad kõik Reactist, vaatame selles postituses, kuidas saate alustage sellega.

Installige React

Samuti saate installida React paketi haldaja npm või vajalike raamatukogude lisamine käsitsi HTML-lehele. See on soovitatav kasutades reaktsiooni Babeliga mis võimaldab teil kasutage ECMAScript6 süntaksit ja JSX-i oma React-koodis.

Kui sa tahad paigalda Reageerige käsitsi, ametlikud dokumendid soovitavad kasutage seda HTML-faili. Lehe saate alla laadida, klõpsates Fail> Salvesta leht kui ... menüü oma brauseris. Skriptid, mida vajate (React, React DOM, Babel), saadetakse ka alla reageerivad näited_files / kausta. Lisage seejärel järgmised skripti sildid HTML-dokumendi osa:

Nende allalaadimise asemel saate lisada React-skripte CDN-lt samuti.

Võite kasutada ka redigeeritud versioonid ülaltoodud JavaScript-failidest:

Kui soovite seda rohkem installige React koos npm-ga, parim viis on kasutada Looge rakendust React Facebooki inkubaatori loodud Github repo - see on ka lahendus, mida soovitavad React'i dokumendid. Lisaks Reactile on see ka sisaldab veebipaki, Babeli, Autoprefiksi, ESLinti ja teisi arendusvahendeid. Alustamiseks kasutage järgmisi CLI-käske:

 npm install -g luua-reageeriva rakenduse loomise-reageeriva rakenduse cd my-app npm algus

Kui olete valmis, saate juurdepääsu oma uuele rakendusele React kohta localhost: 3000 URL:

Kui soovite rohkem lugeda kuidas paigaldada React, vaadake paigaldusjuhend dokumentidest.

Reageeri ja JSX

Kuigi see pole kohustuslik, saate seda teha kasutage JSXi süntaksit rakendustes React. JSX tähistab JavaScript XML, ja see transpordib tavalisse JavaScript-i. JSXi suur eelis on see, et see on võimaldab teil lisada HTML oma JavaScripti failidesse, seetõttu lihtsustab see reageerivate elementide määratlemist.

Siin on kõige olulisemad asjad, mida tuleb JSXi kohta teada:

Märgistab selle alustage väiketähtedega (alumine kaameli juhtum) tavaliste HTML-elementidena.
Märgistab selle alustage suurtähtedega (ülemine kaameli juhtum) kui React komponendid.
Iga kood kirjutatud lokkis traksidega … tõlgendatakse nagu kirjalik JavaScript.

Kui soovite rohkem teada kuidas kasutada JSXi koos Reactiga vaadake seda lehte dokumentidest ja vaikimisi JSXi dokumendid saate vaadata JSXi wiki.

Loo React elemendid

Reageeri on a komponendipõhine arhitektuur kus arendajad loovad korduvkasutatavad komponendid erinevate probleemide lahendamiseks. Reaktiivkomponent on üles ehitatud mõnest või mitmest Reageeri elemendid need on React rakenduste väikseimad ühikud.

Allpool on näha React elemendi lihtne näide mis lisab HTML-lehele nupu Click me. Lisame HTML-is a

mahuti koos "myDiv" ID, mis on React elemendiga. Loome meie React elemendi a

   Teeme meie React elemendi ReactDOM.render () meetod mis võtab kaks nõutavat parameetrit, the Reageeri element () ja selle mahuti (document.getElementById ('myDiv')). Lisateavet saate kuidas React elemendid toimivad Euroopa “Esituselemendid” dokumentide osa.
 Loo komponendid
 Reageerige komponendid on korduvkasutatavad sõltumatud kasutajaliidese üksused kus saate andmeid hõlpsasti uuendada. Komponent võib olla valmistatud ühest või mitmest reaktiivelemendist. Props on meelevaldsed sisendid saate andmeid komponendile edastada. React komponent töötab sarnaselt JavaScript-funktsioonidele - iga kord, kui seda kasutatakse tekitab teatud väljundi.
 Võite kasutada kas klassikalise funktsiooni süntaks või uus ES6 klassi süntaks kuni defineerige React komponent. Käesolevas artiklis kasutan seda viimast, kuna Babel võimaldab meil kasutada ECMAScript 6-d. Kui olete huvitatud komponendi loomisest ilma ES6-ga, vaadake dokumentide komponente ja lisasid..
 Allpool on näha lihtne React komponent me loome näitena. See on põhiteatis, mida kasutaja näeb pärast saidile sisselogimist. On olemas kolm andmeid muutus juhtumite kaupa: kasutaja nimi, sõnumite arv ja teadete arv kui rekvisiidid.
  
Iga reaktiivkomponent on see JavaScript-klass laiendab React.Component põhiklass. Meie komponenti kutsutakse Statistika kuna see annab kasutajale põhistatistika. Esiteks, me luua Statistika klassi koos klassi statistika laieneb React.Component … süntaks, siis me muuta see ekraanile helistades ReactDOM.render () meetod (me oleme seda juba eelmises osas kasutanud).
  klassi statistika laiendab React.Component render () return (  Tere this.props.name, teil on this.props.notifications uued teated ja this.props.messages uued sõnumid. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 Esimene argument ReactDOM.render () meetod koosneb meie React komponendi nimi () ja selle rekvisiidid (nimi, teated, ja sõnumeid) nende väärtustega. Kui kuulutame rekvisiitide väärtused, peavad olema stringid lisatud jutumärkidesse (nagu "John Doe") ja numbrilised väärtused kõverate sulgudes (nagu 3).
 Pange tähele, et JavaScripti tõttu kasutatud className selle asemel klassi klassi atribuudi edastamiseks HTML-sildile (className = "Summary").
 Sobiv HTML-leht on järgmine:
          
    
 React'i dokumentides on palju muid lahedaid näiteid kuidas ehitada ja hallata React komponente, ja mida veel teada rekvisiitidest.
 Lisalugemist
 Reactiga tutvustas Facebook uut tüüpi raamistik selle esiplaanile väljakutse MV * disainilahendusele. Kui soovid paremini mõista, kuidas see toimib ja mida saate sellega saavutada ning mida te ei suuda saavutada, on siin mõned huvitavad artiklid, mis võivad aidata:
 Facebooki blogi postitus miks nad ehitasid.
 Andrew Ray'i geniaalne blogipost React'i hea ja halva kohta.
 Kodeerija kuidas React ja AngularJS võrrelda.
 FreeCodeCamp arvab, kas MVC on surnud esiosas.
 HackerNooni artikkel kuidas optimeerida reaktsioone.