Learn React from Scratch
ReactJS is a JavaScript library for building a user interface. It was developed by Facebook to create web applications or Complex UI. In microservice architecture how the services break the function of the application allows operating as an independent service. Similarly, each part of UI breaks into an independent component and reuses the same if required.
If you are not familiar with ES features, please go through the Es6 features that we have in our story list with practical examples in code pen. It’s good to start ReactJS after knowing the basic knowledge of HTML, CSS, JavaScript basics, and ES6 features.
Understanding of DOM
DOM Stands for Document object model. In web applications, we used to create the HTML structure to display the data. Once the browser parses it, then it becomes the DOM.
The DOM brings together the HTML, CSS, and JavaScript code into one place that your browser shows to users. With JavaScript, the page becomes interactive with users to access & modify. So, whenever there is an update in the DOM, JavaScript will find the specific element in the DOM and replace it.
eg) Here we parse the HTML in the browser, the DOM object is produced. Access to DOM nodes can be done by using JavaScript. With id or class attributes of the node used to insert the text. In this example, the ‘Welcome to Learn React’ text is inserted to the element is <h1>.
Suppose in a DOM we have more than 10K nodes. JavaScript tries to touch a node to read an id or class attribute or to get the child node, the browser has to search, check, and parse the number of nodes to reflect the changes.
It is easy for some changes not for very frequent changes in UI, such cases making the browser slower. So, we do not conclude here the Native DOM is slower than React DOM. It purely depends upon the requirement.
Understanding of Virtual DOM
The virtual DOM is only a virtual copy of the real DOM. The virtual DOM was created to solve the problem of frequently update the Dom in a more performant way. Every time the state of our application changes, the virtual DOM gets updated instead of the real DOM.
In Virtual Dom the nodes are represented as JavaScript objects, instead of traversing the nodes to search the specific attribute. We can work with small sections of the virtual DOM to find the attribute.
React knows which virtual DOM objects have changed, then React updates only those objects in the real DOM.
The below diagram explains, Model is having a new value for the field Acct Type. So, there is a change in the state & sending the update to the virtual DOM. Now the virtual DOM compares the current state with the previous state to find the diff, and finally, the diff should be updated to the Real DOM.
Create Element and Render Methods in React Code Pen
React mostly used JSX instead to manually create React elements, but it’s good to know how the React elements are created. Also, Immediately we are not going to create a React web application.
Get Vignesh S’s stories in your inbox
Join Medium for free to get updates from this writer.
We will learn some basic features in the Code Pen. SO, please add the required script if you want to test it.
If you want to test the things in the code pen, don’t forget to add the external Scripts in the JS section.
1. react
2. react-dom
The package provides specific methods used to create and render for our use. Also, include JavaScript Preprocessor as babel, and this includes JSX processing which helps in this story later.
Method To Create React Element Code Pen
Syntax: React.createElement(arg1, arg2, arg3)
arg1 => What type of element eg) h1, div
arg2 => properties or props
arg3 => Content of the element or Child Element
If you are seeing here the first argument is the type of element ‘div’ & the second argument is props or attributes, as of now the value is null, we can see this in later stories. & the third argument is either content or the child element. Here the last child <p> contains the String Value to print the current time.
Method To Render Code Pen
Syntax: ReactDOM.render(arg1, arg2)
arg1 => What i want to render
arg2 => Where i want to render
In this example, the render method consumes the first argument as appContent() that returns the content to render. The second argument is where to be rendered, it should be inside the element which holds the id as “app”.
Use of JSX Code Pen
JSX stands for JavaScript XML. It allows us to write HTML in JavaScript and place them in the DOM without using React.createElement() method.
In the above image of the method to render topic, appContnet method used to create the elements by using the method React.createElement(). Let’s see the same example of how the method is changed using JSX.
In the example above, the appContent method directly used the HTML code in the component. All the elements should be wrapped with a parent element so that we wrapped all elements inside an empty tag.
In JSX, the class attribute of the element is className, because class stands for creating objects in ES6. JSX which internally called React.createElement method. It interpolates the dynamic variables & resolves expressions using the syntax {}.
Hope it will give a basic view of DOM vs Virtual DOM, React Create Element & React Render method & Use of JSX. Please write your questions for any doubts or corrections.
Let’s discuss the next feature of ReactJS in the next story.
Next topic: React Components and Props
