Why I like React

About me

• I work for Beacon Health System
• .Net, JavaScript, and some Python
• My wife and I spent two weeks in Europe last month
• I like React

​

What is React?

Just the UI. It is not a competitor to Angular.

A better comparison is an Angular directive to React.

Built by Facebook + Instagram

• All of Instagram
• Facebook commenting and lookback video editor
• Khan Academy

Why use React?

• Whole new paradigm. We need to think in React.
• Declarative components.
• Simplification of our UI mental model

React quick-start

Use a CDN or React’s Starter Kit: https://facebook.github.io/react/docs/getting-started.html

​

Hello World in React

• React component. Needs a render function that returns one element.
• Can use props and state (We will dive into this more).
• JSX - the reason why you never used React for more than 3 minutes. Needs to be transformed into JavaScript.

Let us Code

helloworld.html

How does React work?

Does React have two-way binding?

STOP!

React will re-render your entire DOM on any state change. So, no two-way data binding.

Isn’t that slow?

Yes.

React uses a Virtual DOM (not to be confused with shadow DOM). React will build a DOM tree in memory and compare it to the actual DOM, build a diff, and make the least amount of changes.

Props

Treat these as immutable properties. If the props change; the component needs to re-render. Props do not mutate over time.

State

State can mutate over time. It is modified with this.setState.

React warns: “NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.”

Props vs State

Most of your components should have props. Try to keep as many of your components as possible stateless.

High level component should have state that flows down as props to lower components.

Component Methods

• render
• getInitialState
• getDefaultProps
• propTypes

Lifecycle Methods

• componentWillMount
• componentDidMount
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDidUpdate
• componentWillUnmount

Events

Event delegation is built in.

Handlers can:

• Modify state internally
• Passed down from above
• Fire an event on an outside object

Let us Code

props.html

simplestate.html

state.html

React is functional

Pure functions should have an input that maps to exactly one output and have no observable side effects.

Let us Code

functional.html

Flux

Data comes in from one point.

Flux

There is no ‘true’ Flux library.

I have used quasi-Flux code, but have found a new library I like: https://github.com/gaearon/redux

Functional state.

Let us build something

flux.html