React.js and Friends

@paulaik

DDD Scotland, Feb '18

Paul Aikman

eqtr.com

Glasgow, UK

@paulaik

https://www.paulaikman.co.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?"

Components

JSX

Props, Events & State

Components

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

JSX

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

Props

                       
                        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

Events

                       
                        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

State

                       
                    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

"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

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

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