React Fundamentals

Joe McBride / @uicraftsman /

github.com/joemcbride

React4 Facebook + Instagram

4 Open Source since Fall 2013

This is React

Why React?

Speed4 super fast rendering

4 virtual DOM

Declarative4 easier to understand

4 fewer bugs

4 all interactions are in one place

Composable4 simple input / output

4 easy to combine components together

Architecture

Working with State

How does it compare?

React compared to Angular or Ember4 Full featured libraries

4 Provide everything needed to built an application

4 Routing, two-way binding

React compared to Backbone4 Full featured library

4 Routing

4 Imperative way of describing how changes effect the view

Building Components

Environment4 Webpack - combine and transform javascript into one file

4 Babel - transfrom JSX and ES6 to ES5

4 Node / Express

Blog4 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 Steps4 Flux

4 Isomorphic React / Flux (Fluxible)

4 Relay + GraphQL

4 React Native (iOS & Android)

Resources4 http://facebook.github.io/react

4 Pete Hunt: React: Rethinking best practices

4 http://fluxible.io/

4 https://medium.com/@dan_abramov

React Fundamentals