Introduction to React

About Me

● Solutions integrator at Jumping Bean– Developer & Trainer– Social Media

● Twitter @mxc4● Twitter

@jumpingbeansa● LinkedIn

Application Architecture

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”

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

Creating a React Component

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

Component Composition

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 ParentDeclare Handler in Parent

Data Flow From Child To ParentFire 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