An introduction to React, an explanation of its different approach to building web interface and the key concepts to help you understand its approach.

1. Introduction to React

2. About Me
● Solutions integrator
at Jumping Bean
– Developer & Trainer
– Social Media
● Twitter @mxc4
● Twitter
@jumpingbeansa
● LinkedIn

3. Application Architecture

4. Which Front-End Technology to Use?

5. What Front-End Technology To
Use?
● Mobile?
– Native vs HTML5
● Desktop?
– Thin Client/Fat Client
● Swing
● Web?
– HTML5,
– ECMAScript 5,6,7
– Frameworks
● HTML5/JavaScript
– Pros:
● Largest coverage,
– Cons:
● Not as fast, slick or
integrated as native
apps

6. The State of JavaScript
Frameworks

7. What to use for JS Front-End?
● Needed to redo a front-end
– Angular – Seemed to be the
emerging winner,
● Angular 1 versus Angular 2
– Others
● BackBone,
● Ember
● Where to go?
● I am Morpheus - Had to go
find “The One”

8. Is React the One?

9. What is React?
● JavaScript library from
– FaceBook
– Instagram
● “A JavaScript library for building user
interfaces”
● Originally built for Single Page Apps,
● Only the View part of an MVC framework

10. How is React Different?
● Existing frameworks
– add complexity,
– Introduce JavaScript meta-languages,
– Can be slow when number of interactive
components increase
● One way data-binding
● Two way data-binding is expensive and slow

11. React – A New Approach
● Declarative not imperative,
● UI built out of JavaScript defined components,
● One way data binding,
– Immutable UI
● Build components not templates
● Major innovation
– Virtual DOM
– Generates

12. Virtual DOM
● Abstracts away browser DOM,
● Translates from abstract DOM to concrete browser
DOM,
● Power behind one-way binding and UI updates
● Write to Virtual DOM and then “compile” to JavaScript
● On state change generate entire html page and then
generate differences and update

13. Virtual DOM – Update Flow
1)Calculate old and new tree,
2)Diff them:
– Two components of the same class will generate similar trees
– two components of different classes will generate different
trees.
– It is possible to provide a unique key for elements that is
stable across different renders
3) Update changed part of browser DOM

14. Simplified Explanation of React
● Create Virtual DOM components in JavaScript,
● Everything with interactivity is a React
component,
● State, i.e. changes propagate down component
hierarchy,
● Basic approach – file per component

15. React Component Creation - ES6
● Create components extending
React.Component,
● Implement render function,
● Return UI virtual DOM

16. Creating a React Component

17. JSX
● Optional HTML-like mark-up
● Declarative description of the UI inlined in JS code
● Combines ease-of-use of templates with power of
JavaScript
● Preprocessor translates to plain JavaScript:
● On the fly (suitable during development)
● Offline using the React CLI

18. Component Composition

19. How is Data/Model Provided to
Components?
● One way data binding means data change in one place,
– i.e only a component responsible for the data can change it,
– All other sub-components can only read it,
– If data is shared between components it is maintained in the
common ancestor
● Props way to pass data from parent to child,→
● State never leaves its containing component→

20. Component Hierarchies
● Breaking your app
into components
hierarchies is key,
● Understanding data
needs of components
determine where
state is kept

21. Data Flow – Data is immutable
● Data passed down hierarchy via
– this.props, properties are immutable,→
– this.state state should be held at the appropriate level in→
component hierarchy
● Parent components maintain state,
● How do child component changes to state propagate to
parent?
– Data passed up the hierarchy via parent event handlers being
called by child components

22. Data Flows Down Hierarchy via
Properties

23. Data Flow From Child to Parent
Declare Handler in Parent

24. Data Flow From Child To Parent
Fire Handler in Child

25. API Methods
● render()
– Return single child element,
– Can return null or false,
– Should not do read or write to the DOM,
– Best for server side rendering
● getInitialState() -
– Used to set the state before component is mounted,

26. API Methods
● getDefaultProps()
– Invoked on class creation then cached,
– Sets default values on missing props
● propTypes
– Used to validate props passed to component,
● statics
– Defines static methods for component

27. Component Life Cycle Events
● componentWillMount
– Invoked on client and server,
– Can be used to set state before render is called,
– Invoked on client and server before rendering
● componentDidMount
– Invoked only on client after rendering,
– Can access refs
● componentWillReceiveProps
– Not called for initial render,
– Used to setState

28. Component Life Cycle Events
● shouldComponentUpdate
– Return false to prevent updating
● componentWillUpdate
● componentDidUpdate,
● componentWillUnmount

29. Challenges to React?
● HTML 5 Web Components
– Custom components in HTML 5,
– Tied to Web browser DOM Model,
– Lots of reusable components will be available?
– How to integrate with React components
● Possible but do you want this?
● If you don't do it will anyone use your framework?

30. Mark Clarke @mxc4
Jumping Bean @jumpingbeansa
WWW: www.JumpingBean.co.za