Working with React- behind the scene
React is a Javascript library usually used for UI development. Nowadays it has become very popular. React has already minimized our struggles and giving us better results that's why it's so famous. But how to react to doing these things, what actually happening in the behind, what are the basic elements using it. In this article, we will try to describe these things today. React library has various powerful methods to manipulate our UI’s better way.
We know about DOM which stands for the document object model. Actually, it represents the tree structure of our web application where every branch is called a node. When we update our codes then it also updates. Here comes the main point of the virtual dom. Yes, react have virtual dom along with real dom. When we update our react application then the newly developed dom is compared with the previous dom to track changes and update the changed nodes. Finally, two doms compared by diffing algorithm and then update the real dom.
JSX, in simple words it helps to write javascript on HTML and HTML on javascript. When a beginner starts react then wondered about how we writing HTML in javascript but this is true with the help of JSX which defines javascript XML. Actually when we give the command to run build then a compiler converts JSX to regular javascript and then shows it on the browser. JSX is written inside curly braces.
Secondly, if we want to talk about another element that helps all browsers to show JSX then we have to talk about Babel, yes babel. Some older browsers or few modern browsers too not able to work with JSX then the babel package converts it to normal javascript to load on those browsers.
Before Node JS it was impossible to run javascript out of the browser like other programming languages. But when Node came it changed the whole game. Node is a javascript runtime that allows javascript to run on other machines, standalone machines like the server. It's nonblocking and single-threaded.
Another important thing about react is default props. It is responsible for set default argument values for components. Default component classes can also be updated through default props.
Another big thing is Prop Types in javascript react. Mostly big companies use prop types in their react application. In a simple sense prop types is a mechanism to check that components are receiving and passing correct data types and the right type of props passing and the right type of data receiving.
