1 / 31

React

React. React. A library for creating user interfaces. React. Renders your UI and responds to events. React. Plays nicely with your stack. Build components , not templates. Separation of concerns:. Reduce coupling , increase cohesion. Coupling is:.

keena
Download Presentation

React

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. React

  2. React A library for creating user interfaces.

  3. React Renders your UI and responds to events.

  4. React Plays nicely with your stack

  5. Build components, not templates.

  6. Separation of concerns: Reduce coupling, increase cohesion.

  7. Coupling is: “The degree to which each program module relies on each of the other modules.” http://en.wikipedia.org/wiki/Coupling_(computer_science)

  8. Cohesion is: “The degree to which elements of a module belong together.” http://en.wikipedia.org/wiki/Cohesion_(computer_science)

  9. The framework cannot know how to separate your concerns for you. It should only provide powerful, expressivetools for the user to do it correctly.

  10. This tool is a React component. A highly cohesive building block for UIs loosely coupled with other components.

  11. Use components to separate your concerns. With the full power of JavaScript, not a crippled templating language.

  12. Abstraction Composition Expressivity

  13. Componentsare reusable.

  14. Componentsare composable.

  15. Componentsare unit testable.

  16. JSX is an optional preprocessor to let you use HTML-like syntax. <a href=“http://instagram.com/jmiller7367”>@jmiller7367 on Instagram</a>

  17. JSX is an optional preprocessor to let you use HTML-like syntax. React.DOM.a( {href: ‘http://instagram.com/jmiller7367’}, ‘@jmiller7367 on Instagram’)

  18. With JSX, it’s easy for designers to contribute code.

  19. Virtual DOM Makes re-rendering on every change fast.

  20. So React built a virtual DOM (and events system). Optimized for performance and memory footprint

  21. The virtual DOM lets us do fun things. It can run in Node.js

  22. The virtual DOM lets us do fun things. Optimizations based on app structure

  23. The virtual DOM lets us do fun things. Testability for free

  24. The virtual DOM lets us do fun things. SVG, VML and <canvas> support

  25. The virtual DOM lets us do fun things. Running the whole app in a Web Worker(experimental)

  26. Key takeaways

  27. Components, not templates.

  28. Re-render, don’t mutate.

  29. Virtual DOM is simple and fast

  30. Sources http://facebook.github.io/react/index.html http://www.andrewgreig.com/637/ http://backbonejs.org/ http://nodejs.org/ http://www.infoq.com/news/2013/06/facebook-react

More Related