React From Scratch. Cory House. Go here and get bitnative.com

Transcription

1 React From Scratch Go here and get setup!github.com/coryhouse/fluent2016 Finished demo: github.com/coryhouse/fluent2016complete Cory bitnative.com

2 Questions: Plan to code along with me? Focus: Code or concepts? Atom or Webstorm? Light or dark theme? Breaks?

3 To code along with me: git clone

4 Start github.com/coryhouse/fluent2016 Finish github.com/coryhouse/fluent2016complete Code snippets bit.ly/fluent2016reactplan

5 A World of Components

6 They call it React for a reason.

7

8

9

10

11

12 Innovation JSX Virtual DOM Isomorphic Rendering Unidirectional Flows

13 Try to keep an open mind.

14 HTML should be a projection of app state, not a source of truth.

15 JavaScript and HTML belong in the same file.

16 Unidirectional flow. No two-way binding.

17 Inline styles can be good.

18 All Variables Should be Global.

19 Battle Proven

20 Here s the Plan Morning: React Afternoon: React exercises Development environment Testing Redux

21 Environment Setup

22 github.com/coryhouse/fluent2016 Everyone done this?

23 Don t Let This Scare You You don t need all this tech to work with React and Flux.

24 Our Goal Just type npm start, get all this Compile React JSX Lint JSX and JS via ESLint Bundle JS and CSS files Migrate the built app to the dist folder Run a dev webserver Open the browser at your dev URL Reload the browser upon save

25 Core Technologies Server-side JavaScript Node packages in the browser Components Routing Unidirectional data flows Task runner

26 Node Server-side JS Uses the V8 Engine Includes npm package manager

27 npm: Node s Package Manager.NET Ruby Java Python PHP The Web Node

28 CommonJS Pattern //1. Get reference to dependency var dependency = require('/path/to/file'); //2. Declare module var MyModule = { //code here } //3. Expose to others module.exports = MyModule;

29 Webpack Use Node modules in the browser Bundle dependencies

30 React Component Library Simple composition Utilizes virtual DOM Can render on client and server

31 Redux Uni-directional data flows

32 npm Scripts Run tasks Rich plugin ecosystem Stream-based

33 What about ES2015? ES5 Approved in 2009 The JS you already know Excellent browser support ES2015 (ES6) Approved June 2015 Widespread browser support Can transpile to ES5 via Babel

34 What about ES2015?

35 Wrap Up Node & npm Packages React Components Redux Data flows Webpack Bundler Npm Scripts Automationand builds

36 JSX

37 This baby is clearly adorable. Imagine an ugly baby here.

38

39

40 JSX HTML in JavaScript Compiles to JavaScript Differences: classname, htmlfor Optional

41 JSX Compiles to JS <h1 color="red">heading here</h1> React.createElement("h1", {color: "red"}, "Heading here")

42

43 What about separation of concerns?

44 JS in HTML <div ng-repeat="user in users"> {{#each user in users}} data-bind="foreach: users"> HTML in JS {users.map(createuserrow)}

45

46 Must stay in sync. No explicit interface!

47 Separating intertwined concerns hinders debugging

48 Compile-time error checking FTW!

49

50 M V C

51 M V C

52 JSX Friendly Editors

53 Virtual DOM

54

55 Why Virtual DOM? Updating the DOM is expensive

56 The Virtual DOM Without Virtual DOM Blindly update DOM using new state. With Virtual DOM Compare DOM s current state to desired new state. Update the DOM in the most efficient way.

57 Removing a Row Redraws entire table Removes the row

58 Hard to argue with the results

59 Performance

60 Performance

61

62 Performance: Go Even Faster shouldcomponentupdate PureRenderMixin + immutability

63 Meh, my app is fast enough.

64 Half second delay -> 20% drop in traffic. Delayed in increments of 100 milliseconds Even very small delays resulted in substantial drops in revenue.

65

66 Virtual DOM: More Than Performance Synthetic Events Isomorphic Support React Native Hot Reloading

67 Let s code our first components!

68 Here s the Plan Time to start coding! Create our first React components Setup custom routing Create centralized layout Discuss naming conventions

69 Naming React Files ChatApp.react.js ChatApp.jsx chatapp.js

70 Which Extension?.js All IDEs will at least highlight JS Default application/icon Require statements assume JS Doesn t distinguish JSX from JS Lies about contents May confuse IDE highlighting.jsx Some IDEs won t highlight any syntax No default application/icon Must use.jsx extension to require Distinguishes JS from JSX Clarifies content IDE knows to parse & color as JSX

71 React Component Approaches

72 Here s the Plan React component creation approaches Container vs Presentational Components

73 Four+ Ways to Create React Components?!

74 Ways to Create Components ES5 createclass ES6 class ES5 stateless function ES6 stateless function Many more

75 var HelloWorld = React.createClass({ render: function () { return ( <h1>hello World</h1> ); } }); ES5 Class Component

76 ES6 Class Component class HelloWorld extends React.Component { constructor(props) { super(props); } } render() { return ( <h1>hello World</h1> ); }

77 React in ES6 No autobind PropTypes declared separately Default props declared separately Set initial state in constructor

78 ES5 Stateless Functional Component var HelloWorld = function(props) { return ( <h1>hello World</h1> ); });

79 ES6 Stateless Functional Component const HelloWorld = (props) => { return ( <h1>hello World</h1> ); });

80

81 Stateless Functional Components: 9 Benefits No class needed Avoid `this` keyword Enforced best practices High signal-to-noise ratio Enhanced code completion / intellisense Bloated components are obvious Easy to understand Easy to test Performance

82 Use stateless functional components when possible.

83 When Should I Use Each? Class Component State Refs Lifecycle methods Child functions (for performance) Stateless Components Everywhere else

84 Other Ways to Create Components Object.create Mixins Parasitic Components StampIt More info: bit.ly/react-define-component

85 Container vs Presentation Components

86 Container Presentation Most components Little to no markup Pass data and actions down Knows about Redux Often stateful Nearly all markup Receive data and actions via props Doesn t know about Redux Typically functional components

87 Alternative Jargon Container Smart Stateful Controller View Presentational Dumb Stateless View

88 When you notice that some components don t use props they receive but merely forward them down it s a good time to introduce some container components. Dan Abramov

89 Wrap up ES5 createclass ES6 Class ES5 Stateless Function ES6 Stateless Function Many more! Container vs Presentation Components Next up: Let s start building!

90 React Lifecycle

91 Here s the Plan Props State Dynamic child components Lifecycle functions Demo time! - Mock API - Dynamic components

92 Props and State Props Look like HTML attributes, but immutable this.props.username State Holds mutable state this.state.username

93 getinitialstate Initial State

94 getdefaultprops Default Prop Values

95 Lifecycle Methods componentwillmount componentdidmount componentwillreceiveprops shouldcomponentupdate componentwillupdate componentdidupdate componentwillunmount

96 componentwillmount When Before initial render, both client and server Why Good spot to set initial state

97 componentdidmount When After render Why Access DOM, integrate with frameworks, set timers, AJAX requests

98 componentwillreceiveprops When When receiving new props. Not called on initial render. Why Set state before a render.

99 shouldcomponentupdate When Before render when new props or state are being received. Not called on initial render. Why Performance. Return false to void unnecessary re-renders.

100 componentwillupdate When Immediately before rendering when new props or state are being received. Not called on initial render. Why Prepare for an update

101 componentdidupdate When After component's updates are flushed to the DOM. Not called for the initial render. Why Work with the DOM after an update

102 componentwillunmount When Immediately before component is removed from the DOM Why Cleanup

103 Keys for Dynamic Children Add a key to dynamic child elements <tr key={author.id}>

104 Summary Props State Lifecycle Pass data to child components Data in controller view Handle bootstrapping and third party integrations

105 Composing Components

106 Here s the Plan Our focus: Composition Controller views Prop validation via PropTypes Mixins

107 Composition

108 Controller Views Top level component Sets props on children Interacts with stores

109 Controller Views

110 Prop Validation proptypes: { author: onsave: validate: errors: haserrors: }, React.PropTypes.object.isRequired, React.PropTypes.func.isRequired, React.PropTypes.func.isRequired, React.PropTypes.object, React.PropTypes.func.isRequired,

111 Prop Validation optionalarray: React.PropTypes.array, optionalbool: React.PropTypes.bool, optionalfunc: React.PropTypes.func, optionalnumber: React.PropTypes.number, optionalobject: React.PropTypes.object, optionalstring: React.PropTypes.string,

112 Development vs Production Mode Minified version is for production.

113 Prop Validation Declare expected property types

114 Summary Controller Views Smart components that pass data down via props PropTypes Validate props

115 Testing and Continuous Integration Cory bitnative.com

116 Here s the Plan JavaScript testing styles 6 key testing decisions Configure testing and write test Continuous integration

117 JavaScript Testing Styles Style Unit Integration UI Focus Single function or module Interactions between modules Automate interactions with UI

118 Unit Testing Decisions Framework Assertion Library Helper Libraries Where to run tests Where to place tests When to run tests

119 Decision #1: Testing Framework

120 Testing Frameworks Mocha Jasmine Tape QUnit AVA Jest

121 It s Like Choosing a Gym The important part is showing up.

122 Right Answer Wrong Answer Woah, decision fatigue! I ll just keep coding and praying. Any of these!

123 Decision #2: Assertion Library

124 What s An Assertion? Declare what you expect expect(2+2).to.equal(4) assert(2+2).equals(4)

125 Assertion Libraries

126 Decision #3: Helper Library

127 JSDOM Simulate the browser s DOM Run DOM-related tests without a browser

128 Cheerio jquery for the server Query virtual DOM using jquery selectors

129 Decision #4: Where to Run Tests

130 Where to Run Tests Browser - Karma, Testem Headless Browser - PhantomJS In-memory DOM - JSDOM

131 Decision #5: Where do test files belong?

132 Where Do Test Files Belong? Centralized Less noise in src folder Deployment confusion Inertia Alongside Easy imports Clear visibility Convenient to open No recreating folder structure Easy file moves Path to file under test is always./filename // file.test.js import file from '../../src/long/path' // file.test.js import file from './file'

133 Naming Test Files

134 Decision #6: When should tests run?

135 Unit Tests Should Run When You Hit Save Rapid feedback Facilitates TDD Automatic = Low friction Increases test visibility

136 But Cory, my tests are too slow! - You, my viewer with slow tests

137 Unit Tests Test a small unit Often single function Fast Run upon save Integration Tests Test multiple units Often involves clicking and waiting Slow Often run on demand, or in QA

138 Here s the Plan Framework Mocha Assertion Library Chai Helper Libraries JSDOM Where to run tests Where to place tests When to run tests Node Alongside Upon save

139 Demo Configure automated testing

140 Continuous Integration

141 Weird. Works on my machine. - Developer without a CI server

142 Why CI? Forgot to commit new file Forgot to update package.json Commit doesn t run cross-platform Node version conflicts Bad merge Didn t run tests Catch mistakes quickly

143 What Does a CI Server Do? Run Automated build Run your tests Check code coverage Automate deployment

144 Continuous Integration Travis Appveyor Jenkins

145 Demo Set up Continuous Integration

146 Testing frameworks - Mocha, Jasmine, AVA, Tape, Jest Wrap Up Assertion libraries - Chai, Expect Helper libraries - JSDOM, Cheerio Where to run tests - Browser, Headless, In memory Where to place tests, and when to run Continuous Integration - Travis CI, Appveyor, Jenkins Next up: HTTP and Mock APIs

147 Demo Production build process - Lint and runs tests - Bundle and minify JS and CSS - Generate JS and CSS sourcemaps - Exclude dev-specific concerns - Build React in production mode - Open prod build in browser

148 Production Builds Matter Essentials 64K! Prod build 121K Dev build 4.8MB Drop babel-polyfill, toastr, jquery, Bootstrap

149 Flux

150 What is Flux? A pattern Centralized dispatcher Unidrectional data flows

151 They call it Flux for a reason too.

152 Flux Implementations Facebook s Flux Alt Reflux Flummox Marty Fluxxor Delorean Redux NuclearJS Fluxible

153 Good Luck Debugging This

154 Two-way Binding vs Unidirectional Action Two-way binding Viewmodel Unidrectional Dispatcher View Store React View

155 Flux: 3 Parts Action Delete User Dispatcher Notify everyone who cares Store Hold app state and logic React View

156 Actions Action Dispatcher Store Encapsulate events Triggered by user interactions and server Passed to dispatcher React View

157 Actions Action Payload has type and data Dispatcher Store React View { } type: USER_SAVED data: { firstname: Cory, lastname: House; }

158 Dispatcher Action Dispatcher Store React View Central Hub There s only one Holds list of callbacks Broadcasts payload to registered callbacks Sends actions to stores

159 Constants Keeps things organized Provides high level view of what the app actually does

160 Store Action Dispatcher Store React View Holds app state, logic, data retrieval Not a model - Contains models. One, or many Registers callbacks with dispatcher Uses Node s EventEmitter

161 The Structure of a Store Every store has these common traits (aka interface) 1. Extend EventEmitter 2. addchangelistener and removechangelistener 3. emitchange

162 Dispatcher Payload { } type: USER_SAVED data: { firstname: Cory, lastname: House; } User Store Address Store Product Store

163 As an application grows, the dispatcher becomes more vital, as it can be used to manage dependencies between the stores by invoking the registered callbacks in a specific order. Stores can declaratively wait for other stores to finish updating, and then update themselves accordingly. Flux Documentation

164 I usually view ActionCreators as something that is used for writes to the server. For example, the user added a new message by clicking the Send button, so the responsible view calls into ActionCreator. On the other hand, if a store needs to fetch data from the server, then that doesn't have to use an ActionCreator. Instead, the store can directly hit an endpoint to load its data, and then direct the response through the dispatcher. Jing Chen, Facebook

165 Controller Views Action Dispatcher Store Top level component Interacts with Stores Holds data in state Sends data to children as props React View

166 Action User Web clicked API Save User button Send Action Payload Payload sent to dispatcher Payload: { type: USER_SAVED data: { firstname: 'Cory', lastname: 'House'; } } Dispatcher Send Action Payload Store Checks for registered callbacks Sends payload to all registered callbacks Receives payload Updates storage and fires change event React View Store updates and emits change event Receives change event and re-renders

167 A Chat With Flux React Action Dispatcher Store you Hey CourseAction, someone clicked this Save Course button. Thanks React! I registered an action creator with the dispatcher, so the dispatcher should take care of notifying all the stores that care. Let me see who cares about a course being saved. Ah! Looks like the CourseStore has registered a callback with me, so I ll let her know. Hi dispatcher! Thanks for the update! I ll update my data with the payload sent. Then I ll emit an event for the React components that care. React Ooo! Shiny new data from the store! I ll update the UI to reflect this!

168 isdispatching() I m busy dispatching callbacks right now. Flux API register(function callback) Hey dispatcher, run me when actions happen. - Store unregister(string id) Hey dispatcher, stop worrying about this action. - Store waitfor(array<string> ids) Update this store first. Store dispatch(object payload) - Hey dispatcher, tell the stores about this action. - Action

169 Summary Flux is a pattern for unidirectional data flows Actions encapsulate events Dispatcher is a central hub that holds callbacks Stores holds app state Many implementations Action Dispatcher Store React View

170 Let s code Flux!

171 Why Redux?

172 A Silly Number of Flux Flavors Flux Redux Many more

173 Two Most Popular Flavors Flux Redux

174

175 Flux 2015 Redux Faceboo k Hires Redux Creator 2013 React

176 Why Redux? One Store Reduced Boilerplate Isomorphic/Universal Friendly Immutable Store Hot Reloading Time-travel debugging Small

177

178 Flux Redux Boilerplate Magic

179 Intro to Redux Cory reactjsconsulting.com

180 Here s The Plan Do I need Redux? 3 Principles Flux vs Redux Redux Flow

181 Do I need Redux?

182 Vanilla JS jquery React React + Redux Simple No setup Complex Significant setup

183 When Do I Need Redux? Complex data flows Inter-component communication Non-heirarchical data Many actions Same data used in multiple places

184 If you aren t sure if you need it, you don t need it. Pete Hunt on Flux and Redux

185 Store Action: Create User

186 Redux: 3 Principles One immutable store Actions trigger changes Reducers update state

187 Flux vs Redux

188 Data down. Actions up.

189 Flux and Redux: Similarities Unidirectional Flow Actions Stores

190 Redux: New Concepts Reducers Containers Immutability

191 Flux vs Redux Flux Redux Action Action Dispatcher Store Reducers Store React React

192 Flux Stores contain state and change logic Redux Store and change logic are separate

193 Flux Stores contain state and change logic Multiple stores Redux Store and change logic are separate One store

194 Flux Stores contain state and change logic Multiple stores Flat and disconnected stores Redux Store and change logic are separate One store Single store with hierarchical reducers

195 Flux Stores contain state and change logic Multiple stores Flat and disconnected stores Singleton dispatcher Redux Store and change logic are separate One store Single store with hierarchical reducers No dispatcher

196 Flux Stores contain state and change logic Multiple stores Flat and disconnected stores Singleton dispatcher React components subscribe to stores Redux Store and change logic are separate One store Single store with hierarchical reducers No dispatcher Container components utilize connect

197 Flux Stores contain state and change logic Multiple stores Flat and disconnected stores Singleton dispatcher React components subscribe to stores State is mutated Redux Store and change logic are separate One store Single store with hierarchical reducers No dispatcher Container components utilize connect State is immutable

198 Redux Flow

199 Redux Flow Action { type: RATE_COURSE, rating: 5 } Store React Reducers Notified via React-Redux function appreducer(state = defaultstate, action) { switch(action.type) { case RATE_COURSE: //return new state } }

200 If you need Redux, you ll know it. Summary 3 Principles - Immutable Store - Actions trigger changes - Reducers return updated state Flux vs Redux Unidirectional Redux Flow Next up: Actions, stores, and reducers

201 Actions, Store, and Reducers Cory reactjsconsulting.com

202 Here s The Plan Actions Store Immutability Reducers

203 Action Creators ratecourse(rating) { } return { type: RATE_COURSE, rating: rating } Action Action Creator

204 Creating Redux Store let store = createstore(reducer);

205 Redux Store store.dispatch(action) store.subscribe(listener) store.getstate() replacereducer(nextreducer)

206 Immutability

207 Immutability: To change state, return a new object.

208 What s Mutable in JS? Immutable already! Number String, Boolean, Undefined, Null Mutable Objects Arrays Functions

209 state = { Current state name: 'Cory House' role: 'author' } state.role = 'admin'; Traditional App - Mutating state return state;

210 state = { Current state name: 'Cory House' role: 'author' } return state = { name: 'Cory House' Returning new object. Not mutating state! role: 'admin' }

211 Copy Signature Object.assign(target,...sources) Example Object.assign({}, state, {role: 'admin'});

212 Flux State is mutated Redux State is immutable

213 Why Immutability? Clarity Performance Awesome Sauce

214 Immutability = Clarity Huh, who changed that state? The reducer, stupid!

215 Why Immutability? Clarity Performance Awesome sauce

216 Immutability = Performance state = { name: 'Cory House' role: 'author' city: 'Kansas City' state: 'Kansas' country: 'USA' isfunny: 'Rarely' smellsfunny: Often'... Has this changed?

217 if (prevstorestate!== storestate)...

218 Why Immutability? Clarity Performance Awesome Sauce (Amazing debugging)

219 Immutability = AWESOME SAUCE! Time-travel debugging Undo/Redo Turn off individual actions Play interactions back

220 Handling Immutability

221 Handling Immutable State ES6 Object.assign Spread operator Lodash merge Lodash extend Object-assign Immutable.js ES5 Libraries react-addons-update JavaScript's primitives are immutable.

222 How Do I Enforce Immutability? Trust redux-immutable-stateinvariant Immutable.js

223 Reducers

224 What is a Reducer? function myreducer(state, action) { // Return new state based on action passed }

225 (state, action) => state

226 What is a Reducer? function myreducer(state, action) { // Return new state based on action passed } So approachable. So simple. So tasty.

227 What is a Reducer? function myreducer(state, action) { } switch (action.type) { case INCREMENT_COUNTER : state.counter++; return state; } Uh oh, can t do this!

228 What is a Reducer? function myreducer(state, action) { } switch (action.type) { case INCREMENT_COUNTER : return (Object.assign( {}, state, {counter: state.counter + 1} ); }

229 Reducers must be pure.

230 Forbidden in Reducers Mutate arguments Perform side effects Call non-pure functions

231 1 Store. Multiple Reducers.

232 All Reducers Are Called on Each Dispatch { type: DELETE_COURSE, 1 } loadstatu s courses authors New State

233 Reducer = Slice of State loadingstatus authors Store courses

234 Write independent small reducer functions that are each responsible for updates to a specific slice of state. We call this pattern reducer composition. A given action could be handled by all, some, or none of them. Redux FAQ

235 Actions - Represent user intent - Must have a type Summary Store - dispatch, subscribe, getstate Immutability - Just return a new copy Reducers - Must be pure - Multiple per app - Slice of state Next up: Connecting React to Redux

236 Connecting React to Redux Cory reactjsconsulting.com

237 Here s The Plan Container vs Presentation Components React-Redux - Provider - Connect A Chat with Redux

238 Two Component Types Container Focus on how things work Aware of Redux Subscribe to Redux State Dispatch Redux actions Generated by react-redux Presentational Focus on how things look Unaware of Redux Read data from props Invoke callbacks on props Written by hand

239 Connecting React to Redux

240 Action Store Reducers react-redux React

241 React-Redux Provider Connect Attaches app to store Creates container components

242 <Provider store={this.props.store}> <App/> </Provider> React-Redux Provider

243 Connect Wraps our component so it s connected to the Redux store. export default connect( mapstatetoprops, mapdispatchtoprops )(AuthorPage);

244 Flux componentwillmount() { AuthorStore.addChangeListener(this.onChange); } componentwillunmount() { AuthorStore.removeChangeListener(this.onChange); } onchange() { this.setstate({ authors: AuthorStore.getAll() }); }

245 function mapstatetoprops(state, ownprops) { return {appstate: state.authorreducer }; } export default connect( mapstatetoprops, mapdispatchtoprops )(AuthorPage); Redux Benefits: 1. No manual unsubscribe 2. No lifecycle methods required 3. Declare what subset of state you want 4. Enhanced performance for free

246 React-Redux Connect connect(mapstatetoprops, mapdispatchtoprops) What state should I expose as props? function mapstatetoprops(state) { return { appstate: state }; }

247 Memoize for performance Reselect

248 React-Redux Connect connect(mapstatetoprops, mapdispatchtoprops) What actions do I want on props? function mapdispatchtoprops(dispatch) { return { actions: bindactioncreators(actions, dispatch) }; }

249 3 Ways to Handle mapdispatchtoprops this.props.dispatch(loadcourses()); Ignore it. Use dispatch. function mapdispatchtoprops(dispatch) { return { loadcourses: () => { dispatch(loadcourses()); } }; } Manually wrap function mapdispatchtoprops(dispatch) { return { actions: bindactioncreators(actions, dispatch) }; } Use bindactioncreators

250 Option 1: Use Dispatch Directly // In component... this.props.dispatch(loadcourses()) Two downsides 1. Boilerplate 2. Redux concerns in child components

251 Option 2: Wrap Manually function mapdispatchtoprops(dispatch) { return { loadcourses: () => { dispatch(loadcourses()); }, createcourse: (course) => { dispatch(createcourse(course)); }, updatecourse: (course) => { dispatch(updatecourse(course)); } }; } // In component... this.props.loadcourses()

252 Option 3: bindactioncreators function mapdispatchtoprops(dispatch) { return { actions: bindactioncreators(actions, dispatch) }; } // In component: Wraps action creators in dispatch call for you! this.props.actions.loadcourses();

253 A Chat With Redux React Action state. Reducer Hey CourseAction, someone clicked this Save Course button. Thanks React! I will dispatch an action so reducers that care can update Ah, thanks action. I see you passed me the current state and the action to perform. I ll make a new copy of the state and return it. Store Thanks for updating the state reducer. I ll make sure that all connected components are aware. React-Redux Woah, thanks for the new data Mr. Store. I ll now intelligently determine if I should tell React about this change so that it only has to bother with updating the UI when necessary. React Ooo! Shiny new data has been passed down via props from the store! I ll update the UI to reflect this!

254 Container vs Presentation Components Time to code! React-Redux - Provider - Connect mapstatetoprops mapdispatchtoprops Next up: Let s code Redux!

255 Async in Redux Cory reactjsconsulting.com

256 Here s the plan Why a mock API? Async libraries Implement Thunks

257 Why a Mock API? Start before the API exists Independence Backup plan Ultra-fast Test slowness Aids testing Point to the real API later

258 Async Flux Handed in action Redux?

259 Redux Async Libraries redux-thunk redux-promise redux-saga

260 Comparison Thunks Functions Clunky to test Easy to learn Sagas Generators Easy to test Hard to learn

261 export function deleteauthor(authorid) { return dispatch => { return AuthorApi.deleteAuthor(authorId).then(() => { dispatch(deletedauthor(authorid)); }).catch(handleerror); }; } Thunk

262 Demo Let s get thunky.

263 Wrap Up Thunks, Redux-Promise, and Sagas Naming async actions - Consider SUCCESS and ERROR First thunk, complete! Next up: Async writes

264 Final Thoughts

265 The Competition is Responding.

266 Angular 1 Angular 2 React Isomorphic x x Unidirectional x x 1 file per component Virtual DOM x x Hot Reloading Browser Support IE8 IE9 IE9 Pluggable JSX Component Syntax x x x x x

267 Competition Will Eventually Have All This. Yep. But it still won t be React. Lightweight, fast, pluggable, isomorphic components in IE8+.

268 Why React? Fast Pluggable Simple Testable Rich Error Messaging Composable Broad Browser Support Isomorphic Friendly Battle Proven

269 React Downside

270 I recently announced my solution

271 github.com/coryhouse/react-slingshot

272 There s much more to be

273 bitnative.com/handouts

274 Invitation: 5 Minute Retrospective

275 @housecor pluralsight.com speakerrate.com