Its time to React.js
Download as PPTX, PDF2 likes4,424 views
The document provides an overview of React.js, a flexible and efficient JavaScript library for building user interfaces, created by Facebook's Jordan Walke in 2011 and open-sourced in 2013. It highlights React's strengths including building reusable components, reactive updates, and performance through the virtual DOM, which allows efficient UI updates. Additionally, it includes links for further exploration, such as tutorials, examples, and case studies from prominent companies using React.
More Related Content
![[Final] ReactJS presentation](https://cdn.slidesharecdn.com/ss_thumbnails/65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg?width=560&fit=bounds)
Its time to React.js
- 1. Noorul Ameen Its time to React.js © TechTalks, 2017
- 2. Hello World React fundamentals – What is happening behind the scenes Live Coding – Building “Stock Price Viewer” Q & A Agenda © TechTalks, 2017
- 3. React is declarative, efficient and flexible JavaScript library for building user interfaces. React was created by Jordan Walke from Facebook. Originally used in newsfeed and then in Instagram.com Open Sourced in May 2013. Highest number of stars(57,773) in “Github Front-end JavaScript frameworks” followed by Angular. Some of the big names using react are NETFLIX, PAYPAL, AIRBNB, UBER, KHAN ACADEMY…. (Source libscore.com) React Intro © TechTalks, 2017
- 4. Without React.js Hello World! © TechTalks, 2017
- 5. What browser does behind the scenes JS HTML CSS DOM (Tree) Render Tree Web Page Style Rules © TechTalks, 2017
- 6. DOM and JavaScript are different Accessing DOM from JavaScript is slow Too many DOM updates may slow down your app Things to note © TechTalks, 2017
- 7. The React.js way Hello World! © TechTalks, 2017
- 8. Behind the scene JS HTML CSS DOM (Tree) Render Tree Web Page Style Rules React Components Virtual DOM © TechTalks, 2017
- 9. Virtual DOM Comparison DOM (Tree) React Components (Initial Load) Virtual DOM Version 1 DOM (Tree) React Components (Page Updates) Virtual DOM Version 2 Diff of V1 & V2 © TechTalks, 2017
- 10. Build Reusable Components (Not templates) Reactive Updates (React auto updates UI when data changes.) Performance (Virtual DOM) Testability Why React? © TechTalks, 2017
- 11. Reduce Coupling and Increase Cohesion Coupling: Coupling is the degree of interdependence between software modules. Cohesion: Cohesion refers to the degree to which the elements of a module belong together. Thus, cohesion measures the strength of relationship between pieces of functionality within a given module. Build Reusable Components, Not templates © TechTalks, 2017
- 12. React Components follows “Reduce Coupling, increase Cohesion”. React Components encapsulates Data View Logic Component can contain other child components. React Components © TechTalks, 2017
- 13. When data changes, react auto updates UI in the most efficient and performant way. React supports one way data flow instead of two way binding. When state changes, react re-renders the component. Also does a diff of current render with previous render and applies only the minimal set of changes to actual DOM. Reactive Updates © TechTalks, 2017
- 14. React creates Virtual DOM by rendering component and it is children. It is a JavaScript object unlike real DOM. Working with VDOM is faster than actual DOM React patches the updates from VDOM to real DOM. Virtual DOM © TechTalks, 2017
- 15. React forces us to build everything as components. Components are easy to unit test Testability © TechTalks, 2017
- 16. https://github.com/jnoorul/tech-talk-stock-viewer Live Coding – Stock Price Viewer © TechTalks, 2017
- 17. Way forward – React Native (Cross Platform Mobile Apps) © TechTalks, 2017
- 18. React official site https://facebook.github.io/react/ Why React? https://facebook.github.io/react/blog/2013/06/05/why-react.html NETFLIX- Crafting a high performance TV user interface using React http://techblog.netflix.com/2017/01/crafting-high-performance-tv-user.html Source Code https://github.com/jnoorul/tech-talk-stock-viewer For further info © TechTalks, 2017
- 19. THANK YOU © TechTalks, 2017