React Fundamentals

Joe McBride /
@uicraftsman /
github.com/joemcbride

React
4 Facebook + Instagram
4 Open Source since Fall 2013

This is React

Why React?

Speed
4 super fast rendering
4 virtual DOM

Declarative
4 easier to understand
4 fewer bugs
4 all interactions are in one place

Composable
4 simple input / output
4 easy to combine components together

Architecture

Working with State

How does it compare?

React compared to Angular or Ember
4 Full featured libraries
4 Provide everything needed to built an application
4 Routing, two-way binding

React compared to Backbone
4 Full featured library
4 Routing
4 Imperative way of describing how changes effect the
view

Building Components

Environment
4 Webpack - combine and transform javascript into
one file
4 Babel - transfrom JSX and ES6 to ES5
4 Node / Express

Blog
4 Post - title, text
4 List of Posts

class Post extends React.Component {
render() {
return (
...
);
}
}
Post.propTypes = {
title: React.PropTypes.string.isRequired,
text: React.PropTypes.string.isRequired
};

class PostList extends React.Component {
render() {
return (
...
);
}
}
PostList.propTypes = {
posts: React.PropTypes.array.isRequired,
};

Next Steps
4 Flux
4 Isomorphic React / Flux (Fluxible)
4 Relay + GraphQL
4 React Native (iOS & Android)

Resources
4 http://facebook.github.io/react
4 Pete Hunt: React: Rethinking best practices
4 http://fluxible.io/
4 https://medium.com/@dan_abramov

React Fundamentals