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:08] badtotem |
programovani:webpack [2019/06/25 01:11] (aktuální) badtotem [Step 5: Run The App] |
||
|---|---|---|---|
| Řádek 68: | Řádek 68: | ||
| 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 82: | Řá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 109: | Řá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 128: | Řá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|}} | ||