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
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
PPTX
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
PPTX
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
PPTX
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
PPTX
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
PPTX
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
PDF
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PDF
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
PDF
AI Agents in the Cloud: The Rise of Agentic Cloud Architecture
Lilly Gracia
 
PDF
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
PPTX
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
PDF
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
PDF
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
PDF
UiPath DevConnect 2025: Agentic Automation Community User Group Meeting
DianaGray10
 
PDF
“Computer Vision at Sea: Automated Fish Tracking for Sustainable Fishing,” a ...
Edge AI and Vision Alliance
 
PDF
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
PPTX
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
PDF
Future-Proof or Fall Behind? 10 Tech Trends You Can’t Afford to Ignore in 2025
DIGITALCONFEX
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
AI Agents in the Cloud: The Rise of Agentic Cloud Architecture
Lilly Gracia
 
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
UiPath DevConnect 2025: Agentic Automation Community User Group Meeting
DianaGray10
 
“Computer Vision at Sea: Automated Fish Tracking for Sustainable Fishing,” a ...
Edge AI and Vision Alliance
 
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
Future-Proof or Fall Behind? 10 Tech Trends You Can’t Afford to Ignore in 2025
DIGITALCONFEX
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
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