Getting Started with React v16

Hello.
Benny Neugebauer,
Web Team Lead at Wire & Consultant at DCI
https://github.com/bennyn
https://twitter.com/apfelbenny
https://stackoverflow.com/users/451634/

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!
module.exports = {
entry: {
},
module: {
rules: [
{
test: /.jsx?$/,
exclude: /(bower_components|node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
}
]
},
output: {
},
resolve: {
},
};
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 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
class HelloWorld extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h1>Hello, World!</h1>;
}
}
export default HelloWorld;
import HelloWorld from './HelloWorld';
ReactDOM.render(
<HelloWorld/>,
);
src/main/index.jsx
src/main/HelloWorld.jsx

Rendering dynamic content at ease!
Render Props
super(props);
}
render() {
return <h1>{this.props.text}</h1>;
}
}
HelloWorld.defaultProps = {
text: 'Placeholder'
};
ReactDOM.render(<HelloWorld
text={Bonjour tout le monde!'}/>,
);
src/main/index.jsx

Props can be used to set the initial state.
Everything further than that should be done
using “setState”.
Changing the state
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>;
}
}
text: 'Placeholder'
};
const component =
ReactDOM.render(<HelloWorld
text={Bonjour tout le monde!'}/>,
);
component.appendText('Ça va bien?');
src/main/index.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
super(props);
this.state = {
texts: props.texts
};
}
render() {
return (
<div>
{
this.state.texts.map((text, index) =>
<p key={index}>{text}</p>)
}
</div>);
}
}
texts: []
};
const texts = [
'Bonjour tout le monde!',
'Ça va bien?'
];
ReactDOM.render(
<HelloWorld texts={texts}/>,
);
src/main/index.jsx

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 webpack = require('webpack');
module.exports = {
devServer: {
open: true,
port: 8080,
publicPath: '/dist/',
},
entry: {
},
module: {
rules: [
{
test: /.jsx?$/,
exclude: /(bower_components|node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
}
]
},
output: {
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
resolve: {
},
};
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
const HelloWorld = () => <h1>Hello, World!</h1>;
ReactDOM.render(
<HelloWorld/>,
);
src/main/index.jsx

Getting Started with React v16

More Related Content

What's hot (20)

Similar to Getting Started with React v16 (20)

Recently uploaded (20)

Getting Started with React v16