Understanding
React
slid.es/w33ble/understanding-react
Created By
Joe Fleming
@w33ble
We'll Cover
- Where React fits
- React internals
- Example components
Where React Fits
React isn't an MVC framework.
- Reactive view library
- Create reusable UI components
- Composable user interfaces
Declarative Programming
Expresses the logic of a computation without describing its control flow
Example: A SQL Query
Dataflow Programming
Emphasizes the movement of data and models programs as a series of connections
Example: An assembly line
Reactive Programming
Oriented around data flows and the propagation of change
Example: A Spreadsheet
Why reactive programming?
- Self-updating components
- Decoupled components
- Less code
- Less errors
- Faster development
React Internals
The Virtual DOM
Why a Virtual DOM?
- Only sends updates
- Reduces repaints & reflows
- Visible speed increase
Repaints
Whenever an element's visible state is changed without altering the layout of the document
-
Display, visibility, .hide(), .show()
- Changing the background color
- Adding/removing a border
- Changing font size or styling
Reflows
When the render engine calculates positions and geometries of elements in the document
- DOM tree change
- Style affecting the layout
- Changing the className
- Resizing the window
Then it's all repainted
Sub-tree Rendering
Selective Sub-Tree Rendering
Requires custom shouldComponentUpdate()
React Internals
Batching Updates
Why Batch Updates?
- Less repaints & reflows
React Components
React doesn't use templates
- Javascript to render markup
- Unifies markup and view logic
- No needless separation of technologies
It's all Javascript
...but, JSX?!
About JSX
JSX is a JavaScript XML syntax transform
- Similar to HTML
- Generates Javascript
- Syntactic sugar
- Optional extension
JSX
// COMPONENT CODE
/** @jsx React.DOM */ var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } });
// APPLICATION CODE
var el = document.querySelector('#output');
React.renderComponent(<HelloMessage name="Joe" />, el);
Javascript
// COMPONENT CODE
var HelloMessage = React.createClass({ render: function() { return React.DOM.div({}, "Hello ", this.props.name); } });
// APPLICATION CODE var el = document.querySelector('#output');
React.renderComponent(HelloMessage({name: "Joe"}), el);
Coffeescript
# COMPONENT CODE
{div} = React.DOM
HelloMessage = React.createClass render: -> div {}, "Hello ", this.props.name
# APPLICATION CODE
el = document.querySelector('#output');
React.renderComponent HelloMessage(name: "Joe"), el
Use State
When event handlers may change to trigger a UI update
- Keep components as stateless as possible
- Minimal amount of data needed to represent your app
- Delegate as much as possible to parent components
Avoid State
as much as possible
- Computed data
- Other React components
- Don't duplicate this.props
What About Application Data?
Use Props
- Pass data from parent to child
- Useful for static rendering
Component Construction
- Break UI into reusable components
- Determine how data is passed around
- Wire everything up
Component Breakdown
Data Flow
Time for Code!
Thanks!
Twitter: @w33ble
Github: w33ble
Credits
Understanding React
By Joe Fleming
Understanding React
A high level look at Facebook's React library
- 6,157