Rozdíly
Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.
| Obě strany předchozí revize Předchozí verze Následující verze | Předchozí verze | ||
|
programovani:webpack [2019/06/25 01:07] badtotem |
programovani:webpack [2019/06/25 01:11] (aktuální) badtotem [Step 5: Run The App] |
||
|---|---|---|---|
| Řádek 46: | Řádek 46: | ||
| Here’s why they are needed: | Here’s why they are needed: | ||
| - | webpack is core dependency | + | * Nečíslovaný seznamwebpack is core dependency |
| - | webpack-dev-server will allow us to run dev server | + | * webpack-dev-server will allow us to run dev server |
| - | html-webpack-plugin simplifies working with html files | + | * html-webpack-plugin simplifies working with html files |
| Create webpack.config.js with following content: | Create webpack.config.js with following content: | ||
| + | <code> | ||
| const HtmlWebPackPlugin = require("html-webpack-plugin"); | const HtmlWebPackPlugin = require("html-webpack-plugin"); | ||
| const path = require('path'); | const path = require('path'); | ||
| Řádek 62: | Řádek 64: | ||
| plugins: [new HtmlWebPackPlugin({ template: "./src/index.html" })] | plugins: [new HtmlWebPackPlugin({ template: "./src/index.html" })] | ||
| }; | }; | ||
| + | </code> | ||
| + | |||
| Add build and start commands to scripts section of package.json: | Add build and start commands to scripts section of package.json: | ||
| + | <code> | ||
| "scripts": { | "scripts": { | ||
| "build": "webpack --mode production", | "build": "webpack --mode production", | ||
| "start": "webpack-dev-server --open --mode development", | "start": "webpack-dev-server --open --mode development", | ||
| } | } | ||
| - | Step 3: Set Up Babel | + | </code> |
| + | |||
| + | ====== Step 3: Set Up Babel ====== | ||
| Install Babel dependencies: | Install Babel dependencies: | ||
| + | <code> | ||
| npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev | npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev | ||
| + | </code> | ||
| + | |||
| We’ve installed babel and two presets here: | We’ve installed babel and two presets here: | ||
| Řádek 78: | Řádek 89: | ||
| Create .babelrc with following contents: | Create .babelrc with following contents: | ||
| + | <code> | ||
| { | { | ||
| "presets": ["@babel/preset-env", "@babel/preset-react"] | "presets": ["@babel/preset-env", "@babel/preset-react"] | ||
| } | } | ||
| + | </code> | ||
| + | |||
| Add babel-loader to your webpack configuration: | Add babel-loader to your webpack configuration: | ||
| + | <code> | ||
| const HtmlWebPackPlugin = require("html-webpack-plugin"); | const HtmlWebPackPlugin = require("html-webpack-plugin"); | ||
| const path = require('path'); | const path = require('path'); | ||
| Řádek 105: | Řádek 120: | ||
| plugins: [new HtmlWebPackPlugin({ template: "./src/index.html" })] | plugins: [new HtmlWebPackPlugin({ template: "./src/index.html" })] | ||
| }; | }; | ||
| - | Step 4: Set Up React | + | </code> |
| + | |||
| + | ====== Step 4: Set Up React ====== | ||
| Install React dependencies: | Install React dependencies: | ||
| + | <code> | ||
| npm i react react-dom | npm i react react-dom | ||
| + | </code> | ||
| + | |||
| react - provides us with API to work with components | react - provides us with API to work with components | ||
| react-dom - allows to render to HTML DOM | react-dom - allows to render to HTML DOM | ||
| + | |||
| Create file src/App.js with following code: | Create file src/App.js with following code: | ||
| + | <code> | ||
| import React from "react" | import React from "react" | ||
| import ReactDOM from "react-dom" | import ReactDOM from "react-dom" | ||
| Řádek 124: | Řádek 147: | ||
| ReactDOM.render(<App />, document.getElementById("root")) | ReactDOM.render(<App />, document.getElementById("root")) | ||
| - | Step 5: Run The App | + | </code> |
| + | |||
| + | ====== Step 5: Run The App ====== | ||
| Start webpack-dev-server by running npm start: | Start webpack-dev-server by running npm start: | ||
| + | <code> | ||
| npm start | npm start | ||
| + | </code> | ||
| + | |||
| It should open a browser window and you should see this: | It should open a browser window and you should see this: | ||
| + | |||
| + | {{:programovani:hello-app.png?400|}} | ||