Reagovat

Reagovat
Typ bezplatný a open source software , webový rámec , knihovna funkcí a knihovna JavaScript
Autor Jordan Walke _  _
Vývojář Meta Platforms , Jordan Walke [d] , Sebastian Markbåge [d] , Daniil Abramov [d] , Rachel Nabors [d] a Andrew Clark
Zapsáno v JavaScript
Operační systém multiplatformní
První vydání 29. května 2013
Nejnovější verze
Stát Relevantní
Licence licence MIT [2] [3]
webová stránka reactjs.org ​(  anglicky)
ar.reactjs.org ​(  Ar)
ru.reactjs.org ​(  ruština)

React (někdy React.js nebo ReactJS ) je open source JavaScript knihovna [ 4 ] pro vývoj uživatelských rozhraní .

React je vyvíjen a udržován Facebookem , Instagramem a komunitou jednotlivých vývojářů a korporací [5] [6] [7] .

React lze použít k vývoji jednostránkových a mobilních aplikací. Jeho cílem je poskytovat vysokou rychlost vývoje, jednoduchost a škálovatelnost . Jako knihovna pro vývoj uživatelských rozhraní se React často používá s jinými knihovnami, jako je MobX, Redux a GraphQL .

Historie vývoje

React vytvořil Jordan Valke, softwarový inženýr na Facebooku. Byl ovlivněn XHP  , komponentovým HTML frameworkem pro PHP [8] . React byl poprvé použit v news feedu na Facebooku v roce 2011 a později ve feedu na Instagramu v roce 2012 [9] . Zdrojový kód Reactu byl otevřen v květnu 2013 na konferenci JSConf v USA.

React Native byl oznámen na facebookové konferenci „React.js Conf“ v únoru 2015 a zdrojový kód byl zveřejněn v březnu 2015 . Umožňuje vám vyvíjet nativní aplikace pro Android , iOS a UWP pomocí React.

18. dubna 2017 Facebook oznámil React Fiber , přepsanou a optimalizovanou verzi React [10] . React Fiber bude základem pro vývoj všech budoucích funkcí a vylepšení [11] .

Příklad použití

Níže je uveden příklad použití React v HTML s JSX a JavaScriptem.

< div id = "myReactApp" ></ div > < script type = "text/babel" > class Greeter rozšiřuje React . Komponenta { render () { return < h1 > { this . rekvizity . pozdrav } < /h1> } } ReactDOM . render ( < Greeter greeting = "Ahoj světe!" /> , document . getElementById ( 'myReactApp' )); </ skript >

Třída Greeter je komponenta React, která přijímá greeting. Metoda ReactDOM.rendervykreslí instanci třídy (komponenty) Greeterse greetingstejnou vlastností "Hello World"a vloží vykreslenou komponentu do prvku DOM s identifikátorem myReactAppjako vnořeným prvkem.

Při zobrazení ve webovém prohlížeči bude výsledek:

< div id = "myReactApp" > < h1 > Ahoj světe! </ h1 > </ div >

Funkce

Jednosměrný přenos dat

Vlastnosti se předávají z nadřazených komponent na podřízené komponenty. Komponenty přijímají vlastnosti jako sadu neměnných hodnot , takže komponenta nemůže měnit vlastnosti přímo, ale může vyvolat změny prostřednictvím funkcí zpětného volání . Tento mechanismus se nazývá „vlastnosti dolů, události nahoru“.  

Virtuální DOM

React používá virtuální DOM ( virtuální DOM ) .  React vytváří strukturu mezipaměti v paměti , která mu umožňuje vypočítat rozdíl mezi předchozím a současným stavem rozhraní, aby optimálně aktualizoval DOM prohlížeče. Programátor tedy může pracovat se stránkou za předpokladu, že je aktualizována celá, ale knihovna sama rozhoduje o tom, které součásti stránky je třeba aktualizovat.

redux

React se často používá ve spojení s Redux pro správu stavů komponent.

jsx

JavaScript XML (JSX) je rozšíření syntaxe JavaScriptu, které vám umožňuje používat syntaxi podobnou HTML k popisu struktury rozhraní. Komponenty jsou zpravidla psány pomocí JSX, ale je možné použít i prostý JavaScript [12] . JSX připomíná jiný jazyk vytvořený Facebookem pro rozšíření PHP, XHP .

Metody životního cyklu

Metody životního cyklu umožňují vývojáři spouštět kód v různých fázích životního cyklu komponenty. Například:

  • shouldComponentUpdate - umožňuje zabránit překreslení součásti vrácením false, pokud překreslování není potřeba.
  • componentDidMount - volá se po prvním vykreslení komponenty. Často se používá ke spuštění získávání dat ze vzdáleného zdroje prostřednictvím rozhraní API .
  • render - nejdůležitější metoda životního cyklu. Každý komponent musí mít tuto metodu. Obvykle se volá, když se změní data komponenty, aby překreslila data v rozhraní.

Nejen vykreslování HTML v prohlížeči

React se používá k více než pouhému vykreslování HTML v prohlížeči. Například Facebook má dynamické grafy, které se vykreslují ve formátu <canvas>. Netflix a PayPal používají izomorfní stahování k vykreslení identického HTML na serveru a klientovi.

Reagovat Hooks

Háky umožňují používat stav a další funkce Reactu bez psaní tříd [13] .

Vytváření vlastních háčků umožňuje vložit logiku komponent do opakovaně použitelných funkcí. [14] .

Literatura

  • Mardan Azat. Reagovat je rychlé. Webové aplikace na React, JSX, Redux a GraphQL. - Petrohrad. : " Petr ", 2019. - S. 560. - ISBN 978-5-4461-0952-4 .
  • Banks Alex, Porcello Eva. GraphQL: Dotazovací jazyk pro moderní webové aplikace. - Petrohrad. : " Petr ", 2019. - S. 240. - ISBN 978-5-4461-1143-5 .
  • Banks Alex, Porcello Eva. React a Redux: funkční vývoj webu. - Petrohrad. : " Petr ", 2018. - S. 336. - ISBN 978-5-4461-0668-4 .
  • Thomas Mark Tilens. Reagovat v akci. - Petrohrad. : " Petr ", 2019. - S. 368. - ISBN 978-5-4461-0999-9 .
  • Kirupa Chinnatambi. Learning React. - Petrohrad. : " Petr ", 2019. - S. 368. - ISBN 978-5-04-098028-4 .

Poznámky

  1. ↑ 18.2.0 (14. června 2022)
  2. ↑ Reagovat v16.0
  3. ↑ Změnit licenci a odstranit odkazy na PATENTY
  4. ↑ React – JavaScriptová knihovna pro vytváření uživatelských rozhraní. . Reagovat _ Získáno 7. 4. 2018. Archivováno z originálu 19. 7. 2018.
  5. ↑ Krill, Paul React: Vytváření rychlejších a plynulejších uživatelských rozhraní pro webové aplikace založené na datech . InfoWorld (15. května 2014). Staženo 24. 5. 2018. Archivováno z originálu 12. 6. 2018.
  6. ↑ Hemel, Zef Facebook React JavaScript User Interfaces Library dostává smíšené recenze . InfoQ (3. června 2013). Staženo 24. 5. 2018. Archivováno z originálu 12. 6. 2018.
  7. ↑ Dawson, Chrisova historie JavaScriptu a jak to vedlo k ReactJS . The New Stack (25. července 2014). Staženo 24. 5. 2018. Archivováno z originálu 12. 6. 2018.
  8. ↑ React (JS Library): Jak vznikl nápad vyvinout React a kolik lidí na jeho vývoji a implementaci na Facebooku pracovalo? . Quora .
  9. ↑ Pete Hunt na TXJS . Staženo 24. 5. 2018. Archivováno z originálu 31. 7. 2017.
  10. ↑ Frederic Lardinois . Facebook oznamuje React Fiber, přepis svého rámce React , TechCrunch (18. dubna 2017). Archivováno z originálu 14. června 2018. Staženo 24. května 2018.
  11. ↑ React Fiber Architecture . Github . Získáno 19. 4. 2017. Archivováno z originálu 10. 5. 2018.
  12. ↑ Reagovat bez JSX -  Reagovat . reaktjs.org. Získáno 19. července 2018. Archivováno z originálu 19. července 2018.
  13. ↑ Rychlý pohled na háčky - Reagovat . en.reactjs.org. Získáno 5. října 2019. Archivováno z originálu 12. října 2019.
  14. ↑ Vytváření vlastních háčků - React . en.reactjs.org. Získáno 5. října 2019. Archivováno z originálu dne 5. června 2019.