Úvod > Blog > Články > Programování > React - nastavení krok za krokem >

React - nastavení krok za krokem

18.03.2019 Programování #react #webpack

Postup krok za krokem pro nastavení aplikace v Reactu s využitím Webpacku pro možnost psaní v ES6.

Aplikaci v Reactu můžeme založit přímo pomocí základního vzoru tak, jak se uvádí v dokumentaci: create-react-app. Problémem, ale může být, že takto založená aplikace nebude obsahovat některé další možnosti jako je například psaní kódu v JSX. Proto je lepší si projít procesem "ručního" nastavení aplikace v Reactu a mít tak možnost ovlivnit jaké nástroje budeme používat. Mohou to být například Webpack a Babel.

Založení projektu

V terminálu se přepneme do adresáře, kde budeme mít naší aplikaci. Následně zadáme příkaz:

npm init

Ve složce projektu vytvořte následující adresářovou strukturu:

.
    +-- public
    +-- src

Adresář public bude obsahovat veškeré statické soubory a nejdůležitější je  index.html , který bude vykreslovat aplikaci. Zkopírujte následující HTML značky do nového souboru index.html uvnitř adresáře  public .

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>FlyDiary</title>
</head>

<body>
<div id="root"></div>
<noscript>
    You need to enable JavaScript to run this app.
</noscript>
<script src="assets/bundle.js"></script>
</body>

</html>

Instalace Babel

Proveďte v příkazovém řádku následující:

npm install --save-dev @babel/core@7.1.0 @babel/cli@7.1.0 @babel/preset-env@7.1.0 @babel/preset-react@7.0.0

babel-core je hlavním balíčkem babel - je potřeba pro babel, aby udělal jakékoli změny na našem kódu. babel-cli   umožňuje kompilovat soubory z příkazového řádku. preset-react a  preset-env   jsou přednastavení, která transformují specifické části kódu - v tomto případě nám  env  umožňuje transformovat ES6 + na tradičnější javascript. Přednastavení react dělá totéž, ale umožňuje pracovat s JSX.

V kořenovém adresáři projektu vytvořte soubor s názvem  .babelrc. Zde říkáme, že budeme používat  env a react přednastavení.

{
   "presets": ["@babel/env", "@babel/preset-react"]
 }

Webpack

Nyní musíme nainstalovat a nakonfigurovat Webpack. Budeme potřebovat ještě několik balíčků, a uložíme je jako dev závislostí:

npm install --save-dev webpack@4.19.1 webpack-cli@3.1.1 webpack-dev-server@3.1.8 style-loader@0.23.0 css-loader@1.0.0 babel-loader@8.0.2

Webpack používá zavaděče ke zpracování různých typů souborů pro jejich sloučení. Umožňuje pracovat i vývojovým serverem. Někdy je problém jej, ale vlivem různých verzí nakonfigurovat tak, aby se dali sledovat živé změny přímo na stránce aplikace, při změnách v kódu. Proto lze využít jiný modul a tím je BrowserSyncPlugin. Ten nainstalujeme pomocí příkazu:

npm install --save-dev browser-sync-webpack-plugin browser-sync

V kořenovém adresáři projektu vytvořte soubor webpack.config.js. Tento soubor nastavuje možnosti exportu pomocí webpacku.


    const path = require("path");
    const webpack = require("webpack");
    var BrowserSyncPlugin = require('browser-sync-webpack-plugin');

    module.exports = {
        entry: "./src/index.js",
        mode: "development",
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /(node_modules|bower_components)/,
                    loader: "babel-loader",
                    options: { presets: ["@babel/env"] }
                },
                {
                    test: /\.css$/,
                    use: ["style-loader", "css-loader"]
                }
            ]
        },
        resolve: { extensions: ["*", ".js", ".jsx"] },
        output: {
            path: path.resolve(__dirname, "public/assets/"),
            publicPath: "/public/assets/",
            filename: "bundle.js"
        },
        watch: true,
        plugins: [
            new BrowserSyncPlugin({
                // browse to http://localhost:3000/ during development,
                // ./public directory is being served
                host: 'localhost',
                port: 3000,
                files: ['./public/*.html'],
                server: { baseDir: ['public'] }
            })
        ]
    };

React

Nejprve nainstalujte další dva balíčky: react@16.5.2a  react-dom@16.5.2 .

npm install react react-dom

V naší React aplikaci budeme muset říct, kam se má připojit do DOM (v našem index.html). Vytvořte soubor nazvaný  index.js v adresáři src. Jedná se o velmi malý soubor, který dělá hodně z hlediska aplikace React.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";

import Bootstrap from 'bootstrap/dist/css/bootstrap.css';

ReactDOM.render(<App />, document.getElementById("root"));

Nyní vytvořte další soubor v adresáři src pod názvem  App.js .

import React, { Component} from "react";
import "./App.css";

class App extends Component{
    render(){
        return(
            <div className="row">
                <div className="col-lg-6 offset-lg-3">
                    <h1> Hello, World! </h1>
                    <a className="btn btn-primary btn-lg" href="#" role="button">More info </a>
                </div>
            </div>
        );
    }
}

export default App;

Abychom mohli nastavovat vzhled aplikace, využijeme jednak css frameworku Bootstrap a ten budeme ovlivňovat vlastním css nastaveím v souboru App.css. Bootstrap můžeme nainstalovat jako modul reactu:

npm install bootstrap --save

Adresářová a souborová struktura by měla nyní vypadat následovně:

.
    +-- public
    | +-- index.html
    +-- src
    | +-- App.css
    | +-- App.js
    | +-- index.js
    +-- .babelrc
    +-- .gitignore
    +-- package-lock.json
    +-- package.json
    +-- webpack.config.js

Spuštění

Pro co možná nejjednodušší spuštění projektu pomocí vývojového serveru je dobré si vytvořit jednoduché zkratky pro spouštění v soubor package.json v sekci script:

{
  "name": "flydiary",
  "version": "1.0.0",
  "description": "Application for drone diary fly.",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --mode development --hot --inline --watch"
  },
  "author": "Milan Novak - VOXCAFE",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.1.0",
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "browser-sync": "^2.26.3",
    "browser-sync-webpack-plugin": "^2.2.2",
    "clean-webpack-plugin": "^2.0.1",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.0",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.3.0"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "jquery": "^3.3.1",
    "npm": "^6.9.0",
    "popper.js": "^1.14.7",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-hot-loader": "^4.3.11"
  }
}

Potom v příkazovém řádku stačí zadat příkaz:

npm run build

Tím dojde ke spuštění aplikace v prohlížeči a díky synchronizačnímu modulu můžeme pozorovat okamžité změny, které provedeme ve skriptu aplikace přímo na samotné stránce v prohlížeči.

Původní článek s úpravami.

#react #webpack