Before React JS, developers used pure JavaScript which was not only time-consuming but more prone to errors and bugs. Let's look at some of its key features -
-
JSX -
To read any HTML(Hypertext Markup Language) document, you require a web browser. The web browser processes the HTML document and displays it on your mobile, tab or laptop screen. During this process, there is another layer called DOM(Document Object Model), which is a tree representation of your web pages arrangement. Developers can make changes to the web pages by modifying DOM.
JSX(JavaScript eXtension) is a syntax extension for JavaScript. By using this extension, developers can avoid the usage of complex DOM structures. It allows writing HTML code in the same file that contains JavaScript code, making the comprehension of the code and debugging easier.
-
Virtual DOM -
With DOM using a tree structure, it is quite fast to update changes. This works fine with a simple and static webpage, but when it comes to a dynamic one, it can cause issues. Let's understand the concept with a practical example. Suppose you are reading an article on a website and you posted a comment under it. With this update on the page, not only that specific element but its children will also need to be re-rendered. Repainting the whole UI.
That's where virtual DOM comes into the picture. As the name suggests, it's the copy of real DOM. Whenever there are changes or updates made on the page, virtual DOM scans for the particular element which will need to be changed. Then it calculates the best way to make updates in the real DOM, ensuring that operation on real DOM is minimal. Therefore decreasing time consumption and increasing efficiency.
-
Components -
React is all about components. The entire application is divided into components representing each section. Each component exists in the same space but does not affect each other in any way. They work independently and merge in the parent component.
-
One-Way Data Flow -
React only allows for uni-direction data flow. It uses nested components for its development. However, React makes sure that changes made in the child component do not affect the parent component in any way.
These components work like functions. They receive information with the help of "arguments" and pass information with the help of "return" value. Child component can pass a callback function to its parent component, with which the modification can be done. This is called One-Way Data Flow.
