React Component, State and JSX
Component
- It takes an state and properties and uses those object to render html.
- State can be changed but properties cannot be changed
- They are written in a special syntax known as JSX
- All react component must have a render function
- We should always return one elements from the render function
State changes
- When a state changes the component owning that state turns a rerender
- Internally when react recomputes it re renders components in DOM. It does this by using virtual DOM (pure javascript ). This is faster than the browser DOM
- It does this by finding the difference between the real and the virtual DOM and then writes that difference to the browser DOM
- By minimizing the browsers DOM manipulation, it is supposed to be fast
JSX
- Allows to describe a DOM in a syntax which is very similar to html
- Its optional.
- It would run through transpiler like babel. It would convert this html to actual react function calls. These react functions create the elements of the DOM
- We cannot send JSX to the browser
React components combine state and properties to determine how an application’s interface is rendered, while JSX provides a familiar syntax for describing the DOM structure. Understanding how state changes trigger re-rendering and how the virtual DOM helps minimize direct browser DOM manipulation is an important part of learning React. A React JS Course can help developers build practical knowledge of these core concepts.
ReplyDeleteJSX also works well with typed JavaScript development, where clearer code structure can be valuable as applications become larger. A TypeScript Training can help learners strengthen their understanding of TypeScript while applying structured programming concepts to modern frontend development.
ReplyDelete