1 of 28

Slide Notes

DownloadGo Live

react.js Intro

Published on Nov 18, 2015

No Description

View Outline

MORE DECKS TO EXPLORE

PRESENTATION OUTLINE

1.

DEV O'CLOCK

Photo by Robert S. Donovan
2.

RIAK

Photo by DinosaursAreNotDead
3.

REACT

react.js, that is
Photo by DinosaursAreNotDead
4.

DISPLAYING DATA

Photo by kennymatic
5.

STATIC

JUST USE HAML
Photo by DeeAshley
6.

LIVE UPDATES

FORWARD DATA BINDING
Photo by djwtwo
7.

"FORWARD DATA BINDING"

  • Render placeholders
  • Get new data
  • Update the placeholders
  • React does this...
  • But so does everything
Photo by kevin dooley
8.

WHY USE REACT?

Photo by gacabo
9.

Easy to grasp
Easy to build
Well thought out
Lightning fast

Photo by Jason A. Samfield
10.

JSX

BASICALLY JUST HTML IN JS
Photo by Pierre-Yves Sanchis
11.

...BUT WHY JSX?

OKAY, OKAY, YOU CAN USE RAW JS
Photo by Gn!pGnop
12.

COMPONENTS

NESTABLE, COMPOSABLE... AND THEY'RE FUNCTIONS
Photo by Dominic's pics
13.

DEMO

JSX SYNTAX, COMPONENT NESTING
Photo by Javier Volcan
14.

PROPERTIES

THEIR BEAUTY AND POWER
Photo by John-Morgan
15.

STATE

AND ITS MANY DANGERS
Photo by horizontal.integration
16.

UPDATING

YOU JUST... RE-RENDER
Photo by nickwheeleroz
17.

BUT THAT'S SLOW!

COUNTER-POINT: NUH-UH
Photo by sixpackshack
18.

VIRTUAL DOM

Photo by kevin dooley
19.

DEMO

SHOW HOW VIEWPORT EVENTS CAUSE RE-RENDER
Photo by snogglethorpe
20.

INTERACTIVE DATA

THE MOTIVATION FOR BACKBONE, EMBER, ETC...
Photo by Documentally
21.

TWO-WAY DATA BINDING

  • Model updates forms
  • Forms update model
  • Loop city
  • Man, this is not easy
Photo by danielito311
22.

SO WHY REACT?

USE THE RIGHT TOOL FOR THE JOB
Photo by duda C.
23.

WE ARE

AND HERE'S WHY
Photo by Marcus Vegas
24.

REACT DOES WORK

CALLBACKS BEAT TWO-WAY BINDING
Photo by RaSeLaSeD - Il Pinguino
25.

DEMO

SHOW API CALLBACKS IN USE
Photo by Peter E. Lee
26.

SIMPLE

IT'S JUST A FEW CLASSES
Photo by SamuelJohn.de
27.

UNINTRUSIVE

IT'S JUST A LIBRARY
Photo by Nina Matthews Photography
28.

QUESTIONS?

Photo by laffy4k

Alan MacDougall

www.alanmacdougall.com