Přejít k navigační liště

Zdroják » JavaScript » Redux + React – Prostředí

Redux + React – Prostředí

Články JavaScript

První díl seriálu o javascriptových knihovnách React a Redux. Ve třech pokračováních se podíváme na to, jak knihovny správně použít a vytvoříme si společně první aplikaci. Kód budeme psát v ECMAScript 6 (nová verze JavaScriptu) a sestavovat pomocí Webpacku.

Seriál představuje kompletní vývojové prostředí (devstack). Skládá se ze dvou knihoven, jedné integrační utility a jednoho rozšíření známého jazyka.

Text se bude řidit třemi pravidly:

  1. Vše, co bude použito, bude vysvětleno.
  2. Žádné odbočky. Co nás nevede k cíli, nás vede od cíle.
  3. Pokud existuje více cest, jak něčeho dosáhnou, použijeme tu nejjednodušší.

Nyní si připravíme projekt a nakonfigurejeme si webpack.

1. Připravíme si adresář

Vytvořte si nový adresář a inicializujte npm pomocí přikazu ’npm init’ (je třeba mít nainstalovaný Node.js). Získáte tak ’package.json‚, což je důležité, protože webpack vám pak umožní používat všechny knihovny nainstalované pomocí balíčkového systému npm i v prohlížeči.

kód celého příkladu si můžete prohlédnout na Githubu

2. Připravíme si webpack

Webpack je utilita, která zabalí všechny potřebné zdrojové kódy do jediného ‘bundle’. Navíc umožní nakonfigurovat různé transformace a jiné operace s kódem. Jeho výhodou je, že podporuje npm balíčky (jak již bylo zmíněno) a poskytuje vývojový server, na který si člověk rád zvykne.

instalace:

npm install webpack -save

konfigurace

Vytvoříme si soubor ’webpack.config.js’ s následujícím obsahem:

module.exports = {
    entry: "./src/index.js",  //náš vstupní bod aplikace
    output: {
        filename: "bundle.js"   //výstupní balík všech zdrojových kódů
    },
    module: { //sem budeme zanedlouho vkládat transformační moduly
    }
};

Také budeme potřebovat adresář ’src’ a v něm soubor ’index.js‚, který může obsahovat například ’document.write(“Ahoj kamarádi”)‚. To je zdrojový kód naší aplikace.

Ještě nám chybí reference v souboru ’package.json‚, aby bylo možno webpack jednoduše spouštět.

"scripts": {
  ...
  "webpack": "webpack"
},

A máme hotovo. Webpack nám vyrobí balícek ’bundle.js’ z našich zdrojových kódů, když ho zavoláme (příkazem ’npm run webpack‚).

Webpack

Výroba statického bundle.js

Soubor ’bundle.js’ nalinkujeme do HTML souboru ’index.html‚, který bude mít následující obsah:

<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <h4>Moje stránka</h4>
    <script src="bundle.js"></script>
  </body>
</html>

Pokud něco nefunguje tak, jak má, zkontrolujte kód proti repozitáři. Pokud vše funguje, na tránce je nápis “Ahoj kamarádi”. Soubor ’index.html’ můžete zavolat pomocí svého oblíbeného lokálního HTTP serveru nebo otevřít v prohlížeči přímo ze souborového systému.

Browser

Naše stránka

Gratuluji, máte nakonfigurovaný webpack.

3. Webpack devserver

Vytváření statického ’bundle.js’ není přiliš produktivní přístup k vývoji, každé sestavení nějaký čas trvá. webpack proto poskytuje i vývojový server, který bude aktualizace kódu plynule dodávat do prohlížeče.

Přidejte si do ’package.json’ sekce ‘scripts’ tuto refetrenci:

    "devserver": "webpack-dev-server --inline"

(Parametr –inline spouští server na jednodušší URL)

…na konzoli zavolejte ’npm run devserver’ a v prohlížeči navštivte adresu ’http://localhost:8080‚. Celou stránku nyní dodává webpack devserver. Ve chvíli, kdy změníte JS kód, stránka se automaticky aktualizuje. Trvá to rychleji než výroba bundle, protože webpack zpracuje jen soubor, ve kterém došlo ke změně. Začne to být významný rozdíl, až budete mít více kódu v projektu.

CMD Webpack Dev Server

Webpack dev server

Jen pro zajímavost uvádím, že webpack se snaží i o takzvaný hot reload. Pokud to kód umožní, dojde k aktualizaci bez obnovení stránky.

Průběh aktualizace kódu můžete sledovat na i na konzoli prohlížeče, včetně výpisu připadných chyb.

Chrome console

Automatická aktualizace stránky

Máme tedy připravený adresář projektu, vývojový server a generátor balíčků, který se nám bude hodit až budeme chtít aplikaci zveřejnit. (’webpack –optimize-minimize’ vyrobí minifikovaný balíček, aktualizujte si ’package.json‚). Webpack devserver samozřejmě není určený na veřejnou produkci.

Teď si ale ještě trochu vylepšíme JavaScript. Náš projekt totiž budeme psát v JavaScriptu budoucnosti.

4. Babel – Cesta k ES6

Projekt Babel umožňuje využít nové funkce jazyka JavaScript tak, že je přeloží do staršího formátu vhodného pro současné prohlížeče. Zjednodušeně řečeno platí, že zatímco v pracovním adresáři máme JavaScript normy ES6 (a vyšších), prohlížeč dostává JavaScript podle normy ES5, který je dnes bezpečně podporovaný.

‘Babel’ je možno rozšiřovat o různé konstrukce jazyka. V nabídce jsou již schválené novinky, které jen čekají na implementaci v prohlížečích, ale také zcela nové funkce v různých fázích návrhů. Pokud programátoři zvolí konstrukce, které se později do standardu ‘ECMAScriptu’ nedostanou, hrozí jim, že budou muset svůj projekt refaktorovat. Nové funkce jsou velmi lákavé.

My použijeme dva ucelené balíky (presets) a jedno jednotlivé rozšíření (plugin).

Instalace

Nainstalujte si pomocí ’npm install -save’ tyto knihovny a přečtěte si, jaké funkce vám přinesou:

Konfigurace

Upravíme náš ‘webpack.config.js’ a přidáme Babel loader pro JS soubory.

module: {
      loaders: [
          {
              test: /\/src\/.+\.js$/,    //Všechny soubory s koncovkou js...
              loader: 'babel-loader',  //prožeň babel-loaderem (integrace babelu a webpacku)
              query: {
                  presets: ['react', 'es2015'], //vybrané babel presety: https://babeljs.io/docs/plugins/#presets
                  plugins: ["transform-class-properties"] //vybrané pluginy https://babeljs.io/docs/plugins/#transform-plugins
              }
          }
    ]
}

Je třeba restartovat webpack devserver, jako pokaždé, když se mění konfigurace.

5. ES6

Nyní by mělo být možno psát kód v ‘ES6’, což můžeme standno vyzkoušet. Změňte náš jediný příkaz document.write(‘Ahoj kamarádi’) na něco takového:

var x = ["Viléme"];

var y = [ //Spread Array direktiva sečte dvě pole
    ...x,
    "Ahoj"
];

document.write(y[1] + " " + y[0]);

Pokud bude vše fungovat, uvidíte následující stránku. Pokud ne, zkontrolujte si kód proti repozitáři.

Browser

Naše stránka s ES6 kódem přeloženým do ES5

Také se podívejte do zdrojového kódu uvnitř bunde.js. Uvidite, že kód je transformovaný do ES5 syntaxe:

var x = ["Viléme"];

    var y = [].concat(x, ["Ahoj"]);

    document.write(y[1] + " " + y[0]);

Gratuluji, máte připravený projekt, to není málo.

Než se potkáme příště (nad knihovnou Redux a principem ‘imutability’), můžete se seznámit více s ES6https://github.com/ericdouglas/ES6-Learning.

Komentáře

Subscribe
Upozornit na
guest
33 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Michal Zyka

V části 5. ES6 je v první ukázce kódu špatně ukončená závorka na řádku 6. Jinak supr tutoriál těšim se na další. Díky!

Martin Hassman

Díky za upozornění, závorku jsem opravil.

mirek

Bylo by fajn, kdyby se autor po sepsani i takto zakladni ukazky pokusil postup projit a naprogramovat to co sam pise. Nebo to dal nekomu kdo sedi vedle na kontrolu. JS pole var y = [ }; bylo na me uz moc, sorry.

Martin Hassman

Co je na někoho moc, je na jiného málo, nikdy se nezavděčíte všem. Článek pár lidí kontrolovalo. Pokud tahle drobnůstka jim i autorovi utekla, tak za mě autor odvádí skvělou práci a budeme s ním rádi dále spolupracovat.

Freema

Nevím ale tohle mi přijde jako zbytečný trolling ohledně evidentní syntax chybě kterou ti najde každé dobré IDE.

tacoberu

Nefunguje mi příkaz npm run devserver. Háže to, že sh: webpack-dev-server: příkaz nenalezen. Takže předpokládám, že mi schází nějaký balíček, který asi autor má by-default nainstalovaný?

uetoyo

@taco npm install ?

tacoberu

To jsem udělal. Dokonce, jako obranu proti překlepu jsem si naklonoval ukázkové repo, dal npm install ale nepomohlo.
npm --version = 1.3.6

Oldis

na win v cmd napises npm run …. a ne v node js konzoli

tacoberu

Eh, to si jako musím instalovat Windows? :-P

uetoyo

V repozitáři jsou dva projekty, tedy dva podadresáře … cd Kapitola_1_Babel a npm install. Jinak mne už nic nenapadá.

tacoberu

Ta verze npm je ok?

uetoyo

Já sem na Windows (kupodivu to funguje) a moje verze npm je 3.3.12 — to vypadá, že máš pěkně starou verzi.

tacoberu

No jo no. fedora21 nic novějšího nemá.

uetoyo

https://nodejs.org/en/download/
Linux Binaries (.tar.xz)
Nic lepšího už asi není (kromě kompilace ze zdrojáků)

LesTR

Ale je a jmenuje se to NVM

uetoyo

Ještě mne napadá, že existuje nvm — Node version Manager; který ironicky zase nefunguje na Windows — respektive je nějaký napsaný v Go .)

tomas jedno

na windows funguje nvm windows: https://github.com/coreybutler/nvm-windows/releases

uetoyo

Pro začátečníky by to mohlo být asi ještě podrobnější. Imho není lepší mít webpack globálně nebo jako dev závislost?

project: npm install webpack --save-dev
global: npm install webpack -g

(Proč nejde změnit už. jméno, když jsem přihlášen přes github? daviland aka uetoyo)

Oldis

lokalne kvuli verzi

Martin Hassman

Co se týče jména, mrkni do profilu na položku „Veřejně zobrazovat jako“ a nastav dle přání.

uetoyo

Díky, funguje to jak má, chyba byla u mne.

Tomáš Kalina

Také jsem se na tom na odpoledne zasekl. Je potřeba nainstalovat balíček webpack-dev-server.

npm install webpack-dev-server
Pavel Lang

Hmm, čekal jsem malilinko víc, ale za osvětu jsem rád :-D Obzvlášť se těším na Redux, který by si sám o sobě zasloužil hned článků několik, ale to se asi do 1/3 seriálu nevejde.. Jedině že by autor byl vtipálek jako Knuth :-D

Martin Hassman

Přestaň tu dělat hmm a něco napiš! 8-)

Pavel Lang

Mám moc práce, ale až bude trošku klid, tak bych mohl napsat o React Starter Kitu (https://github.com/kriasoft/react-starter-kit)

ecartsiger

Zdravím, u té instalace Vám asi chybí babel-plugin-transform-object-rest-spread protože npm run webpack mi bez této knihovny háže error. Jinak super článek.

Bohdan Ganický

Dobry den, diky za serial. Mel bych ale jeden povzdech. Venovat 1 ze 3 dilu nastrojum mi prijde fakt skoda. Front-end tooling je samo o sobe tak siroke tema, ze bych ho v uvodu do Reduxu uplne vynechal. Podivejte se treba, jak se bez toho obesel Dan Abramov ve svem kurzu a bylo to jen ku prospechu. Veskera pozornost se tak podrobne venuje konceptum Reduxu, vcetne jejich naivni implementace apod. O nastrojich se da udelat samostatny serial…ale uz zitra bude stary. ;)

Martin Hassman

Já to čtu hlavně jako povzdech, že tu není víc článků o Reduxu. To se dá změnit, dveře jsou otevřené 8-)

Petr

Pri uprave webpack.config.js, po nainstalovani podpory babel, chceme, aby prekladal vsechny .js soubory, proto je potreba nastavit test: /.js$/ a to krome adresare node_modules exclude: /(node_modules)/. Na GitHubu to tak je, tak se kdyztak ridte podle toho.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.