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

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

"How do I get started with React?"

ES6/ES2015

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!

Questions?

React Docs

Dan's Redux Vids

React Router

CSS Tricks React Article