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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Getting Started with React v16

Similar to Getting Started with React v16 (20)

Recently uploaded

Recently uploaded (20)

Getting Started with React v16