Rendering elements in React JS
Are you confused about how elements work?
Or you haven’t gotten a hold of the concept?
Worry no more because at the end of this article, those problems would definitely be conquered.
By the way guys, this is Agbejule kehinde favour.
And without further ado, lets hit the road!!
So what are elements?
Elements are basically what you see on your screen.
You may be like;
“I know! Aren’t they the component thingys in react?”
# Elements vs Components
Well guys, components and elements are pretty much different from each other.
The components contain the elements.
So if an element is changed in a component, React tells the React Dom to update the changes made.
We can essentially call these elements the React elements.
#The Root Dom node
<div id =”root”><\div>
In a React application, you have a Root Dom node
It is managed by the React Dom and is located in the Index. HTML file.
It is where all of our components which encompasses the elements are rendered.
Therefore, you have to pass the React element into the Root Dom node in order to get your React elements rendered.
In a react app, you can have one Root Dom node but if you are adding React into an existing app, you can have as many Root Dom nodes as you want.
#Immutability
React element are what you see on your screen at that specific time.
As a result,you can’t actually mutate the attributes or children of the elements.
You can only update the UI to create a new element and send it to the reactDom. render()
#Updating the necessary
If you didn’t implement any changes to any elements including its children in your React app, the real Dom (Dom elements) doesn’t have to be updated.
So guys, I am actually saying no matter how many elements you got describing your UI, only the element or text node that has been changed get updated by the React Dom.
The React Dom is constantly comparing and reacting to changes in your app, in your components and specifically in your elements so as to bring the real Dom to the desired state.
In a nut shell, the React elements only get updated when necessary.
I strongly advice that you think about what you want your UI to look like at a given point in time instead of how to change it overtime in order to prevent your IDE from freaking out that is yelling at you for having lots of Bugs aka errors in your code.
Guys I have been there and its so frustating…..ugggh….. you don’t want to know how it feels like guys.
With that said, I hope you have gotten lot of value from this article.
Drop in your comments in the response section.
Don’t forget to smash the clap button if this was helpful to you
And make sure to follow me to get more and more of these value packed contents.
Thank you guys for your time.
This is Agbejule kehinde Favour .
Until next time Guys!
Peace y’all!
