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:04] badtotem |
programovani:webpack [2019/06/25 01:11] (aktuální) badtotem [Step 5: Run The App] |
||
|---|---|---|---|
| Řádek 6: | Řádek 6: | ||
| Create new folder webpack-react and open it: | Create new folder webpack-react and open it: | ||
| + | <code> | ||
| mkdir webpack-react && cd $_ | mkdir webpack-react && cd $_ | ||
| + | </code> | ||
| + | |||
| $_ is a reference to the last argument to the previous command. | $_ is a reference to the last argument to the previous command. | ||
| Initialize a new npm project: | Initialize a new npm project: | ||
| + | <code> | ||
| npm init -y | npm init -y | ||
| + | </code> | ||
| + | |||
| This command will create package.json file in your directory. We pass the y option to skip the questions. | This command will create package.json file in your directory. We pass the y option to skip the questions. | ||
| Create file src/index.html with following contents: | Create file src/index.html with following contents: | ||
| + | <code> | ||
| <!DOCTYPE html> | <!DOCTYPE html> | ||
| <html lang="en"> | <html lang="en"> | ||
| Řádek 29: | Řádek 34: | ||
| </body> | </body> | ||
| </html> | </html> | ||
| - | Step 2: Set Up Webpack | + | </code> |
| + | |||
| + | ====== Step 2: Set Up Webpack ====== | ||
| Install webpack, webpack-cli, webpack-dev-server, html-webpack-plugin and html-loader as dev dependencies: | Install webpack, webpack-cli, webpack-dev-server, html-webpack-plugin and html-loader as dev dependencies: | ||
| + | <code> | ||
| npm i webpack webpack-dev-server html-webpack-plugin --save-dev | npm i webpack webpack-dev-server html-webpack-plugin --save-dev | ||
| + | </code> | ||
| + | |||
| 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 51: | Řá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 67: | Řá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 94: | Řá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 113: | Řá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|}} | ||