React, Flux and… more (p1)

Content Core Technologies React Flux Demo

Content Core Technologies React Flux Demo

Core Technologies

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

Browserify

Use Node modules in the browser Bundle dependencies

React

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

React router Nested views map to nested routes Declarative Used at Facebook Inspired by Ember

Flux

Uni-directional data flows More a pattern than a library

Gulp

Task runner Rich plugin ecosystem Stream-based

Summary Node & npm : packages React: Components React-router: Routing Flux: Data flows Browserify: Bundler Gulp: Builds

React

What is React? React (sometimes styled React.js or ReactJS) is an open-source JavaScript library providing a view for data rendered as HTML.

What is React? React isn't an MVC framework React doesn't use templates Reactive updates are dead simple

What is React? Try to keep an open mind. Unidirectional flow. No two-way binding. Inline styles can be good. JavaScript and HTML belong in the same file

Why React?

“We built React to solve one problem: building large applications with data that changes over time.”

Why React? Fast Composable Pluggable Isomorphic Friendly Simple Battle Proven

Virtual Dom

Compare DOM’s current state to desired new state. Update the DOM in the most efficient way

Top-Level API

React.createClass React.createElement React.DOM React.Children

Component API

setState setProps replaceState forceUpdate isMounted replaceProps

Component API

render() : the render() method is required.

ReactDOM

ReactDOM.unmountComponentAtNode ReactDOM.render ReactDOM.findDOMNode

The life of a component

Props & State

Props : pass data to child components State : data in controller view

Initial State

getInitialState

Default prop values

getDefaultProps

JSX “HTML” in JavaScript Differences: className, htmlFor Compiles to JavaScript Optional

Lifecycle Methods

componentWillMount componentDidMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDidUpdate componentWillUnmount

componentWillMount

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

componentDidMount

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

componentWillReceiveProp

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

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.

componentWillUpdate

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

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.

componentWillUnmount

When Immediately before component is removed from the DOM Why Cleanup.

propTypes - Validate props propTypes: { author: React.PropTypes.object.isRequired, onSave: React.PropTypes.func.isRequired, validate: React.PropTypes.func.isRequired, }

- Development vs. Production Mode - Minified version is for production.

Mixins For cross-cutting concerns Share code between multiple components

Statics

THANK YOU (to be continued …)