What is React?
- We can split any web page into components that makes the code maintainable, manageable and reusable.
What is Components?
- It is a small feature that makes up a piece of a user interface, a project may consist of multiple components, each of these components exists within the same space, interacts independently from one another.
- If I were to describe a component within the scope of Facebook’s UI, A chat window would be a component, a comment feed would be another component, and a constantly updating friend list would represent another component.
2- Virtual DOM.
What is JSX:
- Important to know that it’s just some syntactical sugar, and it’s not connected with file extension you’re using, It works in (.js) or (.jsx) files.
JSX code will be like:
It complies to be :
What is virtual DOM:
- If you’re not using React JS (and JSX), your website will use HTML to update its DOM (“change” everything without a user having to manually refresh a page). This works fine for simple, static websites, but for dynamic websites that involve heavy user interaction it can become a problem (since the entire DOM needs to reload every time the user clicks a feature calling for a page refresh).
- React Js, specifically handles components in an extremely performant way. React uses something called a virtual DOM which uses a “diffing” algorithm to detect changes to a component (real DOM) and only render those changes, as opposed to re-rendering the entire component.
- React keeps the virtual DOM in memory and when something changes, React compares the real DOM with the virtual one then update the real DOM.
Hope that it was simple for you, All comments and feedback are highly appreciated.
Stay tuned for more React Js articles for beginners, Have a nice day :)