This document discusses React and Redux. It begins with an introduction of the presenter Lars Thorup. It then provides an overview of an MVP architecture using React, Redux, and other technologies. It includes diagrams of the React and Redux architectures. It discusses React components, virtual DOM, and using D3 with React. It also covers the motivations and overview of Redux, including examples of state shape and auth reducers. It concludes with a discussion of Redux design patterns and testability and introduces the create-react-app tool.

1. React and Redux
Lars Thorup, Triggerz
August, 2016

2. Lars Thorup
● Software developer/architect
● JavaScript, C#
● Test Driven Development
● Coach
● Agile engineering practices
● Founder
● BestBrains
● ZeaLake
● Triggerz
● @larsthorup

3. Agenda
● Our current MVP architecture
● React
● Diagram
● Demo: <Signin />
● D3
● Discussion
● Redux
● Diagram
● Code
● Discussion
● create-react-app

4. MVP architecture
JavaScript
React
Redux
Ramda
Webpack
CSS
Node.js
Restify
Knex
Cryptex
Co
PostgreSQL
● Demo!
Ajax &
WebSockets
SQL

5. React - Diagram

6. React - Demo
<Signin signingIn={({account}) => alert(account)}/>
// ----
render () {
return (
<form onSubmit={this.onSubmit}>
<input type="text" onChange={this.onChange}/>
<button type="submit">Sign In</button>
</form>
);
}
https://github.com/larsthorup/react-signin-sample

7. React - Discussion
● Mandatory
● Virtual DOM - decoupled from browser DOM
● Avoid
● HTML, browser DOM, jQueue, D3?
● Optional
● ES6
● JSX
● Webpack
● Stateful and stateless components
● Server-side rendering
● Routing

8. React - D3
● Competing DOM
manipulation
● We use plain SVG
● And CSS transforms
● Example: gauge.js
● A react-friendly D3?

9. Redux - Motivation
● Distributed state ● Centralized state

10. Redux - Overview

11. Redux - Examples
● State shape
● Auth reducers
● Auth saga: signingIn

12. Redux - Discussion
● Design patterns
● command
● singleton
● same data flow as server side pages before Ajax!
● Modularity
● State shape
● Testability
● Higher-order functions
● connect(mapStateToProps)(Component)

13. create-react-app
$ npm install -g create-react-app
$ create-react-app my-first-app # takes 5 min(!)
$ cd my-first-app
$ npm start
# ToDo: hack my-first-app
# https://github.com/larsthorup/react-signin-sample

14. Questions!