WEB DEVELOPMENT USING REACT JS
49 likes2,725 views
This document provides an introduction and overview of Reactjs including: 1. Reactjs core concepts including components, virtual DOM, and JSX 2. React components are self-contained reusable blocks and many companies have open sourced React component libraries 3. The React lifecycle methods for components including initialization, update, and destruction
WEB DEVELOPMENT USING REACT JS
- 2. Plan What is Reactjs? ReactJs core concepts Let's Code Application Benefits Front And Back End Programming Testing Database Question Session
- 3. HELLO !!! I'mMuthukumaranSingaravelu WHOAMI? Programming Lover Someone try to learn new thing everyday
- 4. I'm Web Developer I want to create web page :)
- 5. How is that possible?
- 8. Short Summary A Facebook & Instagram Collaboration Initial release from 2013
- 9. A Library for creating User Interfaces
- 10. React is not a Framework
- 11. Who are using Reactjs?
- 13. Why Reactjs?
- 14. Separation of concerns: app/html/button.html app/css/button.css app/js/directives/button.js Core Problem !!!!
- 15. SEO Friendly Coding is Simpler because of JSX Big minds are backing ReactJs
- 16. Virtual DOM Unidirectional Data Flow
- 19. Reactjs core concepts :: Component
- 20. React Components Self-contained reusable building blocks of web application
- 21. React Components Printerest open sourced its full React component UI Library reusable
- 22. React Components Office UI Fabric reusable Fabric React is a collection of robust React-based components designed to make it simple for you to create consistent web experiences using the Office Design Language
- 23. Who uses UI Fabric?
- 26. React is about components...
- 28. React core concepts :: Virtual DOM
- 29. React Virtual DOM? Keep track of state in DOM is hard! It'll be so easier to render
- 30. React Re-render everything for every update
- 31. Seems expensive?
- 32. Use different algorithm with the browser DOM tree to identify the changes Instead of creating new object, Reactjs just identify what change is took place and once identify update that state
- 33. React Virtual DOM Re-rendering process?
- 34. Build new virtual DOM subtree Diff. with the old one Compute the minimul set of DOM mutuation Batch execute all update
- 35. React core concepts :: JSX
- 36. React JSX React components are written in JSX A JavaScript extension syntax allowing easy quoting of HTML and using HTML tag syntax to render components
- 37. React core concepts :: state & props !!!