[Srijan Wednesday Webinars] The Fundamentals of ReactJS
Download as PPTX, PDF0 likes439 views
This document discusses the fundamentals of ReactJS, a library designed for building user interfaces, emphasizing its departure from traditional MVC frameworks. It highlights a functional approach to UI rendering, the use of components instead of templates, and the benefits of a unidirectional data flow and virtual DOM. Key features include JSX syntax for markup, synthetic event handling, and managing component states effectively.
[Srijan Wednesday Webinars] The Fundamentals of ReactJS
- 1. The Fundamentals of ReactJS A library for building user interfaces Jyoti Puri @jyo_pur
- 2. Challenging the established best practices @srijan #SrijanWW
- 3. Modern web application are complex Developing and maintaining them is hard hard hard… @srijan #SrijanWW
- 4. Traditional MV* Frameworks @srijan #SrijanWW Model (Data) Controller (Manages data flow, logic) View (Mutable Templates - HTML + Extensions) - 3 tier architecture - criss-cross data flow - data bindings Follow best practices
- 5. @srijan #SrijanWW My UI is not reliable Give me something simplified I want something predictabl e
- 6. @srijan #SrijanWW A LIBRARY FOR BUILDING USER INTERFACES Is it yet another MVC framework ? NO React challenges the best practices established by MV* frameworks
- 7. @srijan #SrijanWW Functional Approach to UI rendering Unidirectional Data Flow Do not mutate - re render An Abstraction of Immutable Virtual DOM
- 8. @srijan #SrijanWW Components and not templates React Components are Functions whose output is DOM state Components are not just widgets - they reflect actual application structure
- 11. @srijan #SrijanWW JSX = JS + XML Its a convenience for writing markup in JS. React has a JSX -> JS pre-compiler. JSX is not HTML is safe from XSS issues https://jsfiddle.net/reactjs/5vjqabv3/
- 14. @srijan #SrijanWW - React components can be composed within other React components - Composable elements are tested reliable pieces - Comparability isolates complexity
- 15. @srijan #SrijanWW State of inputs is managed by browser. But React provides support for controlled components in which case the state of input components in the DOM is controlled by component state. …
- 16. @srijan #SrijanWW React provides synthetic event handling and bubbling with optimized memory footprints. It complies with W3C recommendations.
- 17. @srijan #SrijanWW - react attaches synthetic events to components - they are camelCased - for instance onChange of input below …
- 20. @srijan #SrijanWW How does it performs Mutation comes with complexity Describe how your view looks like, do not worry to update it !
- 21. @srijan #SrijanWW DOM - Document Object Model Its way of representing structured documents via objects. DOM was never designed and optimized for Dynamic UI Virtual DOM is a layer of abstraction over actual DOM Its much faster Virtual DOM magic works with: - batching updates - minimal diff
- 23. @srijan #SrijanWW In 3 Years
- 24. Jyoti Puri @jyo_pur Thank You! Take this conversation online by tweeting using the hashtag #SrijanWW