Redux + React – Prostředí
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: Redux + React (3 díly)
- Redux + React – Prostředí 30. 5. 2016
- Redux + React – Redux 6. 6. 2016
- Redux + React – React 13. 6. 2016
Nálepky:
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:
- Vše, co bude použito, bude vysvětleno.
- Žádné odbočky. Co nás nevede k cíli, nás vede od cíle.
- 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‚).
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.
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.
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.
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:
- babel-core – knihovna Babel – Transpiler do ES5.
- babel-loader – integrace knihovny Babel do webpacku.
- babel-preset-es2015 – různá rozšíření JavaScriptu pro Babel, zde je kompletní seznam. My budeme využívat:
- Rest-spread – ukážeme si za chvíli, slouží ke kombinaci (immutable) polí.
- Modules – modulární kód s ES6 žádný problém (čtěte více, chcete-li).
- Třídy – ES6 již podporuje třídy s obvyklou syntaxí.
- Defaultní hodnoty parametrů funkcí – to co je v jiných jazycích už dávno – „function(a = 1) {}“ nyní i v JavaScriptu.
- babel-preset-react – rozšíření JavaScriptu pro podporu knihovny React.
- babel-plugin-transform-class-properties – toto rozšíření navíc přidává proměnné a konstanty ve třídách.
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.
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 ES6 – https://github.com/ericdouglas/ES6-Learning.
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!
Díky za upozornění, závorku jsem opravil.
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.
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.
Nevím ale tohle mi přijde jako zbytečný trolling ohledně evidentní syntax chybě kterou ti najde každé dobré IDE.
Nefunguje mi příkaz
npm run devserver. Háže to, žesh: 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ý?@taco
npm install?To jsem udělal. Dokonce, jako obranu proti překlepu jsem si naklonoval ukázkové repo, dal
npm installale nepomohlo.npm --version= 1.3.6na win v cmd napises npm run …. a ne v node js konzoli
Eh, to si jako musím instalovat Windows? :-P
V repozitáři jsou dva projekty, tedy dva podadresáře …
cd Kapitola_1_Babelanpm install. Jinak mne už nic nenapadá.Ta verze npm je ok?
Já sem na Windows (kupodivu to funguje) a moje verze npm je 3.3.12 — to vypadá, že máš pěkně starou verzi.
No jo no. fedora21 nic novějšího nemá.
https://nodejs.org/en/download/
Linux Binaries (.tar.xz)
Nic lepšího už asi není (kromě kompilace ze zdrojáků)
Ale je a jmenuje se to NVM
Ještě mne napadá, že existuje nvm — Node version Manager; který ironicky zase nefunguje na Windows — respektive je nějaký napsaný v Go .)
na windows funguje nvm windows: https://github.com/coreybutler/nvm-windows/releases
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?
(Proč nejde změnit už. jméno, když jsem přihlášen přes github? daviland aka uetoyo)
IMHO lokálně, i když dřív jsem si myslel opak. :) Vojtěch Mikšů mi to doporučil. Ale je to asi opravdu jedno. Takhle nemáš externí závislosti a můžeš mít všechny příkazy na jediném místě => v package.json
lokalne kvuli verzi
Co se týče jména, mrkni do profilu na položku „Veřejně zobrazovat jako“ a nastav dle přání.
Díky, funguje to jak má, chyba byla u mne.
Také jsem se na tom na odpoledne zasekl. Je potřeba nainstalovat balíček webpack-dev-server.
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
Přestaň tu dělat hmm a něco napiš! 8-)
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)
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.
Rozumím, máte pravdu. Odstraňte si prosím z „webpack.config.js“ definici „transform-object-rest-spread“ nebo si jej nainstalujte.
Je to na vás. V každém připadě je to bezvadná věc ale pro přiklad není potřeba.
Děkuji za upozornění, na Githubu i v článku to upravím.
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. ;)
Díky za feedback. Můj plán byl představit ucelený postup který vede od začátku na konec. Jako začátek jsem si stanovil základní znalost JS. Seriál je pro začátečníky, proto začíná trochu dřive než ten který zmiňujete.
Danův seriál je jiný, vychází z předpokladu že tohle všechno znáte a je pro pokročilejší programátory. Předpokládá dokonce znalost ES6,7. Také vyšel až několik týdnů později, tak i kdybych chtěl, nemohl jsem se inspirovat.
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-)
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.