Create your cutom react ?

in this blog we will try to implement how react actually works using only html and js so lets get started !

HTML FILE

Lets understand what is happening in this file nothing just starter code of html which has a div tag with id named root and then at last script is getting injected !!

CustomReact.js File

step 1 > lets just take the root id that we have took from html file using dom selector and stored it in a variable name mainContainer

step 2 > in this step we are trying to replicate how react actually sees tags when they are passed into them it convert the given tag into tree like structure using React dom in the given code we have created a (a) tag which has prop like href and target we already know about them and then we have the last children to actually show the written data

now sum up what is happening we have took the root id and designed the reactElement object now we have to find a way to attach them both ! so we can display it on our website !!

step 3 > we have created a function name customRender which will attach reactElement and mainContainer so lets see what happening in the function first of all we will create a domelement using createElement which DOM already provides us and parse the value of domelement using our object reactElement.type and then we will attach children from reactElement to domelement using innerHTML there are many ways too do that at last we are using a for in loop because there can be many attributes of the associated with a tag then we will pass the attributes using setattributes one more additional thing there can be a children passed in the props in object thats why we have usen if prop is equal to children skip that iteration !!

OUTPUT

clearly our code is working and we have made our own react successfully with less feature but we can say that its a great start !!