This document discusses React, a JavaScript library for building user interfaces. It summarizes that React uses virtual DOM re-rendering to update the user interface whenever data changes, allowing developers to build user interfaces out of independent and reusable components in a declarative way using one-way data flow via props and state. Everything in React is composed of components that manage their own data and state.

1. React

2. import React from 'react';
React.render(<p>Hello</p>,
document.body);

4. @ream88

6. @7sheepnet 1
1
https://twitter.com/sangramvajre/status/582740689001172992

8. React

10. #1
Re-rendering

12. Data changing over time is the
root of all evil.

13. Re-rendering
Every place data is displayed is
guaranteed to be up-to-date.

14. Re-rendering
No magical data binding.

15. Re-rendering
No model dirty checking.

16. Re-rendering
No more explicit DOM operations
- everything is declarative.

17. Re-rendering
Built in - Virtual DOM!

18. #2
Components

19. Frameworks
— Controllers
— Directives
— Templates
— Global Event Listeners
— Models
— View Models

20. React
— Controllers
— Directives
— Templates
— Global Event Listeners
— Models
— View Models

21. ?— Seperation of concerns
— MVC

22. Everything is a component

28. Components
— composable
— resuable
— maintainable
— testable

29. #3Single source of truth

30. Data flow
— no framework: any component can communicate with
any other component
— Backbone: pubsub
— Angular & Ember: two-way binding
— React: one-way data flow

31. class CartItem extends React.Component {
render() {
return (
<div>
<Button text="Remove" />
</div>
)
}
}
class Button extends ReactComponent {
render() {
return (
<button>{this.props.text}</button>
)
}
}

32. Props
— passed from parents to their childs
— immutable

33. class Button extends React.Component {
render() {
this.props.text = 'bar' // not working
return (
<button>{this.props.text}</button>
)
}
}

34. State
— internal only
— mutable
— can be passed as props

35. class CartItem extends React.Component {
render() {
this.setState({ text: 'Remove this item' })
return (
<div>
<Button text={this.state.text} />
</div>
)
}
}

36. Events
— flow up from components

37. class CartItem extends React.Component {
removeItem() { /* ... */ },
render() {
return (
<div>
<Button text="Remove" onClick={this.removeItem} />
</div>
)
}
}
class Button extends React.Component {
render() {
return (
<button onClick={this.props.onClick}>{this.props.text}</button>
)
}
}

38. Read more
— @reactjs
— https://egghead.io
— https://facebook.github.io/react/index.html
— http://www.slideshare.net/AndrewHull/react-js-
and-why-its-awesome
— http://www.slideshare.net/KamleshKumarSingh/
react-mit

39. Thx!