React - The JavaScript Library for User Interfaces

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

Which Front-End Technology to Use?

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

The State of JavaScript
Frameworks

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”

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

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

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

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

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

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

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

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

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→

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

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

Data Flows Down Hierarchy via
Properties

Data Flow From Child to Parent
Declare Handler in Parent

Data Flow From Child To Parent
Fire Handler in Child

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,

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

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

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

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?

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

React - The JavaScript Library for User Interfaces

Recommended

More Related Content

What's hot (19)

Viewers also liked (19)

Similar to React - The JavaScript Library for User Interfaces (20)

More from Jumping Bean (14)

Recently uploaded (20)

React - The JavaScript Library for User Interfaces