Hello everyone , In this blog I am talking about Reactjs and its basics covering what,why,features of Reactjs and its building blocks.
What is ReactJs?
ReactJs is an open source javascript library, developed in order to build user interfaces both in web and mobile systems.
It lets you compose complex UIs from small and isolated pieces of code called “components”.
In such scenarios, React can render the changing parts of the UI without re-rendering the entire page as a whole and deliver a much faster user experience.
Even though ReactJs is not a well established MVC(Model-View-Controller) framework and only a library which takes care of the view part in the MVC, it has its own space in the developer world and is one of the leading choices when it comes to build user interfaces.
Why ReactJs?
The main question why reactjs became so popular.It is because of one of its important features and that is “Virtual DOM”.In short, what Virtual DOM(Document Object Model) does is to create a copy of the previous DOM and then take a diff with the current one, which results in getting the changes. Now only these changes are successfully rendering in the UI and hence only the changes are going to render here rather than the entire DOM, it becomes extremely faster.
Features of ReactJs:
These are some of the features of Reactjs,
1.Virtual DOM:
As we discussed earlier,Virtual DOM is one of the most popular feature of Reactjs which makes it faster.
Let’s see why:
The regular DOM is actually an object containing all the HTML tags as nodes. It also has the ability to do the updates to itself whenever there is a change.Now the issue with the regular DOM is that it is not designed in such a way that only the changes made to it are updated. In regular DOM, the update happens to the entire tree of nodes and thus wasting a lot of resources and time and hence making it slow.
So let us see how the Virtual DOM is actually making everything fast.
React will make a copy of the DOM object whenever it is going to render into the browser. This copy of DOM is what we call Virtual DOM.
Whenever there is a change to the DOM, by user interaction or by any other means, React will generate the copy of the Virtual DOM
Then,the copy of the real DOM representation and the previous DOM representation are compared and the difference is calculated.
If there are any differences, React will make the browser render only for the differences. And if there are no differences, React will make the browser render nothing. By this approach,only minimal updating of the real DOM is needed using minimal resources. This makes the rendering super fast.
2.JSX – JavaScript Syntax Extension
JSX is a syntax extension to JavaScript. It is used with React to describe what the user interface should look like. By using JSX, we can write HTML structures in the same file that contains JavaScript code. We can say that it embeds HTML into JavaScript code.This makes the code easier to understand and debug, as it avoids the usage of complex JavaScript DOM structures.
3.One-way Data Binding or Unidirectional Data Flow:
The one-way data binding feature keeps everything modular and fast. A unidirectional data flow means that when a developer designs a React app, they often nest child components within parent components. This way, a developer knows where and when an error occurs, giving them better control of the whole web application.
4.Performance and light weighted
React uses Virtual DOM, which makes the web applications run much faster than those developed with alternate front-end frameworks. React breaks a complex user interface into individual components, allowing multiple users to work on each component simultaneously, thereby speeding up the development time.
5.Native Support:
React also has a native version called React Native which offers the best of React world to the mobile app development platforms.It supports the simultaneous building of apps in both Android and iOS platforms.
Fundamental building blocks of ReactJs:
Now let’s look at the building blocks of ReactJS:
1.Component:
React follows a component based architecture meaning, instead of displaying entire page as a single element, each page is broken down into different small units, which are maximum independent from each other. By this way, bigger applications can be broken down into several smaller individual components.
Now let us see how a simple component would look like in React:
2.Props
Props are short for properties. Props are for inter-component communication. They are simply attributes like entities in components, which we can pass on to the children components.Props/properties are strictly to be immutable and are only to be managed by the component owner.
Passing props to other components: name, age
Now a component is going to receive data, not from its parent component, but by other means,for example a trigger by the user or so. In this case, we are going to use “state”.
3.State
Props are not to change, there should be some way to handle the changing data, and here is where “State” comes up. The state is a built-in React object which we use to contain data or information about the component. A component’s state can change over time,whenever it changes, the component re-renders. The change in state can happen as a response to user action or system-generated events.
Conclusion:
In this blog, I have introduced you to ReactJs and its main concepts. Before you start working on React, these are a few concepts that you should already be familiar with.
For more information on ReactJs , you can visit: https://devdocs.io/react/ .
THANK YOU.
