Slide 1

Slide 1 text

J A C K L E N O X Introduction to React

Slide 2

Slide 2 text

@jacklenox

Slide 3

Slide 3 text

Disclaimer: IANAE* * I first touched some React code about six weeks ago

Slide 4

Slide 4 text

The Problem Interface development increasingly moving to JavaScript. Manifesting in a lot of jQuery spaghetti code. Which has thus led to the rise of frameworks…

Slide 5

Slide 5 text

JavaScript Framworks Backbone Ember Angular

Slide 6

Slide 6 text

“ “Don’t use a chainsaw to open an envelope.” –Some guy (or girl), I couldn’t find this on Google.

Slide 7

Slide 7 text

“ “Do use a chainsaw to cut down a tree.” –Me

Slide 8

Slide 8 text

Enter… React

Slide 9

Slide 9 text

A JavaScript library for building user interfaces

Slide 10

Slide 10 text

React is sort of just the V in MVC

Slide 11

Slide 11 text

“ “The framework cannot know how to separate your concerns for you. It should only provide powerful, expressive tools for the user to do it correctly.” –Pete Hunt, Facebook

Slide 12

Slide 12 text

It plays nicely with your stack

Slide 13

Slide 13 text

It’s easy to learn

Slide 14

Slide 14 text

It’s all about components!

Slide 15

Slide 15 text

A React Component A highly cohesive building block for UIs loosely coupled with other components.

Slide 16

Slide 16 text

A simple component

Slide 17

Slide 17 text

React is really fast

Slide 18

Slide 18 text

Virtual DOM React uses a virtual DOM diff implementation for ultra-high performance. It can also render on the server using Node.js – no heavy browser DOM required.

Slide 19

Slide 19 text

It’s compatible with atomic design

Slide 20

Slide 20 text

JSX…

Slide 21

Slide 21 text

Remember this?

Slide 22

Slide 22 text

It becomes this.

Slide 23

Slide 23 text

“ “The accessibility of templates and the power of JavaScript.” –Pete Hunt, again

Slide 24

Slide 24 text

Very easy to reuse components

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Data Flow One-way reactive data flow. Reduces boilerplate and is easier to reason about than traditional data binding. In layman’s terms, it does shit automagically. :)

Slide 27

Slide 27 text

If the data is updated,
 it re-renders all by itself!

Slide 28

Slide 28 text

“ “Data changing over time is the root of all evil.” –Pete Hunt, yet again

Slide 29

Slide 29 text

Demo time

Slide 30

Slide 30 text

Resources facebook.github.io/react egghead.io/series/ react-fundamentals

Slide 31

Slide 31 text

Fin. @jacklenox