An Introduction to React

by Jordan Danford

About me

  • Student at PCC and UA
  • Developer at YourLabs
    • Web-based educational tools (beta)
    • Work with JavaScript, Python (Django), PostgreSQL
  • Into music, nature, functional programming

About React

  • Developed at Instagram by Pete Hunt
  • Acquired and open-sourced by Facebook in 2013
  • Library for composable user interfaces
  • Not another MVC framework
    • More like V with a bit of C
    • Doesn't dictate models or logic
    • "You call a library, a framework calls you"

React is about components

  • Component == custom HTML element on JS steroids
  • Complex components often composed from simpler ones
  • Simple components only require a method
  • Minimal example:

JSX: it's just sugar!

  • HTML tags become calls to
  • JS exprs in braces pass through verbatim
  • → DOM element
  • → virtual DOM element

JSX

JavaScript

The Virtual DOM

  • Lightweight representation of DOM in JavaScript
  • Part of React core (not Shadow DOM)
  • Includes both HTML elements and React components
  • Pure JS == isolated from native DOM
  • Rendering is where "virtual" becomes real

Rendering (first time)

  • User creates component
    • JSX:
    • JavaScript:
  • Component renders virtual DOM tree
  • Virtual DOM tree is reified and inserted into target element

Rendering (second time)

  • Component's props change (external)
    • JSX:
  • Component renders fresh virtual DOM tree
  • Virtual DOM is diff'ed with old version
  • Diff is applied by adding/removing elements and changing attributes ("reconciliation")

Old virtual DOM

New virtual DOM

Target?

  • Wait, that doesn't look right!

Rendering (the smart way)

  • Naïve reconciliation is not optimal, but...
  • Comparing every node is O(n3)
  • Solution: give each child a unique prop
  • Predictable behavior, O(n) performance!

Old virtual DOM

New virtual DOM

Target

The big picture

  • All components have props (external)
  • Rendering happens when props change
  • If props are external, when do they change?
  • Let's find out! [JSFiddle]

The big picture (for real)

  • All components have props (external)
  • Some components also have state (internal)
  • Rendering happens when props or state changes
  • Data flows down: props/state on parent → props on child
  • Events flow up: event on child → handler on parent

Tradeoffs (React)

  • ✓ Simple and composable (just components)
  • ✓ Scales from prototypes to large apps
  • ✓ No reliance on upcoming standards
  • ✗ Still young (not yet 1.0)
  • ✗ Different model from rest of web dev

Tradeoffs (JSX)

  • ✓ Extensible HTML without "template features"
  • ✓ Widely supported by many editors and build tools
  • ✓ Optional ES6 syntax
    • Arrow functions:
    • Destructuring assignment:
    • Class syntax:
  • ✗ Yet another compile-to-JS language
  • ✗ Not really HTML ( vs. )

Who's using it

  • Facebook (comments, messages)
  • Instagram (whole site)
  • GitHub (Atom editor)
  • Yahoo (mail app)
  • reddit (marketplace)
  • Khan Academy (everything)

Bonus: React Native

  • Announced at React.js Conf
  • React-powered iOS apps (more platforms soon)
  • 100% native UI (not web view)
  • Reconciliation == minimal updates
  • ✗ Write once, run anywhere
  • ✓ Learn once, write anywhere

Now what?

Learn it

Extend it

Go beyond

  • Om (ClojureScript)
  • Elm (web language)

Wrapping it up