Intro to React

A JavaScript library for creating user interfaces

Mitch Masia, CTO Hexient Labs / TalkRise

Good Company

https://github.com/facebook/react/wiki/Sites-Using-React

The Old (imperative) Way

Hard to track updates

Expensive DOM operations

Debugging nightmare

Hard to track updates + Expensive DOM Operations + Debugging Nightmare

The Old (imperative) Way

How About React?

What should the page look like?

(Components + Unidirectional Data-Flow)

Another JS Framework?

Not Quite

How's it different from Meteor/Backbone/Angular/*.js?

Just the "View"

React is just the "View" layer, not a fully-baked MVC framework.

Flexibility is key.

Plain 'old JavaScript.

What We Know

JavaScript is FAST

DOM is SLOW

Reusable Components

Components return JSX (they describe how the page should look)

JSX?

const element = (
  <h1 className="greeting">
    Hey, Morrison!
  </h1>
);

const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hey, Morrison!'
);

JSX

JS

Babel compiles JSX to JS

https://facebook.github.io/react/docs/introducing-jsx.html

Using Components

Dynamic Components

Components with State

Render?

"Render" declares what you want to see

Components re-render when "props" or "state" change

You don't have to do anything

Render!

Components are Alive

https://facebook.github.io/react/docs/state-and-lifecycle.html

Changing "state"

Unidirectional Data-Flow

The only way to re-render is change "props" or "state"

Props are immutable

State can only be changed with "setState"

React automagically re-renders

Virtual DOM

Description of current DOM

On re-render, React computes new DOM description

Diff DOM descriptions

Batch-apply diffs

Too Abstract

Ecosystem

Babel

ESLint

Webpack

JSX

Redux

MobX

ES6

Flow

PropTypes

DevTools

React Native

React VR

ESLint

Storybook

Jest

Enzyme

ReactDOM

hashHistory

create-react-app ftw

Let's Play