Downloaded 843 times
Uploaded byArnold Asllani
Introduction to React JS
React is a JavaScript library for building user interfaces. It uses a component-based approach where UI is broken into independent, reusable pieces called components. Components are like functions that return markup describing part of a view. React uses a virtual DOM to efficiently update the real DOM by only making necessary changes. This improves performance by avoiding expensive DOM operations and minimizing DOM access. Components receive data and callbacks through properties and local state is updated using setState(), triggering a re-render of changed parts of the UI.
More Related Content
![[Final] ReactJS presentation](https://cdn.slidesharecdn.com/ss_thumbnails/65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Introduction to React JS
Introduction to React JS
- 2. What is React? It is a library for creating user interfaces Most people think it is a framework but it is library
- 3. Traditional MV* Frameworks Separationof Concerns Data Display Logis(JS) Tailored Data Templates(HTML)
- 4. Building Components nottemplates Components are the building blocks of React. Very similar to Directives in Angular JS You can think of a component as a collection of HTML, CSS, JS Components can be written in pure Javascript or JSX
- 5.
- 6.
- 7. Benefits from React You avoid expensive DOM operations Minimize access to the DOM Update elements offline before inserting to the DOM
- 8. React Virtual Dom Re-render everything on every update? It sounds expensive but it is not React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser's displayed DOM efficiently 1. Create lightweight description of component UI 2. Diff it with the old one 3. Compute minimal set of changes to apply to the DOM
- 9. Benefist of VirtualDOM Clean Clear and descriptive programming model Fast Optimized DOM updates
- 10.
- 11. Component rendering Valuereturned from render() method is not a DOM node It is a lightweight description of the UI It is diffed with the current description to perform the minimum set of changes
- 12. Data Flow Parent-to-child Propertiespassed to children by parent are accessible in this.props Properties are immutable Once you instantiate the object, you can't change its properties
- 13.
- 14.
- 15.
- 16.
- 17. State object Likeproperties, state affects how a component behaves and renders. Unlike properties, there’s no way to define what state should be applied to components via JSX Properties are defined when components are created, whether by JSX or by pure JavaScript. State, on the other hand, is only seen on the inside of component definitions. This is the first, and most important difference between the two.
- 18.
- 19.
- 20. this.setState function Wheneverthis function is called the UI is automatically re-rendered. Just the part of app that has changed.
- 21. Thank you forlistening