Darba sākšana ar React.js

React.js ir elastīga un uz komponentiem balstīta JavaScript bibliotēka interaktīvu lietotāja interfeisu veidošana. Tas bija izveidots un atvērts no Facebook un to izmanto daudzi vadošie tehnoloģiju uzņēmumi, piemēram, Dropbox, AirBnB, PayPal un Netflix. Reaģēt ļauj izstrādātājiem veidot datu smagās lietotnes ko var nesāpīgi atjaunināt tikai nepieciešamās sastāvdaļas.

Reaģēt ir Skatīt slāni no MVC programmatūras projektēšanas modelis, un tas galvenokārt koncentrējas uz DOM manipulācijām. Tā kā šajās dienās visi runā par React, šajā amatā mēs apskatām, kā jūs varat sākt ar to.

Instalējiet React

Varat arī instalēt React ar paketes npm pārvaldnieku vai nepieciešamo bibliotēku pievienošana manuāli jūsu HTML lapā. Tas ir ieteicams izmantojot reakciju ar Babeli kas ļauj jums izmantojiet ECMAScript6 sintaksi un JSX jūsu React kodā.

Ja Tu gribi instalēt Reaģējiet manuāli, oficiālie dokumenti iesaka izmantot šo HTML failu. Jūs varat lejupielādēt lapu, noklikšķinot uz Fails> Saglabāt lapu kā ... pārlūkprogrammā. Skripti, kas jums būs nepieciešami (React, React DOM, Babel), arī tiks lejupielādēti reaģēt-piemērs_faili / mapi. Pēc tam pievienojiet šādus skriptu tagus HTML dokumenta sadaļa:

Tā vietā, lai tos lejupielādētu, varat pievienot React skriptus no CDN arī.

Varat arī izmantot rediģētas versijas no iepriekš minētajiem JavaScript failiem:

Ja vēlaties instalējiet React ar npm, labākais veids ir izmantot Izveidot reaģēšanas lietotni Facebook inkubatora izveidots Github repo - tas ir arī risinājums, ko iesaka React dokumenti. Papildus React, tas arī satur Webpack, Babel, Autoprefixer, ESLint un citus izstrādātāju rīkus. Lai sāktu darbu, izmantojiet šādas CLI komandas:

 npm instalēt -g izveidot-reakciju-app izveidot-reakcija-app mana app cd my-app npm sākums

Kad esat gatavs, varat piekļūstiet savai jaunajai lietotnei React uz localhost: 3000 URL:

Ja vēlaties lasīt vairāk kā instalēt React, izbraukšana uzstādīšanas vadlīnijas no dokumentiem.

React un JSX

Lai gan tas nav obligāts, jūs varat izmantot JSX sintaksi jūsu React lietotnēs. JSX nozīmē JavaScript XML, un tā pārvietojas parastajā JavaScript. JSX lielā priekšrocība ir tā ļauj JavaScript iekļaut JavaScript failus, tāpēc tas atvieglo reakcijas elementu noteikšanu.

Šeit ir svarīgākās lietas, kas jāzina par JSX:

Atzīmē to sākt ar mazajiem burtiem (apakšējā kamieļa korpuss) kā regulāri HTML elementi.
Atzīmē to sākt ar lielajiem burtiem (augšējā kamieļa korpuss) kā React komponenti.
Jebkurš kods rakstīts cirtaini lencēm … tiek interpretēti kā burtiskā JavaScript.

Ja vēlaties uzzināt vairāk kā lietot JSX ar React pārbaudiet šo lapu no dokumentiem un noklusējuma JSX dokumentācija Jūs varat apskatīt JSX wiki.

Izveidot reaģēšanas elementus

Reaģēt ir a sastāvdaļu arhitektūra kur izstrādātāji izveido atkārtoti izmantojamas sastāvdaļas lai atrisinātu dažādas problēmas. Reakcijas komponents ir izveidots no dažiem vai vairākiem Reaģējiet elementus kas ir mazākās React lietotņu vienības.

Zemāk jūs varat redzēt vienkāršs React elementa piemērs kas HTML lapā pievieno pogu Click me. HTML tiek pievienots

konteiners ar "myDiv" ID, kas būs ar React elementu. Mēs izveidojam savu React elementu a

   Mēs piedāvājam mūsu React elementu ar ReactDOM.render () metodi kas ņem divus nepieciešamos parametrus, the Reaģējiet elementu () un tās konteineru (document.getElementById ('myDiv')). Jūs varat lasīt vairāk kā reaģēt elementi darbojas iekš “Atveidošanas elementi” nodaļu.
 Izveidojiet komponentus
 Reaģējiet uz komponentiem ir atkārtoti izmantojamas, neatkarīgas UI vienības kurā varat viegli atjaunināt datus. Komponentu var izgatavot no viena vai vairākiem React elementiem. Props ir patvaļīgas izejvielas varat izmantot, lai nodotu datus komponentam. React komponents darbojas līdzīgi JavaScript funkcijām - katru reizi, kad tas tiek izmantots rada kādu izeju.
 Jūs varat izmantot vai nu klasiskās funkcijas sintakse vai jaunais ES6 klases sintakse uz definēt reakcijas komponentu. Šajā rakstā es izmantošu pēdējo, jo Babel ļauj mums izmantot ECMAScript 6. Ja jūs interesē, kā izveidot komponentu bez ES6, apskatiet dokumentu dokumentu un sastāvdaļu lapu..
 Zemāk jūs varat redzēt vienkāršs React komponents mēs radīsim piemēru. Tas ir pamata paziņojums, ko lietotājs redz pēc pieteikšanās vietnē. Ir trīs dati, kas būs pārmaiņas: lietotāja vārds, ziņojumu skaits un paziņojumu skaits, mēs tos nodosim kā rekvizīti.
  
Katrs React komponents ir JavaScript klase paplašina Reaģējiet.Komponents bāzes klase. Mūsu komponents tiks izsaukts Statistika tā sniedz lietotājam pamata statistiku. Pirmkārt, mēs izveidot Statistika klasē Ar klases statistika paplašina React.Component … sintakse, tad mēs padarīt to ekrānā zvanot uz ReactDOM.render () metode (mēs to esam izmantojuši iepriekšējā sadaļā).
  klases statistika paplašina React.Component render () return (  Sveiki this.props.name, jums ir this.props.notifications jauni paziņojumi un this.props.messages jaunas ziņas. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 Pirmais arguments ReactDOM.render () metode sastāv no mūsu React komponenta nosaukums (), un tā rekvizīti (nosaukums, paziņojumus, un ziņojumus) ar to vērtībām. Kad mēs pasludinām rekvizītu vērtības, ir jābūt stīgām iekļautas pēdiņās (piemēram, "John Doe") un skaitliskās vērtības iekavās iekavās (piemēram, 3).
 Ņemiet vērā, ka JavaScript dēļ mēs izmanto className tā vietā klasē lai nodotu klases atribūtu HTML tagam (className = "kopsavilkums").
 Atbilstošā HTML lapa ir šāda:
          
    
 React dokumentos ir daudz citu atdzist piemēru kā veidot un pārvaldīt React komponentus, un ko vēl zināt par rekvizītiem.
 Turpmāka lasīšana
 Ar React, Facebook iepazīstināja jauna veida sistēma uz priekšu, lai attīstītu to izaicina MV * dizaina modeli. Ja vēlaties labāk saprast, kā tas darbojas un ko jūs varat un nevarat sasniegt ar to, šeit ir daži interesanti raksti, kas var palīdzēt:
 Facebook emuāra ziņu kāpēc viņi uzcēla React.
 Andrew Ray izcili bloga ziņojumi par React labo un slikto.
 Kodētājs ir kā React un AngularJS salīdzināt.
 FreeCodeCamp domā par to, vai MVC ir miris priekšējā galā.
 HackerNoon rakstā kā optimizēt ar reakciju saistīto veiktspēju.