Tuesday, September 19, 2017

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

No comments:

Post a Comment