Začínáme s React.js

React.js je flexibilní a na bázi komponent Knihovna JavaScript pro budování interaktivních uživatelských rozhraní. to bylo vytvořil a otevřel Facebook a je používán mnoha předními technologickými společnostmi jako Dropbox, AirBnB, PayPal a Netflix. React umožňuje vývojářům vytvářet aplikace náročné na data který může být bezbolestně aktualizován re-renderování pouze nezbytných komponent.

React je Zobrazit vrstvu z MVC návrhový vzor softwaru, a hlavně se zaměřuje na manipulaci s DOM. V těchto dnech všichni mluví o React, v tomto příspěvku se podíváme na to, jak můžete začněte s tím.

Instalovat React

React můžete také nainstalovat se správcem balíčků npm nebo ručně přidávat potřebné knihovny na stránku HTML. Doporučuje se pomocí React with Babel , která vám umožní použít syntaxi ECMAScript6 a JSX v kódu React.

Pokud chceš Instalovat ručně, oficiální dokumenty doporučují použít tento soubor HTML. Stránku můžete stáhnout klepnutím na tlačítko Soubor> Uložit stránku jako… v prohlížeči. Skripty, které budete potřebovat (React, React DOM, Babel) budou také staženy do rea-example_files / složky. Poté přidejte do skriptu následující značky skriptů sekce dokumentu HTML:

Místo jejich stahování můžete přidat skripty React od společnosti CDN také.

Můžete také použít verze výše uvedených souborů JavaScriptu:

Kdybyste radši install Reagovat s npm, nejlepší způsob je použít Vytvořit Reagovat App Github repo vytvořil Facebook inkubátor - to je také řešení, které React docs doporučují. Kromě React to také obsahuje Webpack, Babel, Autoprefixer, ESLint a další vývojářské nástroje. Chcete-li začít, použijte následující příkazy CLI:

 npm install -g vytvořit-reagovat-app vytvořit-reagovat-app my-app cd moje aplikace npm start

Až budete připraveni, můžete přístup k nové aplikaci React na localhost: 3000 Adresa URL:

Pokud si chcete přečíst více o jak nainstalovat React, podívejte se na návod k instalaci dokumentů.

Reagovat a JSX

I když to není povinné, můžete použít syntaxi JSX v aplikaci React. JSX znamená JavaScript XML, a to transpiles do běžného JavaScriptu. Velkou výhodou JSX je, že to je umožňuje zahrnout HTML do vašich souborů JavaScript, proto usnadňuje definování prvků React.

Zde jsou nejdůležitější informace o JSX:

Značky, které začněte malými písmeny (nižší případ velbloudů) jako běžné elementy HTML.
Značky, které začněte velkými písmeny (horní případ velbloudů) React komponenty.
Jakýkoli kód napsané v složených závorkách … jsou interpretovány jako doslovný JavaScript.

Pokud se chcete dozvědět více jak používat JSX s Reactem podívejte se na tuto stránku z dokumentů, a pro výchozí dokumentace JSX můžete se podívat na wiki JSX.

Vytvořit elementy React

React má a architektura založená na komponentách ve kterém vývojáři vytvářejí opakovaně použitelných komponent k řešení různých problémů. Součást React je vytvořena z některých nebo mnoha Reagovat na elementy to jsou nejmenší jednotky aplikace React.

Níže můžete vidět jednoduchý příklad elementu React Přidá tlačítko Click me na stránku HTML. V HTML přidáme a

kontejner s "myDiv" ID, které bude naplněn elementem React. Náš element React vytvoříme v rámci

   Provádíme náš element React s ReactDOM.render () metoda který trvá dva požadované parametry,  Reagovat prvek () a kontejneru (document.getElementById ('myDiv')). Můžete si přečíst více o jak Reagovat prvky fungují v “Vykreslovací prvky” části dokumentace.
 Vytvořit komponenty
 Reakční složky jsou opakovaně použitelných, nezávislých UI jednotek můžete snadno aktualizovat data. Komponentu lze vytvořit z jednoho nebo více prvků React. Rekvizity jsou vstupy můžete použít k předání dat do komponenty. Reagující komponenta funguje podobně jako funkce JavaScriptu - pokaždé, když je vyvolána generuje nějaký druh výstupu.
 Můžete použít buď klasická funkce syntaxe nebo nové Syntaxe třídy ES6 na definovat komponentu React. V tomto článku budu používat druhý, protože Babel nám umožňuje používat ECMAScript 6. Pokud vás zajímá, jak vytvořit komponentu bez ES6, podívejte se na stránku komponenty a rekvizity doku..
 Níže vidíte jednoduchý React komponent vytvoříme jako příklad. Je to základní oznámení, které uživatel vidí po přihlášení k webu. K dispozici budou tři data případ od případu: jméno uživatele, počet zpráv a počet oznámení, které předáme jako rekvizity.
  
Každá složka React je třída JavaScript, která rozšiřuje React.Component základní třída. Naše komponenta bude volána Statistiky poskytuje uživateli základní statistiku. Za prvé, my vytvořit Statistiky třída s třída Stats rozšiřuje React.Component … syntaxi, pak my vykreslit na obrazovce voláním ReactDOM.render () metodu (již jsme ji použili v předchozí sekci).
  třída Stats rozšiřuje React.Component render () return (  Ahoj this.props.name, máte this.props.notifications nová oznámení a this.props.messages nové zprávy. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 První argument ReactDOM.render () metoda sestává z název naší komponenty React (), a jeho rekvizity (název, oznámení, a zpráv) s jejich hodnotami. Když deklarujeme hodnoty rekvizit, mají být řetězce uzavřeny v uvozovkách (jako "John Doe") a číselných hodnot ve složených závorkách (jako 3).
 Všimněte si, že kvůli JavaScriptu, my použitý jméno třídy namísto třída předat atribut třídy tagu HTML (className = "summary").
 Odpovídající stránka HTML je následující:
          
    
 V dokumentech React existuje mnoho dalších skvělých příkladů jak stavět a spravovat Reagovat komponenty, a co jiného vědět o rekvizitách.
 Další čtení
 S Reactem byl zaveden Facebook nový rámec do vývoje front-end zpochybňuje návrhový vzor MV *. Pokud chcete lépe pochopit, jak to funguje a co s ním můžete a nemůžete dosáhnout, zde jsou některé zajímavé články, které vám mohou pomoci:
 Blogový příspěvek uživatele Facebook na proč postavili React.
 Skvělý blogový příspěvek Andrewa Raye o dobrém a špatném Reactovi.
 Codementor jak React a AngularJS porovnat.
 FreeCodeCamp přemýšlí o tom, zda MVC je na frontě mrtvý.
 Článek o HackerNoon jak optimalizovat výkon související s Reactem.