Začněte s Reagovat

Knihovny JavaScript které mají na starosti manipulaci s pohledy a způsob, jakým zobrazují informace, stále více obsahují více funkcí, které vývojářům usnadňují vývoj aplikací a jsou příjemnější pro uživatele, kteří je používají.

Mezi těmito knihovnami máme Reagovat, což je knihovna JavaScript open source zaměřeného hlavně na vytváření uživatelských rozhraní pro jednostránkové aplikace nebo jednostránkové aplikace, které používá Facebook a Instagram zvládnout vše, co se týká pohledů, řešit problém velkých aplikací, kde se data zobrazovaná uživateli neustále mění.

Reagovat funkce

Chcete -li vyřešit tento problém, který jsme zmínili Reagovat svou filozofii staví na následujících charakteristikách:

JednoduchýTato charakteristika vyjadřuje, jak by se naše aplikace měla dívat na určitý bod a jakým způsobem to dělá a co dělá Reagovat spočívá v tom, že při zásadních změnách aplikace automaticky zpracovává všechny aktualizace uživatelského rozhraní.
DeklarativníKdyž se informace v naší aplikaci změní Reagovat plní funkci obnovení naší stránky, ale pouze tam, kde se změnily informace.
Konstrukce kombinovatelných komponentKdyž mluvíme o Reagovat, mluvíme hlavně o konstrukci opakovaně použitelných komponent, ve skutečnosti s touto knihovnou děláme většinu času stavění komponent a díky tomu, že jsou zapouzdřené, znemožňují opětovné použití kódu, testů a oddělení funkcí extrémně jednoduchý.

Reakce

Nyní, když víme, z čeho se skládá Reagovat a jeho charakteristik, získáme nejnovější verzi knihovny a provedeme jednoduchou implementaci, abychom ukázali slavný Hello World.

Abychom získali nejnovější verzi, stáhneme si tablet s knihovnou na následujícím odkazu. Po stažení rozbalíme a umístíme obsah do složky s názvem Hello_React a uvnitř vytvoříme soubor s názvem ahoj_react.html který bude obsahovat následující obsah:

Jak vidíme, je to docela jednoduchý kód, který nám umožňuje zahrnout text v našem hlavním pohledu díky zahrnutí reagovat.js. Navíc používáme JSX co je syntax XML v rámci našeho JavaScript a poté proveďte transformaci v prohlížeči, kterou můžeme použít díky implementaci druhé knihovny s názvem JSXTransformer.js

Kromě toho můžeme náš kód učinit čitelnějším a modulárnějším oddělením jeho logiky, můžeme toho dosáhnout vytvořením dvou souborů, za tímto účelem vytvoříme jeden s názvem hello_react.js a vložíme následující kód:

 React.render (, document.getElementById ('example_react'));

Pak v našem HTML to, co děláme, je zahrnout náš soubor .js do značky skriptu a budeme mít stejnou operaci:

Podívejme se tedy, když v prohlížeči spustíme náš příklad:

Jak vidíme, manipulace s daty byla docela jednoduchá, ale existuje lepší způsob implementace Reagovat, protože způsob, jakým to děláme, kód používá transformátor JSX prohlížeče, jak uvidíme ve zprávě, kterou obdržíme prostřednictvím konzoly.

Tato zpráva konzoly nám dává řešení tohoto malého varování a je provést předkompilaci našeho kódu .js, k tomu použijeme správce balíčků Node.js pro tento úkol, takže pokud nemáme toto prostředí nainstalované na našem PC, jdeme na oficiální stránku a stáhneme si ji v případě, že pracujeme ve Windows a v případě, že pracujeme v Linuxu, můžeme postupovat podle kroků v tento návod.

Předkompilace našeho kódu

K provedení tohoto úkolu přejdeme do naší konzoly Node.js a pomocí npm nainstalovali jsme nástroj Reagovat pro příkazovou konzolu s názvem reagovat-nástroje pro které potřebujeme provést pouze tento řádek:

 npm install -g react -tools

Nyní přeložíme náš kód do JavaScript čistý takto:

 jsx -sledujte hello_react.js

Tím se nejen překládá náš kód, ale automaticky se generuje soubor hello_react.js Pokaždé, když je v naší aplikaci provedena změna, podívejme se na odpověď z konzoly, když spustíme tento příkaz:

Nakonec upravíme náš HTML odstranění zahrnutí knihovny JSXTransformer.js protože to nepotřebujeme a zahrnutí našeho skriptu provádíme konvenčním způsobem, podívejme se:

 Dobrý den Reagovat!

Jak jsme zmínili, poslední operace, kterou provádíme prostřednictvím konzoly, automaticky generuje soubor při každé změně v naší aplikaci, takže pokud jsme provedli změny, konzole nás upozorní následovně:

Jak vidíme, máme dvě oznámení, že v souboru byly provedeny změny, což byly ve skutečnosti ty, které jsme provedli s ohledem na odebrání knihovny a konvenční zahrnutí souboru JavaScript.

Tímto jsme zakončili tento tutoriál, ve kterém jsme mohli provést první kroky Reagovat a jeho implementace v našich aplikacích, což nám pomůže s konstrukcí komponent pro vizualizaci dat v našich pohledech a ověří, že je to nejen jednoduché, ale že nám to poskytuje nástroje, které nám výrazně usnadní vývoj.