logo

Setkání s React.js:Výňatek z „Reagovat rychle“

Toto je úryvek z Rychle reagovat (Manning, 2016). Celou první kapitolu si můžete zdarma stáhnout na Manning . Vydání knihy je naplánováno na první čtvrtletí roku 2016, ale MEAP je k dispozici právě teď. Použijte kód „mardandz “ a získejte 39% slevu.

Každá kapitola má projekt, který je doplněn videozáznamem hostovaným na YouTube .

Rychle reagovat Screencasty

Projekt:Nabídka s React.js

Projekt pro tento článek bude minimální. Cílem je mít dynamicky generované menu, které se bude skládat ze značek .

Použijeme vlastní komponenty React Menu a Link. Způsob, jakým je vytváříme, je podobný způsobu, jakým vytváříme komponentu HelloWorld v předchozím příkladu. Projekt vám ukáže, jak programově vykreslit vnořené prvky. V předchozích příkladech jsme děti pouze kódovali ručně. Použijeme k tomu funkci map().

Nejprve musíte získat soubor React. Použijme prozatím neminifikovanou verzi. Neminifikovaná nebo vývojová verze nebude mít v názvu .min.

Rozdíl je v tom, že v neminifikované verzi získáte užitečná varování spolu s kódem React v lidském formátu pro případ, že byste do něj chtěli nahlédnout. Na druhou stranu v minifikované verzi jsou varování a chyby potlačeny a kód je minimalizován a optimalizován.

Pokud jste si ještě nestáhli React, udělejte to nyní. Pamatujte, že používáme verzi 0.14.2. Žádná jiná verze není testována s našimi příklady, takže ji používejte na vlastní riziko (nedoporučujeme).

Pokud nemáte nainstalovaný Node.js a npm, nyní je ten správný čas začít. "Ale React je front-end knihovna!" řeknete si a budete mít pravdu. React bude fungovat dobře bez serverů a Node.js. Z tohoto důvodu tento krok klidně přeskočte. Nemít Node.js a npm se však nedoporučuje, protože většina webových vývojářů, které znám, dnes nemůže žít bez použití Node.js pro nástroje front-end aplikací. Nástroje uzlů se staly všudypřítomnými. Navíc npm má spoustu front-end modulů.

Takže nebuďte líní. Pokud chcete zůstat na špici, použijte Node.js a npm.

Doufám, že to byla zábava a že se s Node.js spřátelíte. Vraťme se do nabídky Reagovat.

HTML je velmi základní. Zahrnuje soubory reagovat.js a reagovat-dom.js, které jsou pro zjednodušení ve stejné složce jako soubor HTML. Samozřejmě později budete chtít mít své soubory *.js v nějaké jiné složce, jako je js nebo src:

<!DOCTYPE html>
<html>
  <head>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
  </head>

Tělo má jen dva prvky. Jedním z nich je div s nabídkou ID. Zde se vykreslí naše menu. Další je značka skriptu s naším kódem aplikace React:

  <body>
    <div id="menu"></div>
    <script src="script.js"></script>
  </body>
</html>

Skript.js je náš hlavní soubor aplikace a vypadá takto:

var Menu = React.createClass({...}})
var Link = React.createClass({...})
ReactDOM.render(
  React.createElement(
    Menu,
    null
  ),
  document.getElementById('menu')
)

V podstatě máme hlavní komponentu Menu. K vytvoření používáme React.createClass():

[Sidenote]

Čtení blogových příspěvků je dobré, ale sledování videokurzů je ještě lepší, protože jsou poutavější.

Mnoho vývojářů si stěžovalo, že na Node je nedostatek dostupného kvalitního videomateriálu. Sledování videí na YouTube je rušivé a platit 500 $ za videokurz Node je šílené!

Jděte se podívat na Node University, která má na Node ZDARMA videokurzy:node.university.

[Konec vedlejší poznámky]

var Menu = React.createClass({

Komponenta Menu bude vykreslovat jednotlivé položky nabídky, které jsou značkami odkazů. Než je budeme moci vykreslit, pojďme definovat položky nabídky. Položky nabídky jsou pevně zakódovány v poli nabídek takto (můžete je získat z modelu a/nebo serveru ve složitějším scénáři):

  render: function(){
    var menus = [
      'Home',
      'About',
      'Services',
      'Portfolio',
      'Contact us'
    ]

K vytvoření čtyř komponent Link použijeme funkci map() z rozhraní Array. Nezapomínáme, že metoda render musí vrátit jeden prvek. Z tohoto důvodu musíme kolem našich odkazů obtékat

.

    return React.createElement('div',
      null,

Funkce map() vrací pole, kde každý prvek je výsledkem výrazu React.createElement(Link, {label:v}) zabaleného do

:

     menus.map(function(v,i){
        return React.createElement('div',

má klíčový atribut, který je důležitý. Umožňuje Reactu optimalizovat vykreslování seznamů jejich převodem na hashe (přístupová doba pro hashe je lepší než pro seznamy/pole). V zásadě tedy vytvoříme spoustu komponent Link v poli a každá z nich má štítek prop s hodnotou z pole nabídek:

          {key: i},
          React.createElement(Link, {label: v})
        )
      })
    )
}})

Ve vykreslení komponenty Link zapíšeme výraz pro vytvoření adresy URL. Tato adresa URL bude použita v atributu href značky . Hodnota this.props.label je předána z uzavření mapy ve funkci vykreslení nabídky:return React.createElement(Link, {label:v}).

var Link = React.createClass({ 
  render: function () {
    var
      + this.props.label
        .toLowerCase()
        .trim()
        .replace(' ', '-')

Metody toLowerCase(), trim() a replace() jsou standardní funkce řetězce JavaScriptu. Represivně provádějí převod na malá písmena, ořezávání bílých míst na okrajích a nahrazování mezer pomlčkami.

Výraz URL vytvoří následující adresy URL:

  • domov pro domov
  • informace o aplikaci
  • služby pro služby
  • portfolio pro portfolio
  • kontaktujte nás pro Kontaktujte nás

V návratu Link předáme this.props.label jako třetí argument pro createElement() a stane se součástí obsahu značky , tj. textu odkazu.

Abychom oddělili každý odkaz od druhého, přidáme značku konce odkazu
. Protože komponenta musí vracet pouze jeden prvek, zabalíme a
do

:

    return React.createElement('div',
      null,

Každý argument pro createElement() po druhém, například 3rd, 4th, 5th, bude použit jako obsah (také znám jako děti). Abychom vytvořili prvek odkaz, předáme jej jako druhý argument. A abychom vytvořili prvek přerušení
po každém odkazu, předáme prvek konce řádku jako čtvrtý argument:

      React.createElement(
        'a',
        {href: url},
        this.props.label
      ),
      React.createElement('br')
      )
  }
})

A je to. Žádné vzrušení, ale stránka by vám měla zobrazit pět odkazů (nebo více, pokud do pole nabídek přidáte další položky). Je to mnohem lepší než kopírování, vkládání pěti prvků a následné úpravy štítků a adres URL na více místech.

Pro vaše pohodlí budu poskytovat úplný seznam souborů tak často, jak to bude možné. Prostor je levný (doufám, že jste fanouškem digitálního formátu stejně jako já) a já (stejně jako 1000 mých čtenářů) považujem za nesmírně užitečné mít možnost podívat se na celý soubor najednou bez přerušování textu nebo přerušování textu. na Github. Pokud nesouhlasíte, jednoduše přeskočte celý seznam.

Chcete-li stránku zobrazit, jednoduše ji otevřete jako soubor v prohlížečích Chrome, Firefox nebo Safari (a možná v Internet Exploreru) – obrázek 1-X.

var Menu = React.createClass({
  render: function(){
    var menus = ['Home',
      'About',
      'Services',
      'Portfolio',
      'Contact us']
    return React.createElement('div',
      null,
      menus.map(function(v,i){
        return React.createElement('div',
          {key: i},
          React.createElement(Link, {label: v})
        )
      })
    )
}})

var Link = React.createClass({
  render: function () {
    var
      + this.props.label
        .toLowerCase()
        .trim()
        .replace(' ', '-')
    return React.createElement('div',
      null,
      React.createElement(
        'a',
        {href: url},
        this.props.label
      ),
      React.createElement('br')
      )
  }
})

ReactDOM.render(
  React.createElement(
    Menu,
    null
  ),
  document.getElementById('menu')
)

I pro tyto triviální stránky rád používám lokální webový server. Spouštění kódu se přibližuje tomu, jak byste to dělali v produkci. Navíc vám umožňuje používat AJAX/XHR, které nemůžete použít, pokud právě otevíráte soubor HTML v prohlížeči.

Nejjednodušší způsob, jak spustit místní webový server, je použít node-static nebo podobný nástroj Node.js . Chcete-li jej nainstalovat, použijte npm:

$ npm install -g [email protected]

Po instalaci spusťte tento příkaz z kořenové složky projektu, aby byl soubor dostupný na http://localhost:8080 (toto není externí odkaz, před kliknutím na odkaz nejprve spusťte níže uvedený příkaz):

$ static

Chcete-li zastavit server na Mac OS X, jednoduše stiskněte control + c.

Zdrojový kód tohoto příkladu je na GitHubu  a Plunker . Chcete-li si pohrát s kódem a/nebo si prohlédnout demo online, jednoduše přejděte na Plunker .

Reagujte rychle

Můžete se také podívat na videa na YouTube od React Quickly nebo si koupit knihu s 39% slevou (kód “mardandz “).