Hello, I will be posting ReactJS concepts starting from basic to advanced in this series. Keep following for every week new concept.
ReactJS is a JavaScript Library developed by the Facebook community.
ReactJS uses Virtual DOM for element updates, unlike the Real DOM hence the high speed in page loading.
React follows component based approach which helps in building reusable UI components.
Press enter or click to view image in full size
How Virtual DOM works?
Whenever a change is made in the JSX, it is updated in one of the Virtual DOM, and it is then compared with the other Virtual DOM to find the difference.
This difference is then directly updated in the Real DOM, rather than updating entire Real DOM and re-loading the entire page.
What is JSX?
JSX stands for JavaScript XML one of the most important part of ReactJS.
JSX allows to write HTML and JavaScript together, later converting HTML tags into react elements.
These elements are placed in DOM without any react.createElement() method.
What is reconciliation?
Get Vinitha Subhash’s stories in your inbox
Join Medium for free to get updates from this writer.
Virtual DOM is a programming concept where virtual representation of UI is kept in a memory and synced with real DOM by a library such as ReactDOM and this process is called reconciliation.
What are components in React?
Components are like JavaScript functions which implement render() method that accepts arbitrary input data and return React elements describing what should appear on the screen.
What is DOM (Document Object Model)?
DOM represents the document as nodes and objects so that programming languages can connect to the pages and can change document structure, style and content.
Every time DOM changes browser needs to recalculate layout CSS, do layout and repaint the pages.
