5 praktických příkladů pro osvojení rámce React

Pravděpodobně jste slyšeli o populárním frameworku JavaScript od Facebooku – React. Používá jej mnoho populárních webových stránek, včetně samotného Facebooku a Instagramu. V tomto článku najdete 5 praktických příkladů, které byly vytvořeny pomocí Reactu a které vám poskytnou náskok s frameworkem.

Co je na React zvláštní?

React je postaven na konceptu komponent. To je na rozdíl od rámců jako Angular a Ember, které používají obousměrné datové vazby k aktualizaci HTML stránky. Podle mého názoru se React učí snadněji než Angular a Ember - je mnohem menší a dobře si hraje s jQuery a dalšími frameworky. Je také extrémně rychlý, protože používá virtuální DOM a synchronizuje pouze změněné části s podkladovou stránkou (přístup k DOM je stále nejpomalejší částí moderní webové aplikace, a proto framework získává zvýšení výkonu díky jeho optimalizaci. ).

Odvrácenou stranou však je, že k dosažení stejných věcí, které lze snadno provést pomocí datové vazby, je v Reactu potřeba trochu více kódu, jak můžete vidět z příkladů níže. Pro srovnání si přečtěte náš článek o Angular.

Jak jej používat?

Chcete-li používat React, musíte na svou stránku zahrnout jeden soubor JavaScript. Facebook laskavě poskytuje CDN, na kterou můžete přímo odkazovat:

<script src="http://fb.me/react-0.10.0.min.js"></script>

Získáte tak přístup ke globálnímu React objekt, který obsahuje řadu užitečných metod, z nichž některé můžete vidět v těchto příkladech. Doporučený způsob psaní webových aplikací React je pomocí jazyka zvaného JSX . Toto je mírně vylepšená verze JavaScriptu, která vám umožňuje inicializovat komponenty React pomocí syntaxe podobné HTML přímo ve vašem kódu. Před interpretací prohlížečem je zkompilován do JavaScriptu. JSX je zcela volitelné – pokud chcete, můžete použít běžný JavaScript.

Ale dost řečí, pojďme se podívat na nějaký kód!

1. Časovač

Jak jsem již zmínil, stavebními kameny aplikací pro reakce jsou komponenty. Vytvářejí se voláním React.createClass() s předmětem možností a metod. Každá komponenta má stav (objekt s daty) a každá má na starosti své vlastní vykreslování - render() metoda je volána vždy, když se stav změní. Zde je příklad vytvoření jednoduchého časovače:

(Kliknutím na odkaz Výsledek zobrazíte příklad v akci)

Při vytváření komponenty můžete do složených závorek {} vložit jakýkoli výraz JavaScript. V tomto příkladu předáme počáteční datum, které bude použito v každém volání funkce tick() k výpočtu uplynulých sekund.

2. Navigační nabídka

Podívejme se, jak můžeme zpracovat události kliknutí v React vytvořením navigační nabídky:

Z kódu těchto příkladů jste si pravděpodobně všimli, že používáme atributy jako className které v HTML ve skutečnosti neexistují. Je to proto, že když vrátíte nový prvek

, nevrátíte HTML, ale instanci komponenty React.DOM.p . Více si o tom můžete přečíst zde.

3. Vyhledávání v reálném čase

Znovu a znovu jsme se naučili, že lidé neradi čekají. Zde je návod, jak můžete použít React k vytvoření prostředí pro vyhledávání v reálném čase. (Pro srovnání se podívejte na naši verzi s AngularJS).

Tento příklad také demonstruje další důležitý koncept v Reactu – aktualizace stavu vašeho kontroleru by měly ovlivnit HTML, nikoli naopak. V tomto případě, jakmile nastavíte hodnotu textového pole, zůstane stejné a bude ignorovat stisknutí kláves uživatele, pokud jej neaktualizujete v onChange funkce (toto chování můžete změnit, ale je to doporučený způsob provádění věcí).

4. Objednávkový formulář

Skutečná síla Reactu přichází, když kombinujete více komponent. To vám umožní lépe strukturovat váš kód a zavést oddělení zájmů. Díky tomu bude váš kód znovu použitelný v různých částech vaší webové aplikace. Zde je příklad objednávkového formuláře, který klientům pomáhá plánovat jejich rozpočty (viz verze Angular zde):

První problém, který vyvstává při kombinaci více komponent, je způsob, jak je přimět komunikovat. Jedním ze způsobů je předat data, která potřebujete, v atributech při jejich inicializaci. Toto funguje pouze z nadřazených na podřízené komponenty. Pro komunikaci v opačném směru můžete předat jednu z metod nadřazené komponenty jako atribut podřízenému. Dítě pak může zavolat tuto metodu a upozornit rodiče na události. Více si o tom můžete přečíst zde.

5. Obrázková aplikace s AJAX

Tento příklad ukáže, jak můžete kombinovat reakci s jQuery a jak načítat výsledky přes AJAX. Zatímco frameworky jako Angular mají při práci s AJAXem své vlastní přístupy, React vám umožňuje používat jakékoli jiné knihovny, které vám vyhovují (viz verze Angular zde).

Všimněte si, že náš příklad používá stejnou komponentu Obrázek při vykreslování seznamu obrázků a seznamu oblíbených. Toto opětovné použití je jednou z výhod uspořádání kódu do komponent.

Otestujte si, co jste se naučili

Co je React?

Kdo vytvořil React?

K čemu se React používá?

Co je na React zvláštní?

Co je to za jazyk?

Co tato komponenta dělá?

Co tento kód dělá?

Co tento kód dělá?

Skvělá práce!

.

Nyní nechte své přátele žárlit:

Odpovědět

12 z 22

Kam dál?

React vám umožňuje dát vaší aplikaci čistou strukturu a podporovat opětovné použití kódu. A díky svému výkonnému virtuálnímu domku může framework urychlit složitá rozhraní. React je vhodný pro vykreslování na straně serveru i na straně klienta a umožňuje vytvářet izomorfní aplikace, které plynule přecházejí mezi klientem a serverem.

Ale o reakci je stále co učit. Navrhuji, abyste začali zde:

  • Reagovat na domovskou stránku.
  • Úvodní sada a příručka Začínáme.
  • Podrobný výukový program krok za krokem.
  • Reagovat doplňky.
  • Značka přetečení zásobníku.

No