SlideShare a Scribd company logo
Digital Career Institute
Hello.
Benny Neugebauer,
Web Team Lead at Wire & Consultant at DCI
https://github.com/bennyn
https://twitter.com/apfelbenny
https://stackoverflow.com/users/451634/
Introduction to React
A React app written in less than 10 lines of
code...
Hello, World!
Key Players:
1. React
(library for building user interfaces)
2. React DOM
(surface providing DOM access)
3. JSX
(syntax extension to JavaScript)
4. Host element
(<div id=”app”></div>)
import React from 'react';
import ReactDOM from 'react-dom';
const HelloWorld = () => <h1>Hello, World!</h1>;
ReactDOM.render(
<HelloWorld/>,
document.getElementById('app')
);
src/main/index.jsx
A painter is only as good as his brush...
Toolchain
1. yarn add react
2. yarn add react-dom
3. yarn add --dev webpack
4. yarn add --dev webpack-cli
5. webpack.config.js
First wave of dependencies:
{
"dependencies": {
"react": "16.4.1",
"react-dom": "16.4.1"
},
"devDependencies": {
"webpack": "4.12.2",
"webpack-cli": "3.0.8"
},
"license": "MIT",
"main": "src/main/index.jsx",
"name": "true-start",
"version": "1.0.0"
}
package.json
If you have done everything right, it will fail…
(when running “npx webpack”)
Webpack Config
const pkg = require('./package.json');
module.exports = {
entry: {
[pkg.name]: `${__dirname}/${pkg.main}`,
},
mode: 'development',
output: {
filename: `[name].bundle.js`,
path: `${__dirname}/dist`,
},
resolve: {
extensions: ['.js', '.jsx'],
},
};
webpack.config.js
Only the sky is the limit!
Babel
1. yarn add --dev babel-loader
2. yarn add --dev babel-preset-react
3. yarn add --dev babel-core
Second wave of dependencies:
If you are an early bird...
1. yarn add --dev babel-loader@next
2. yarn add --dev @babel/preset-react
3. yarn add --dev @babel/core
Chirp, chirp!
const pkg = require('./package.json');
module.exports = {
entry: {
[pkg.name]: `${__dirname}/${pkg.main}`,
},
mode: 'development',
module: {
rules: [
{
test: /.jsx?$/,
exclude: /(bower_components|node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
}
]
},
output: {
filename: `[name].bundle.js`,
path: `${__dirname}/dist`,
},
resolve: {
extensions: ['.js', '.jsx'],
},
};
Babel loader makes use of a Preset that
contains plugins for React & JSX.
The Preset requires a Babel core, because
nothing works without the core.
To make the components play nicely
together, we need to supply a “rules” item for
webpack’s “module” configuration.
Example is based on:
1. babel-loader (8.0.0-beta.4)
2. @babel/preset-react (7.0.0-beta.51)
3. @babel/core (7.0.0-beta.51)
Tip: The “options” can go into a “.babelrc” file.
webpack.config.js
Release the Kraken!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>HTML5</title>
</head>
<body>
<div id="app"></div>
<script
src="dist/true-start.bundle.js"></script>
</body>
</html>
index.html
React (JS & JSX)
Webpack
babel-loader
@babel/preset-react
@babel/core
JS loaded in HTML
Use “webpack-dev-server”, a development
server that provides live reloading.
One more thing...
const pkg = require('./package.json');
const webpack = require('webpack');
module.exports = {
devServer: {
open: true,
port: 8080,
publicPath: '/dist/',
},
[...],
plugins: [
new webpack.HotModuleReplacementPlugin()
],
[...],
};
1. yarn add --dev webpack-dev-server
1. Update webpack.config.js
1. Add “start” script to “package.json” with
command “webpack-dev-server”
Installation:
webpack.config.js
Alternative:
1. Run webpack in watch mode with
“npx webpack -w”
Now we are talking! Rewrite of our stateless
functional component (SFC) to a Class
Component.
Create a Component
import React from 'react';
class HelloWorld extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h1>Hello, World!</h1>;
}
}
export default HelloWorld;
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';
ReactDOM.render(
<HelloWorld/>,
document.getElementById('app')
);
src/main/index.jsx
src/main/HelloWorld.jsx
Rendering dynamic content at ease!
Render Props
import React from 'react';
class HelloWorld extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h1>{this.props.text}</h1>;
}
}
HelloWorld.defaultProps = {
text: 'Placeholder'
};
export default HelloWorld;
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';
ReactDOM.render(<HelloWorld
text={Bonjour tout le monde!'}/>,
document.getElementById('app')
);
src/main/index.jsx
src/main/HelloWorld.jsx
Props can be used to set the initial state.
Everything further than that should be done
using “setState”.
Changing the state
import React from 'react';
class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.state = {
text: props.text
};
}
appendText(moreText) {
let {text} = this.state;
text = `${text} ${moreText}`;
this.setState({
text
});
}
render() {
return <h1>{this.state.text}</h1>;
}
}
HelloWorld.defaultProps = {
text: 'Placeholder'
};
export default HelloWorld;
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';
const component =
ReactDOM.render(<HelloWorld
text={Bonjour tout le monde!'}/>,
document.getElementById('app')
);
component.appendText('Ça va bien?');
src/main/index.jsx
src/main/HelloWorld.jsx
We can refactor the previous example into a
component that accepts an array of strings
and outputs a paragraph for each item.
Render many things
import React from 'react';
class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.state = {
texts: props.texts
};
}
render() {
return (
<div>
{
this.state.texts.map((text, index) =>
<p key={index}>{text}</p>)
}
</div>);
}
}
HelloWorld.defaultProps = {
texts: []
};
export default HelloWorld;
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';
const texts = [
'Bonjour tout le monde!',
'Ça va bien?'
];
ReactDOM.render(
<HelloWorld texts={texts}/>,
document.getElementById('app')
);
src/main/index.jsx
src/main/HelloWorld.jsx
Full Sample
(true-start)
package.json
{
"dependencies": {
"react": "16.4.1",
"react-dom": "16.4.1"
},
"devDependencies": {
"@babel/core": "7.0.0-beta.51",
"@babel/preset-react": "7.0.0-beta.51",
"babel-loader": "8.0.0-beta.4",
"webpack": "4.12.2",
"webpack-cli": "3.0.8",
"webpack-dev-server": "3.1.5"
},
"license": "MIT",
"main": "src/main/index.jsx",
"name": "true-start",
"scripts": {
"start": "webpack-dev-server",
"test": "exit 0"
},
"version": "1.0.0"
}
package.json
webpack.config.js
const pkg = require('./package.json');
const webpack = require('webpack');
module.exports = {
devServer: {
open: true,
port: 8080,
publicPath: '/dist/',
},
entry: {
[pkg.name]: `${__dirname}/${pkg.main}`,
},
mode: 'development',
module: {
rules: [
{
test: /.jsx?$/,
exclude: /(bower_components|node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
}
]
},
output: {
filename: `[name].bundle.js`,
path: `${__dirname}/dist`,
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
resolve: {
extensions: ['.js', '.jsx'],
},
};
webpack.config.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>HTML5</title>
</head>
<body>
<div id="app"></div>
<script
src="dist/true-start.bundle.js"></script>
</body>
</html>
index.html
src/main/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
const HelloWorld = () => <h1>Hello, World!</h1>;
ReactDOM.render(
<HelloWorld/>,
document.getElementById('app')
);
src/main/index.jsx

More Related Content

What's hot (20)

PPTX
Angular beans
Bessem Hmidi
 
PDF
EWD 3 Training Course Part 41: Building a React.js application with QEWD, Part 5
Rob Tweed
 
PDF
AngularJS Project Setup step-by- step guide - RapidValue Solutions
RapidValue
 
PDF
An Emoji Introduction to React Native (Panagiotis Vourtsis, Senior Front End ...
GreeceJS
 
PPTX
React render props
Saikat Samanta
 
PDF
React & Redux
Craig Jolicoeur
 
PDF
Managing user's data with Spring Session
David Gómez García
 
PPT
Migraine Drupal - syncing your staging and live sites
drupalindia
 
PDF
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4
Rob Tweed
 
PDF
Intro to ReactJS
Harvard Web Working Group
 
PDF
Introduction to React & Redux
Boris Dinkevich
 
PPTX
Spring Boot and REST API
07.pallav
 
PDF
JavaFX – 10 things I love about you
Alexander Casall
 
PDF
Angular 2 introduction
Christoffer Noring
 
PDF
REST APIs with Spring
Joshua Long
 
PPTX
ReactJS for Beginners
Oswald Campesato
 
KEY
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Paulo Ragonha
 
PDF
Oleksandr Tolstykh
CodeFest
 
PDF
Vuejs testing
Greg TAPPERO
 
PDF
Making the Most of Your Gradle Build
Andres Almiray
 
Angular beans
Bessem Hmidi
 
EWD 3 Training Course Part 41: Building a React.js application with QEWD, Part 5
Rob Tweed
 
AngularJS Project Setup step-by- step guide - RapidValue Solutions
RapidValue
 
An Emoji Introduction to React Native (Panagiotis Vourtsis, Senior Front End ...
GreeceJS
 
React render props
Saikat Samanta
 
React & Redux
Craig Jolicoeur
 
Managing user's data with Spring Session
David Gómez García
 
Migraine Drupal - syncing your staging and live sites
drupalindia
 
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4
Rob Tweed
 
Intro to ReactJS
Harvard Web Working Group
 
Introduction to React & Redux
Boris Dinkevich
 
Spring Boot and REST API
07.pallav
 
JavaFX – 10 things I love about you
Alexander Casall
 
Angular 2 introduction
Christoffer Noring
 
REST APIs with Spring
Joshua Long
 
ReactJS for Beginners
Oswald Campesato
 
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Paulo Ragonha
 
Oleksandr Tolstykh
CodeFest
 
Vuejs testing
Greg TAPPERO
 
Making the Most of Your Gradle Build
Andres Almiray
 

Similar to Getting Started with React v16 (20)

PDF
react.pdf
yihunie2
 
PDF
0900 learning-react
RohitYadav696
 
PDF
React && React Native workshop
Stacy Goh
 
PDF
Server side rendering with React and Symfony
Ignacio Martín
 
PDF
Creating a full stack web app with python, npm, webpack and react
Angela Kristine Juvet Branaes
 
PPTX
Build web apps with react js
dhanushkacnd
 
PDF
React js
Rajesh Kolla
 
PPTX
React october2017
David Greenfield
 
PDF
Introduction to React JS
Bethmi Gunasekara
 
PDF
30 days-of-react-ebook-fullstackio
imdurgesh
 
PDF
Introduction to React for Frontend Developers
Sergio Nakamura
 
PDF
Welcome to React & Flux !
Ritesh Kumar
 
PPTX
React.js - The Dawn of Virtual DOM
Jimit Shah
 
PDF
Learn react by Etietop Demas
Etietop Demas
 
PDF
Using React, Redux and Saga with Lottoland APIs
Mihail Gaberov
 
PDF
ReactJS for Programmers
David Rodenas
 
PDF
Integrating React.js with PHP projects
Ignacio Martín
 
PPT
ReactJS.ppt
MOMEKEMKUEFOUETDUREL
 
PDF
Full Stack React Workshop [CSSC x GDSC]
GDSC UofT Mississauga
 
react.pdf
yihunie2
 
0900 learning-react
RohitYadav696
 
React && React Native workshop
Stacy Goh
 
Server side rendering with React and Symfony
Ignacio Martín
 
Creating a full stack web app with python, npm, webpack and react
Angela Kristine Juvet Branaes
 
Build web apps with react js
dhanushkacnd
 
React js
Rajesh Kolla
 
React october2017
David Greenfield
 
Introduction to React JS
Bethmi Gunasekara
 
30 days-of-react-ebook-fullstackio
imdurgesh
 
Introduction to React for Frontend Developers
Sergio Nakamura
 
Welcome to React & Flux !
Ritesh Kumar
 
React.js - The Dawn of Virtual DOM
Jimit Shah
 
Learn react by Etietop Demas
Etietop Demas
 
Using React, Redux and Saga with Lottoland APIs
Mihail Gaberov
 
ReactJS for Programmers
David Rodenas
 
Integrating React.js with PHP projects
Ignacio Martín
 
Full Stack React Workshop [CSSC x GDSC]
GDSC UofT Mississauga
 
Ad

Recently uploaded (20)

PPTX
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
PPTX
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
PDF
How do you fast track Agentic automation use cases discovery?
DianaGray10
 
PPTX
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
PDF
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
PDF
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PDF
AI Agents in the Cloud: The Rise of Agentic Cloud Architecture
Lilly Gracia
 
PDF
NASA A Researcher’s Guide to International Space Station : Physical Sciences ...
Dr. PANKAJ DHUSSA
 
PDF
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
PDF
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
PPT
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
DOCX
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
PDF
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
PDF
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
DOCX
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
PPTX
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
PPTX
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
PDF
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PDF
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
How do you fast track Agentic automation use cases discovery?
DianaGray10
 
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
AI Agents in the Cloud: The Rise of Agentic Cloud Architecture
Lilly Gracia
 
NASA A Researcher’s Guide to International Space Station : Physical Sciences ...
Dr. PANKAJ DHUSSA
 
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
Ad

Getting Started with React v16

  • 2. Hello. Benny Neugebauer, Web Team Lead at Wire & Consultant at DCI https://github.com/bennyn https://twitter.com/apfelbenny https://stackoverflow.com/users/451634/
  • 4. A React app written in less than 10 lines of code... Hello, World! Key Players: 1. React (library for building user interfaces) 2. React DOM (surface providing DOM access) 3. JSX (syntax extension to JavaScript) 4. Host element (<div id=”app”></div>) import React from 'react'; import ReactDOM from 'react-dom'; const HelloWorld = () => <h1>Hello, World!</h1>; ReactDOM.render( <HelloWorld/>, document.getElementById('app') ); src/main/index.jsx
  • 5. A painter is only as good as his brush... Toolchain 1. yarn add react 2. yarn add react-dom 3. yarn add --dev webpack 4. yarn add --dev webpack-cli 5. webpack.config.js First wave of dependencies: { "dependencies": { "react": "16.4.1", "react-dom": "16.4.1" }, "devDependencies": { "webpack": "4.12.2", "webpack-cli": "3.0.8" }, "license": "MIT", "main": "src/main/index.jsx", "name": "true-start", "version": "1.0.0" } package.json
  • 6. If you have done everything right, it will fail… (when running “npx webpack”) Webpack Config const pkg = require('./package.json'); module.exports = { entry: { [pkg.name]: `${__dirname}/${pkg.main}`, }, mode: 'development', output: { filename: `[name].bundle.js`, path: `${__dirname}/dist`, }, resolve: { extensions: ['.js', '.jsx'], }, }; webpack.config.js
  • 7. Only the sky is the limit! Babel 1. yarn add --dev babel-loader 2. yarn add --dev babel-preset-react 3. yarn add --dev babel-core Second wave of dependencies: If you are an early bird... 1. yarn add --dev babel-loader@next 2. yarn add --dev @babel/preset-react 3. yarn add --dev @babel/core
  • 8. Chirp, chirp! const pkg = require('./package.json'); module.exports = { entry: { [pkg.name]: `${__dirname}/${pkg.main}`, }, mode: 'development', module: { rules: [ { test: /.jsx?$/, exclude: /(bower_components|node_modules)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } } } ] }, output: { filename: `[name].bundle.js`, path: `${__dirname}/dist`, }, resolve: { extensions: ['.js', '.jsx'], }, }; Babel loader makes use of a Preset that contains plugins for React & JSX. The Preset requires a Babel core, because nothing works without the core. To make the components play nicely together, we need to supply a “rules” item for webpack’s “module” configuration. Example is based on: 1. babel-loader (8.0.0-beta.4) 2. @babel/preset-react (7.0.0-beta.51) 3. @babel/core (7.0.0-beta.51) Tip: The “options” can go into a “.babelrc” file. webpack.config.js
  • 9. Release the Kraken! HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>HTML5</title> </head> <body> <div id="app"></div> <script src="dist/true-start.bundle.js"></script> </body> </html> index.html
  • 10. React (JS & JSX) Webpack babel-loader @babel/preset-react @babel/core JS loaded in HTML
  • 11. Use “webpack-dev-server”, a development server that provides live reloading. One more thing... const pkg = require('./package.json'); const webpack = require('webpack'); module.exports = { devServer: { open: true, port: 8080, publicPath: '/dist/', }, [...], plugins: [ new webpack.HotModuleReplacementPlugin() ], [...], }; 1. yarn add --dev webpack-dev-server 1. Update webpack.config.js 1. Add “start” script to “package.json” with command “webpack-dev-server” Installation: webpack.config.js Alternative: 1. Run webpack in watch mode with “npx webpack -w”
  • 12. Now we are talking! Rewrite of our stateless functional component (SFC) to a Class Component. Create a Component import React from 'react'; class HelloWorld extends React.Component { constructor(props) { super(props); } render() { return <h1>Hello, World!</h1>; } } export default HelloWorld; import React from 'react'; import ReactDOM from 'react-dom'; import HelloWorld from './HelloWorld'; ReactDOM.render( <HelloWorld/>, document.getElementById('app') ); src/main/index.jsx src/main/HelloWorld.jsx
  • 13. Rendering dynamic content at ease! Render Props import React from 'react'; class HelloWorld extends React.Component { constructor(props) { super(props); } render() { return <h1>{this.props.text}</h1>; } } HelloWorld.defaultProps = { text: 'Placeholder' }; export default HelloWorld; import React from 'react'; import ReactDOM from 'react-dom'; import HelloWorld from './HelloWorld'; ReactDOM.render(<HelloWorld text={Bonjour tout le monde!'}/>, document.getElementById('app') ); src/main/index.jsx src/main/HelloWorld.jsx
  • 14. Props can be used to set the initial state. Everything further than that should be done using “setState”. Changing the state import React from 'react'; class HelloWorld extends React.Component { constructor(props) { super(props); this.state = { text: props.text }; } appendText(moreText) { let {text} = this.state; text = `${text} ${moreText}`; this.setState({ text }); } render() { return <h1>{this.state.text}</h1>; } } HelloWorld.defaultProps = { text: 'Placeholder' }; export default HelloWorld; import React from 'react'; import ReactDOM from 'react-dom'; import HelloWorld from './HelloWorld'; const component = ReactDOM.render(<HelloWorld text={Bonjour tout le monde!'}/>, document.getElementById('app') ); component.appendText('Ça va bien?'); src/main/index.jsx src/main/HelloWorld.jsx
  • 15. We can refactor the previous example into a component that accepts an array of strings and outputs a paragraph for each item. Render many things import React from 'react'; class HelloWorld extends React.Component { constructor(props) { super(props); this.state = { texts: props.texts }; } render() { return ( <div> { this.state.texts.map((text, index) => <p key={index}>{text}</p>) } </div>); } } HelloWorld.defaultProps = { texts: [] }; export default HelloWorld; import React from 'react'; import ReactDOM from 'react-dom'; import HelloWorld from './HelloWorld'; const texts = [ 'Bonjour tout le monde!', 'Ça va bien?' ]; ReactDOM.render( <HelloWorld texts={texts}/>, document.getElementById('app') ); src/main/index.jsx src/main/HelloWorld.jsx
  • 17. package.json { "dependencies": { "react": "16.4.1", "react-dom": "16.4.1" }, "devDependencies": { "@babel/core": "7.0.0-beta.51", "@babel/preset-react": "7.0.0-beta.51", "babel-loader": "8.0.0-beta.4", "webpack": "4.12.2", "webpack-cli": "3.0.8", "webpack-dev-server": "3.1.5" }, "license": "MIT", "main": "src/main/index.jsx", "name": "true-start", "scripts": { "start": "webpack-dev-server", "test": "exit 0" }, "version": "1.0.0" } package.json
  • 18. webpack.config.js const pkg = require('./package.json'); const webpack = require('webpack'); module.exports = { devServer: { open: true, port: 8080, publicPath: '/dist/', }, entry: { [pkg.name]: `${__dirname}/${pkg.main}`, }, mode: 'development', module: { rules: [ { test: /.jsx?$/, exclude: /(bower_components|node_modules)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } } } ] }, output: { filename: `[name].bundle.js`, path: `${__dirname}/dist`, }, plugins: [ new webpack.HotModuleReplacementPlugin() ], resolve: { extensions: ['.js', '.jsx'], }, }; webpack.config.js
  • 19. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>HTML5</title> </head> <body> <div id="app"></div> <script src="dist/true-start.bundle.js"></script> </body> </html> index.html
  • 20. src/main/index.jsx import React from 'react'; import ReactDOM from 'react-dom'; const HelloWorld = () => <h1>Hello, World!</h1>; ReactDOM.render( <HelloWorld/>, document.getElementById('app') ); src/main/index.jsx