building uis.with-react

22
Building User Interfaces With React

Upload: jakerios

Post on 02-Jul-2015

382 views

Category:

Software


0 download

DESCRIPTION

Presentation about ReactJS and what it is and how it works.

TRANSCRIPT

Page 1: Building uis.with-react

Building User

Interfaces With

React

Page 2: Building uis.with-react

Building

consistent user

interfaces is hard

Page 3: Building uis.with-react

React

Page 4: Building uis.with-react

React aims to be

simple

React is

declarative

Page 5: Building uis.with-react

Components

Not templates

Page 6: Building uis.with-react

Components can

be composed to

build complex UIs

Page 7: Building uis.with-react

Break down the user

interface into components

Page 8: Building uis.with-react

A little about JSX

Page 9: Building uis.with-react

JSX Gotchas

Page 10: Building uis.with-react

Component State

Page 11: Building uis.with-react

Component Lifecycle

1. Mounting

2. Updating

3. Unmounting

Page 12: Building uis.with-react

Ownership,

not parent

Page 13: Building uis.with-react

Data on the screen

Page 14: Building uis.with-react

JS is not reactive

DOM is inherently

stateful

Page 15: Building uis.with-react

Data Binding is a

polyfill for reactive

JS and DOM

Page 16: Building uis.with-react
Page 17: Building uis.with-react

Virtual DOM

Page 18: Building uis.with-react
Page 19: Building uis.with-react

React to events

Autobinding

Event delegation

Page 20: Building uis.with-react

React Add-ons

Page 21: Building uis.with-react

http://bit.ly/react-docs

http://bit.ly/react-contrib

Documentation

Contribute

http://bit.ly/react-tools

Tooling

http://bit.ly/rethink-practices

Watch

Page 22: Building uis.with-react

Questions?