A basic introduction to Facebook's React.

1. React Fundamentals

2. Joe McBride /
@uicraftsman /
github.com/joemcbride

3. React
4 Facebook + Instagram
4 Open Source since Fall 2013

4. This is React

5. Why React?

6. Speed
4 super fast rendering
4 virtual DOM

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

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

9. Architecture

11. Working with State

12. How does it compare?

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

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

15. Building Components

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

17. Blog
4 Post - title, text
4 List of Posts

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

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

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

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

22. React Fundamentals