Začíname s aplikáciou React.js

React.js je a flexibilné a založené na komponentoch JavaScript knižnica pre vytváranie interaktívnych používateľských rozhraní. To bolo vytvorené a otvorené od spoločnosti Facebook a používa ho mnoho popredných technologických spoločností ako Dropbox, AirBnB, PayPal a Netflix. React umožňuje vývojárom vytvárať aplikácie s ťažkými dátami ktoré môžu byť bezbolestne aktualizované opätovné vykresľovanie len potrebných komponentov.

Reagovať je Zobraziť vrstvu z MVC dizajn softvérového dizajnu, a to hlavne sa zameriava na manipuláciu DOM. V týchto dňoch všetci hovoria o reakcii, v tomto príspevku sa pozrieme na to, ako môžete začať s tým.

Inštalácia React

Môžete tiež nainštalovať React s manažérom balíkov npm alebo pridanie potrebných knižníc ručne na svoju HTML stránku. Odporúčame pomocou funkcie React s Babelom to vám umožní použite syntax ECMAScript6 a JSX vo vašom kóde reakcie.

Ak chceš nainštalujte React manuálne, oficiálne dokumenty odporúčajú použite tento súbor HTML. Stránku môžete stiahnuť kliknutím na tlačidlo Súbor> Uložiť stránku ako ... v prehliadači. Skripty, ktoré budete potrebovať (React, React DOM, Babel), sa takisto dostanú do súboru reagujú-example_files / zložky. Potom pridajte nasledujúce značky skriptu do priečinka časti dokumentu HTML:

Namiesto ich načítania môžete pridať skripty React z CDN tiež.

Môžete tiež použiť minimalizované verzie vyššie uvedených súborov JavaScript:

Ak by ste radšej nainštalujte React s npm, najlepšie je použiť Vytvoriť aplikáciu React Github repo vytvorený Facebook Incubator - to je tiež riešenie, ktoré odporúča React docs. Okrem Reactu to tiež obsahuje nástroje Webpack, Babel, Autoprefixer, ESLint a ďalšie nástroje pre vývojárov. Ak chcete začať, použite nasledujúce príkazy CLI:

 npm install -g vytvoriť-reagovať-app vytvoriť-reagovať-app my-app cd my-app npm štart

Keď ste pripravení, môžete prístup k vašej novej aplikácii React na localhost: 3000 URL:

Ak si chcete prečítať viac ako nainštalovať React, pozrite sa na návod na inštaláciu dokumentov.

React a JSX

Hoci to nie je povinné, môžete použite syntax JSX v aplikáciách React. JSX znamená JavaScript XML, a to prenesie do bežného jazyka JavaScript. Veľkou výhodou JSX je to, že umožňuje zahrnúť HTML do súborov JavaScriptu, preto uľahčuje definovanie elementov React.

Tu sú najdôležitejšie informácie o JSX:

Štítky, ktoré začnite malými písmenami (dolná časť ťavy) ako bežné prvky HTML.
Štítky, ktoré začať veľkými písmenami (puzdro hornej ťavy) ako komponenty React.
Každý kód napísané v kučeravých zátvorkách ... sú interpretované ako doslovný JavaScript.

Ak sa chcete dozvedieť viac ako používať JSX s React pozrite sa na túto stránku z dokumentov a pre predvolená dokumentácia JSX môžete sa pozrieť na wiki JSX.

Vytvorte prvky React

React má a architektúru založenú na komponentoch v ktorom vývojári vytvárajú opakovane použiteľné komponenty s cieľom vyriešiť rôzne problémy. Komponent React je zostavený z niektorých alebo mnohých Reakčné prvky to sú najmenších jednotiek aplikácií React.

Nižšie vidíte jednoduchý príklad prvku React , ktorý pridá tlačidlo Kliknite na stránku HTML. V HTML pridáme a

kontajner s "MyDiv" ID, ktoré bude vyplnený prvkom React. Prvok React vytvoríme v rámci a

   Vykresľujeme prvok React s ReactDOM.render () metóda ktorý má dva požadované parametre,  React element () a jeho kontajner (document.getElementById ( 'myDiv')). Môžete si prečítať viac ako reagujú prvky React v “Vytvárajúce prvky” sekcia dokumentov.
 Vytváranie komponentov
 Reaktívne komponenty sú opakovane použiteľné, nezávislé jednotky používateľského rozhrania v ktorom môžete údaje jednoducho aktualizovať. Komponent môže byť vyrobený z jedného alebo viacerých prvkov React. rekvizity sú ľubovoľných vstupov môžete použiť na prenos dát na komponent. Komponent React funguje podobne ako funkcie JavaScriptu - zakaždým, keď sa to vyvolá generuje nejaký druh výstupu.
 Môžete použiť buď syntax klasickej funkcie alebo nový Syntax triedy ES6 na definujte komponent React. V tomto článku použijem druhý, pretože Babel nám umožňuje používať ECMAScript 6. Ak máte záujem o vytvorenie komponentu bez ES6, pozrite sa na stránku Components a Props v dokumentoch.
 Nižšie uvidíte jednoduchá zložka React ako príklad vytvoríme. Je to základné upozornenie, ktoré používateľ vidí po prihlásení na web. K dispozícii sú tri kusy údajov z prípadu na prípad: meno používateľa, počet správ a počet upozornení ako rekvizity.
  
Každá zložka React je trieda JavaScript, ktorá rozširuje React.Component základná trieda. Naša súčasť bude volaná štatistiky pretože poskytuje používateľovi základnú štatistiku. Po prvé, my vytvoriť štatistiky trieda s triedy Stats extends React.Component ... syntax, potom my urobiť to na obrazovke zavolaním ReactDOM.render () metódu (už sme ju použili v predchádzajúcej časti).
  class Stats rozširuje React.Component render () return (  Ahoj this.props.name, máte this.props.notifications nové upozornenia a this.props.messages nové správy. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 Prvý argument spoločnosti ReactDOM.render () metóda pozostáva z názov našej zložky React () a jeho opory (názov, oznámenia, a správy) s ich hodnotami. Keď deklarujeme hodnoty rekvizít, musia byť reťazce v úvodzovkách (Páči sa mi to "John Doe") a číselné hodnoty v kučeravých zátvorkách (Páči sa mi to 3).
 Všimnite si, že kvôli JavaScript sme my použitý className namiesto trieda aby sa atribút triedy odovzdal značke HTML (className = "Zhrnutie").
 Zodpovedajúca stránka HTML je nasledovná:
          
    
 V dokumentoch React existuje mnoho ďalších skvelých príkladov ako vytvoriť a spravovať komponenty React, a čo ešte vedieť o rekvizitách.
 Ďalšie čítanie
 Spoločnosť React predstavila spoločnosť Facebook nový druh rámca do vývoja front-end, ktorý spochybňuje model dizajnu MV *. Ak chcete lepšie porozumieť tomu, ako funguje a čo môžete a nemôžete s ním dosiahnuť, nájdete niekoľko zaujímavých článkov, ktoré vám môžu pomôcť:
 Blog na Facebooku prečo vytvorili React.
 Andrew Ray je skvelý blog post na dobré a zlé React.
 Kodér je zapnutý ako reagujú React a AngularJS.
 FreeCodeCamp si myslíte, že to MVC je na fronte mŕtva.
 HackerNoon článok o ako optimalizovať výkon súvisiaci s reakciou.