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