ReactJS Awesomeness

A quick introduction to ReactJS

Transcript

1. ReactJS Awesomeness
2. I don’t want to learn another JS framework.
3. Well what is it then?
4. • Born at Facebook. • Lets you build user interfaces. • Described as the V in MVC. • Building large applications with data that changes over time. • Actively maintained. • https://github.com/facebook/react
5. I AM NOT CONVINCED
6. TIME TO GET SERIOUS
7. What it does not have? • No Router. • No Controllers. • No Models. • No Templates.
8. What does it have then? • Components • And Components • …. And Components
9. Separation of Concerns • Controller • Remove an item. • Compl
10. Separate the Components
11. Component-Wise Separation • Composable • Reusable • Maintainable • Testable
12. STILL NO “REACTION?”
13. React Stuffs • Component • JSX • props • state • refs • Virtual DOM • Server-Side Rendering
14. Component • Elements in view. Eg.: Button Widget, Shopping Cart Widget etc. • `React.createClass({ })` • Must override the render method
16. JSX • A JS syntax extension that looks like XML • Can be transformed into JS using React
18. props • Immutable • Attributes to a component. • Accessible through `this.props`
20. state • Mutable • Set using `setState` • Access via `this.state` • Triggers a render automatically when a state changes
22. refs • Lets you access references to individual components • Manipulate the DOM • Use `this.refs`
24. Virtual DOM • Virtual Representation of DOM • Can keep track of what has changes in the DOM • Render only the changed parts based on a diffing algorithm • VERY FAST!!!
25. Server-Side Rendering • Construct React components as an HTML on the server-side and render it. • SEO for Free :)
26. Integrating with Rails • https://github.com/reactjs/react-rails • react_component(<Button />, props={}, html_options={})
27. #jally Thank You