React.js in real world apps.
•
22 likes•6,184 views
This document discusses React.js and web development. It begins with an introduction to React.js and its history. It then covers key React concepts like components, JSX syntax, and the virtual DOM. It discusses why the author likes React, describing it as easy to learn and use with true reusable components. It also provides an overview of how the author uses React on both the client-side with tools like Webpack, Babel, and Flux and the server-side with Node.js, Express, MongoDB, and other technologies.
Report
Share
React.js in real world apps.
- 1. React.js @emadb This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
- 3. History of web development…
- 11. Quiz time!
- 12. What’s the difference between Service, Factory, Provider?
- 15. var HelloWorld = React.createClass({ render: function() { return ( <h1> Hello world </h1> ); } }); React.render(<HelloWorld />, document.body);
- 17. Whooot? • Markup and behaviour • Separation of concerns • Template language? • Components • JSX syntax
- 18. var HelloWorld = React.createClass({ displayName: "HelloWorld", render: function() { return React.createElement("h1", null, "Hello World"); } }); React.render( React.createElement(HelloWorld, null), document.body);
- 19. COMPONENTS
- 23. render Every time the state change the component render itself
- 24. DOM is slow Javascript that access to the DOM is slow console.dir(document.createElement('div')); A DIV contains about 135 first level properties/function (700 on second level).
- 25. Virtual DOM • Our code act on a fake DOM (virtual dom) • React.js take care of keep virtual DOM and real DOM synchronised • Every ReactElement is a light, stateless, immutable, virtual representation of a DOM Element • A virtual DOM div element contains only 6 properties.
- 27. Why I like react so much • Easy to learn, easy to use • True reusable components (1 single file per component) • Functional approach • Human error messages • Active community
- 28. I said “Easy to learn!” Less than 1 hour to learn everything you need to be productive. Challenge
- 29. How I use it
- 30. Server side • Node.js Express api • MongoDb/Mongoose • Passport • Mocha/Chai
- 33. npm var React = require(‘react’) $ npm install react —save import React from ‘react’
- 34. Everything you need is in your package.json
- 35. • A transpiler • Converts ES6 javascript to “old” ES5. • Compiles JSX files to plain js.
- 37. Webpack Bundles javascript, css, sass, fonts and images with their dependencies into assets
- 40. Superagent Super Agent is light-weight progressive ajax API crafted for flexibility, readability, and a low learning curve after being frustrated with many of the existing request APIs. It also works with Node.js!
- 43. Flux
- 48. Few more things… • Server side rendering • Redux • Relay