Startujeme React v ES6 s pomocí Webpacku

Kdo dnes nepíše v ES6 jakoby nebyl. Takový kód, stejně jako JSX, prostě nejde jen tak rovnou poslat prohlížeči. Je potřeba ho přeložit a od toho máme Webpack.

Na ES2015 JavaScript s Babelem

React je dnes velmi populární stejně jako ES6 JavaScript. Obojí však buď kvůli překladu z JSX, nebo kvůli kompatibilitě se všemi prohlížeči, musíme pro produkční použití překládat. K tomu nám nejlépe poslouží překladač kódu Babel:

npm install --save-dev babel-loader babel-core babel-preset-es2015  
npm install --save-dev react react-dom  

Aby vše fungovalo, je potřeba do webpack.config.js zavést loader pro Babel. Regulární výraz zajistí, aby se pravidlo aplikovalo na *.jsx i *.js soubory:

{
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    }
}

Hello world kořenová komponenta v Reactu

React je užitečný nástroj pro práci s GUI. Nejde o frontendový framework, ale jen o View vrstvu z MVC modelu (respektive MVVM, který je Reactu bližší). Nejprve je třeba nainstalovat potřebné moduly:

npm intall --save-dev react react-dom  

Základní princip je pak jednoduchý. Do šablony vložíme HTML element, který bude vstupním bodem aplikace, či konkrétních komponent:

<div id="app"></div>  

Samotnou komponentu, která se vyrenderuje v místě elementu #app pak definujeme jako React třídu, kterou pak stačí zahrnout do skriptů na stránce:

'use strict';

const React = require('react');  
const ReactDom = require('react-dom');

// definice komponenty
class App extends React.Component {  
    render () {
        return <h2>Hello world</h2>;
    }
}

// vykreslení komponenty
ReactDom.render(<App />, document.getElementById('app'));

module.exports = App;  

Kam dále

David Menger

Read more posts by this author.