A high level overview of React given to an audience of primarily Java developers. The goal was to present the concept of how React works without getting too deep into implementation details.

1. ReactJS

2. About Me
Twitter: @vaskointeractv
Github: bvasko
LinkedIn

3. Backbone, Angular, Ember = MV*
React = View only
What is React?

4. 2 way data binding flow

5. MV* Scaled
2 way data binding
Keeping the UI
in sync becomes
quite complicated

6. Unidirectional Data Flow
(with Flux + React)

7. > Data sent to Store
> Store Updates
> View re-renders

8. Unidirectional data flow scaled
No explicit data binding
UI state is synced across the app

9. React Component Lifecycle

10. Virtual DOM
The virtual dom is a representation of the
dom state held in memory

11. React performs a diff of the dom’s
current state and next state

12. The changed nodes are
marked for re-render

13. You can manually tweak this when you know
something should not update

14. Components

15. Components are more
than HTML templates
What it isn’t
● No explicit data binding
● You never need to tell your
component to re-render
What it is
● Markup
● Behavior
● State
Each component is a mini self-contained API

16. [ code ]
codepen
/** Comment Component: renders <li /> */
var Comment = React.createClass({
propTypes: {
className: React.PropTypes.string,
id: React.PropTypes.string,
commentText: React.PropTypes.string
},
render: function() {
return (
<li
id={this.props.id}
className={this.props.className}>
{this.props.commentText}
</li>
);
}
});

17. It’s not all about
performance

18. Highly Decoupled
Components

19. ● Decoupled from application data - same component
can be used in a data entry app, QA app, etc.
● Event handlers are attached after the first rendering
pass, allowing for server-side rendering of the HTML
or re-use on mobile devices
● Behavior is also passed down through props, making it
easier to have the component behave differently
based on context

20. [ demo ]

21. Highly Testable

22. React Test Utils
Test browser events without a DOM

23. Highly Maintainable

24. React tools for the browser
Displays component name, state & props
Output the selected component to the console with $r
New team members can quickly find their way around the codebase

26. Resources: Get started
https://github.com/coryhouse/react-slingshot
https://facebook.github.io/react/