DDD Scotland, Feb '18
Paul Aikman
eqtr.com
Glasgow, UK
@paulaik
https://www.paulaikman.co.uk
Why choose React?
What should I know about React?
Why use libraries like Redux & Router?
How do I get started with React?
Tips for those about to React?
"Dog Fooded": Facebook, Instagram, WhatsApp use React in production.
Performant: Virtual DOM. Pretty quick.
Community Spirit: Loads of community docs & projects supporting React.
Components
JSX
Props, Events & State
class Hello extends React.Component {
render() {
return (
<h1 className="title">Hello, DDD Scotland!</h1>
);
}
}
ReactDOM.render(<Hello/>, document.getElementById('root'));
Codepen Demo
class App extends React.Component {
render() {
return (
<Header />
<Content />
<Footer />
)
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
Codepen Demo
class Header extends React.Component {
render() {
return ({this.props.title}
);
}
}
class App extends React.Component {
render() {
return (<Header title="Hello DDD '18!" />);
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
Codepen Demo
class ButtonComponent extends React.Component {
render() {
return ()
}
}
class App extends React.Component {
buttonClick(event) { alert("BUTTON CLICK!"); }
render() {
return (<ButtonComponent onCustomClick={this.buttonClick} />)
}
}
Codepen Demo
class App extends React.Component {
constructor() {
super();
this.state = { headerText: "The time is..." }
setInterval(() => {
var d = new Date();
this.setState({ headerText: "The time is " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()})
}, 1000);
}
render() { return ({this.state.headerText}
); }
}
Codepen Demo
As your App grows, so do your State & Interactions.
Data needs to be shared around the App.
Wouldn't it be nice if we stored some State centrally?
Larger Web Apps are typically more than one screen.
React Router gives us a way to change the view based on URL.
Many options - nested views, URL parameters, etc!
<Router>
<Route exact path="/" component={Home} />
<Route path="/category/:categoryId" component={Category} />
<Route path="/login" component={Login} />
<Route path="/products" component={Products} />
</Router>
So. Many. Options.
Integration with existing environment can be tricky
Build up slowly, add only what you need!
there is a better way...
Your team will be slower (initially).
ES6 = very nice, but very new
React all the things! (Or do we?)
JSX. The great divider.
Browser Devtools are great!
Immutable Data - trickest concept (for me)
Expect things to change... bad & good!
You will pick up 'transferrable skills'!