React.js and Friends


DDD Scotland, Feb '18

Paul Aikman

Glasgow, UK


What We'll Cover

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?

"Why choose React?"

Choosing a Direction

  • Gradual shift from Server > Client side
  • Angular 1.x 'was fine', but 2.x very different...
  • To replace, looked at:
    • Angular 2
    • Vue.js
    • React.js
    • "Vanilla.js"

Betting on React

"Dog Fooded": Facebook, Instagram, WhatsApp use React in production.

Performant: Virtual DOM. Pretty quick.

Community Spirit: Loads of community docs & projects supporting React.

"What should I know about React?"



Props, Events & State


  • Self-contained, reusable building blocks of your application
  • Receive data from rest of app using 'Props', have internal 'State'
  • UI Logic + UI Description in one place


  • HTML-like markup
  • Combines Templating with plain ol' JS
  • Can be translated to JS on the fly, but typically compiled

Hello, React!

                        class Hello extends React.Component {
                            render() {
                                return ( 
                                    <h1 className="title">Hello, DDD Scotland!</h1>
                        ReactDOM.render(<Hello/>, document.getElementById('root'));
Codepen Demo

Composing Components

                        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 (


); } } 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() {
                            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 (


); } }
Codepen Demo

"Lightbulb Demo"

"Why use libraries like Redux & Router?"

What is Redux and why do I need it?

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?

CSS Tricks Article
CSS Tricks Article
CSS Tricks Article

Redux Core Concepts

  • Store: Contains all the state within your application.
  • Actions: Handle requests to/from stores
  • Reducers: Apply the requested action to the state

What is React Router and why do I need it?

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!

A Simple Router Example

                                <Route exact path="/" component={Home} />
                                <Route path="/category/:categoryId" component={Category} />
                                <Route path="/login" component={Login} />
                                <Route path="/products" component={Products} />

"How do I get started with React?"


Learn ES6 (via BabelJS)

Compiling React Apps

So. Many. Options.

Integration with existing environment can be tricky

Build up slowly, add only what you need!

Just starting out?

there is a better way...

Hello... Crete React App

"Tips for those about to React?"

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'!

Phew! Thank You!


React Docs

Dan's Redux Vids

React Router

CSS Tricks React Article