Download to read offline
Uploaded byMuzammil Bilwani
Introduction to-react
React is a JavaScript library for building user interfaces. It uses several key concepts: 1. Reactive UI - When data changes, the UI updates automatically without needing to specify how to update the DOM. This simplifies UI development. 2. Virtual DOM - React keeps a sketch of the desired UI in memory and syncs it with the real DOM efficiently to minimize updates. 3. Components - Reusable blocks of code that can be composed to build complex UIs. Components manage their own state and re-render when their props or state change.
More Related Content
Similar to Introduction to-react
Introduction to-react
- 1.
- 2. Before starting React? Whatis DOM? DOM is the Document Object Model Dom works as a model in front of artist i.e. Web browser
- 3. What is React? • A library for creating user interfaces V in MVC Model • React is a middle man between DOM and Developer • Smooths the process and communication of portrait creation
- 4. Three main tricks •Reactive UI • Virtual DOM • Components
- 5. Reactive UI • Whenyou update with jQuery you have to tell DOM everything where to go and what to update. • Heck, this sounds tedious and error-prone! Why can’t you just tell Dom what you want instead of how to pose?
- 6. Reactive UI • Asa dev you say what you want. React figures out how to do it. • Data change UI updates itself automatically. • The idea of reactive UI greatly simplifies UI development.
- 7. Virtual DOM As adev you want quick update but Dom and artist (browser) make dev wait to give more orders.
- 8. Virtual DOM • Reactmake sketches for the dev updates and then updates the real Dom. • React keeps record of everything with sketches and show it to Dom at the right time. • React is smart. He can sort through the sketches, remove any duplication and make sure that Dom and the artist do as little work as possible.
- 9.
- 10. Components • Blocks ofpieces that joins together to build a big thing. • Our cars, houses and even our bodies are all made up of identifiable components that are individual, functional units.
- 11. Components If you changea component, everything that includes this component will be updated automatically.
- 12. Props v/s State •Props are Read Only • Props is what you received (Immutable) from parent component • State change can be asynchronous • State is what you own (Mutable)
- 13. Let us considerfollowing components • Roof • Wall • Door • Window
- 14. Props • For <Roofcolor="blue" /> roof is blue • For <Roof color="red" /> roof would be red. • Main idea Components are reusable. I make a skeleton roof once can use it multiple times with different properties. <Roof color="blue" material="wood" />
- 15. Now the houseis built. What if we want to change the things now? • For example we want to open or close the door. • For that we have state. • Door state is handle within door component. Its only doors business.
- 16.
- 17.
- 18.