Intro to React

Introduction to ReactJS including, design, virtual DOM, state, smart and dumb components and more! Note: some of the concepts have been taken from Pete Hunt's talk "Rethinking best practices" at JSConf EU 2013

Transcript

2. José Padilla /jpadilla1
3. What’s React?
4. An open-source JavaScript library for creating user interfaces.
5. AKA: The V in MVC
6. Let’s take a step back.
7. What is a web application made of anyway?
8. Recommended structure • Separate files for your HTML, CSS and JavaScript • Link your CSS and JavaScript files in your HTML
9. What React encourages • HTML and CSS in JavaScript • Let JavaScript take complete control of your app
11. Yes. HTML will live in your JavaScript. Yes. CSS will live in your JavaScript. Yes. JavaScript will control everything.
13. React seems wrong, why should I use it?
14. Components
15. Hello World example
16. Everything in React is a component
17. Reduce coupling. Increase cohesion.
18. Coupling The degree to which each program module relies on each of the other modules.
19. Cohesion The degree to which the elements of a module belong together.
20. Use components to separate your concerns.
21. Components are reusable.
22. Components are composable.
23. Components are unit testable.
24. Virtual DOM
25. Re-render the whole app on every update
27. Extremely fast.
28. http://run.plnkr.co/plunks/Wwgjjpl9NHMO5Nd1TUyN/ DB Monster
29. https://www.youtube.com/watch?v=x7cQ3mrcKaY Pete Hunt: React: Rethinking best practices
30. http://builtwithreact.io User interfaces built with React.
31. Other tools used with React Redux
32. Thank you.