A React.js használatának megkezdése

React.js egy rugalmas és összetett alapú JavaScript könyvtár interaktív felhasználói felületek építése. Ez volt létrehozott és nyitott forrásból a Facebook és számos vezető technológiai vállalat, például a Dropbox, az AirBnB, a PayPal és a Netflix használják. A React lehetővé teszi a fejlesztők számára adat-nehéz alkalmazások létrehozása amit fájdalommentesen frissíthet csak a szükséges összetevők újbóli renderelése.

Reagál a Nézd meg a réteget a MVC szoftver tervezési minta, és főleg a DOM manipulációjára összpontosít. Mivel ezekben a napokban mindenki a React-ról beszél, ebben a hozzászólásban megnézzük, hogyan lehet kezdje el vele.

Telepítse a React programot

A React is telepíthető az npm csomagkezelővel vagy a szükséges könyvtárak hozzáadása manuálisan HTML-oldalára. Ajánlott reagál a Babellel amely lehetővé teszi használja az ECMAScript6 szintaxist és a JSX-et a React kódban.

Ha akarod telepítse kézzel, a hivatalos dokumentumok azt javasolják használja ezt a HTML fájlt. Az oldalt az Fájl> Oldal mentése másként… menüben. A szükséges szkriptek (React, React DOM, Babel) szintén letölthetők a reagálnak-example_files / mappát. Ezután adja hozzá a következő szkriptcímkéket a a HTML-dokumentum része:

Ahelyett, hogy letöltené őket, hozzáadhatja a React parancsfájlokat CDN-től is.

Használhatja a módosított változatok a fenti JavaScript fájlok közül:

Ha inkább telepítse a Reakciót npm-rel, a legjobb módja az React App létrehozása A Facebook inkubátor által létrehozott Github repo - ez a megoldás, amit a React docs ajánl. A Reacton kívül ez is tartalmaz Webpack, Babel, Autoprefixer, ESLint és más fejlesztői eszközöket. Az indításhoz használja a következő CLI parancsokat:

 npm install -g hozzon létre -rea-app létrehozó-reagál-app my-app cd my-app npm startot

Ha készen állsz, akkor hozzáférjen az új React alkalmazáshoz a localhost: 3000 URL:

Ha többet szeretne olvasni a React telepítése, nézd meg a telepítési útmutató a dokumentumok.

React és JSX

Bár ez nem kötelező, akkor használja a JSX szintaxist a React alkalmazásokban. A JSX jelentése JavaScript XML, és az rendszeres JavaScript-be kerül. A JSX nagy előnye, hogy lehetővé teszi, hogy a HTML-fájlokat a JavaScript fájljaiba foglalja be, ezért megkönnyíti a reakcióelemek meghatározását.

Íme a legfontosabb tudnivalók a JSX-ről:

Ezt jelöli kezdődik kisbetűvel (az alsó teve esetében) rendszeres HTML elemként.
Ezt jelöli kezdődik nagybetűvel (felső teve esetében) mint React komponensek.
Bármely kód göndör nadrágtartóba írva … értelmezik mint a JavaScript szó.

Ha többet szeretne tudni hogyan kell használni a JSX-et React segítségével nézd meg ezt az oldalt a dokumentumokból és a alapértelmezett JSX dokumentáció nézd meg a JSX wikit.

React elemek létrehozása

A React a összetevő alapú architektúra a fejlesztők újrafelhasználható összetevők különböző problémák megoldása érdekében. A React összetevőt néhány vagy több alkotja Reakcióelemek amelyek a React alkalmazások legkisebb egységei.

Az alábbiakban látható egy egyszerű példa a React elemre amely hozzáad egy Click me gombot egy HTML oldalhoz. A HTML-ben a

tartály a "MyDiv" ID lesz a React elemkel. A React elemet a

   A React elemet a ReactDOM.render () eljárás melyik két szükséges paramétert vesz igénybe, a Reakcióelem () és tartályát (document.getElementById ( 'myDiv')). További információ olvasható hogyan reagálnak az elemek ban,-ben “Megjelenítési elemek” a dokumentumok szakaszát.
 Alkotóelemek létrehozása
 Reagáljon az összetevőkre vannak újrafelhasználható, független UI-egységek ahol könnyen frissítheti az adatokat. Egy komponens lehet egy vagy több React elemből. kellékek vannak tetszőleges bemenetek az adatok átvitele egy összetevőre. A React összetevő a JavaScript funkciókhoz hasonlóan működik - minden alkalommal, amikor meghívjuk valamilyen kimenetet generál.
 Használhatja a klasszikus funkciószintaxis vagy az új ES6 osztály szintaxis nak nek definiálja a React összetevőt. Ebben a cikkben az utóbbit fogom használni, mivel a Babel lehetővé teszi számunkra, hogy az ECMAScript 6-ot használjuk. Ha érdekli az ES6 nélküli komponens létrehozása, tekintse meg a dokumentumok összetevőinek és előkészítéseinek oldalát..
 Az alábbiakban látható a egyszerű React összetevő példaként hozunk létre. Ez egy alapvető értesítés, amelyet a felhasználó a webhelyre való bejelentkezés után lát. Három adat áll rendelkezésre esetenként változik: a felhasználó neve, az üzenetek száma és az értesítések száma, ezeket átadjuk kellékek.
  
Minden React összetevő egy JavaScript osztály kiterjeszti a React.Component alaposztály. A komponensünket hívjuk statisztikák mivel alapvető statisztikát biztosít a felhasználónak. Először mi hozza létre a statisztikák osztály a ... val osztály statisztika kiterjeszti a React.Component … szintaxis, akkor mi megjeleníti a képernyőt hívja a ReactDOM.render () módszer (az utóbbit már az előző részben használtuk).
  osztály statisztika kiterjeszti a React.Component render () return (  Szia this.props.name, this.props.notifications új értesítésekkel és this.props.messages új üzenetekkel rendelkezik. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 A. \ T ReactDOM.render () módszer áll a React összetevő nevét () és kellékei (név, értesítések, és üzenetek) értékeikkel. Amikor kijelentjük a kellékek értékeit, a húrok kell lenniük idézőjelekbe (mint "Gipsz Jakab") és numerikus értékek göndör zárójelben (mint 3).
 Ne feledje, hogy a JavaScript miatt mi használt osztály név ahelyett osztály annak érdekében, hogy osztálytribútumot adjon egy HTML-címkéhezclassName = "összefoglaló").
 A megfelelő HTML-oldal a következő:
          
    
 A React dokumentumokban sok más jó példa van a React összetevők építése és kezelése, és mit kell még tudni a kellékekről.
 További irodalom
 A React, a Facebook bemutatta újfajta keretrendszer a front-end fejlesztésbe kihívást jelent az MV * tervezési mintájára. Ha jobban meg akarja érteni, hogyan működik, és mit érhet és nem tud vele elérni, néhány érdekes cikk segíthet:
 Facebook blogbejegyzése miért építettek React-ot.
 Andrew Ray ragyogó blogbejegyzése a jó és rossz React.
 Codementor be hogyan viszonyul a React és AngularJS.
 FreeCodeCamp gondolkodik arról, hogy Az MVC halott az elülső oldalon.
 HackerNoon cikke hogyan lehet optimalizálni a reakcióval kapcsolatos teljesítményt.