My introduction to React Js

Introduction

In this post, I am going to share with you an amazing front end technology that enables developing dynamic applications with ease and comfort. It’s none other than React Js. React Js enables a modern web developer to build dynamic front end web applications with ease.I will be giving a beginner level introduction to React Js in this post.

What is React Js?

React Js a modern front end web application framework which covers the view part in an MVC based web application. React Js is more suited to dynamic UI rather than being an entire web development framework. React Js is developed by Facebook. React Js follows a declarative programming style, and  follows a component based development approach.

Why React Js?

React Js covers the view part in MVC web development framework. React Js makes it very easy to develop new applications as well as get integrated into existing web applications. React Js uses simple declarative style, that renders the UI based on simple logical conditions. React Js applications can be developed using JSX and also using basic JavaScript. Most of the developers prefer developing using JSX. JSX is a technology that enables developers use the programming patterns using in other programming languages like Java and C# in the JavaScript environment.

How does React Js work?

React Js work by easing out the workload in developing dynamic web applications. In a dynamic web app, the most complex part is the rendering and the frequent DOM manipulations. This DOM manipulations seems to the most heaviest part in the rendering process in a dynamic web application. Even though the most common available web frameworks has reduced the load on the developer regarding the DOM updates. But the load in the rendering still remains the same. Also based on the location of the DOM element, an update process may trigger further updates in other DOM elements further complicating the process. React Js work by making using of a virtual DOM to update the DOM elements.



What is virtual DOM?

Virtual DOM is a JavaScript based representation of the actual DOM that is being rendered in the browser. The manipulations that the application makes to the DOM is rendered in the virtual DOM and the final changes are computed and compared with the original DOM. Finally while updating, only the changes made are updated to the real DOM. This reduces the overall load in the rendering process when compared to the direct DOM manipulation. This makes the dynamic web applications get rendered with ease and without much stress on the rendering part

Other Uses of React Js

React Js makes no assumption about the use of the other technology stack. React Js takes care of the view part of the application. This makes React Js very easy to mix up with applications that are built on other technologies, and also to start with an application from scratch. Also React Js framework is extended and made use for developing applications in the mobile device domain and named as React native. Using React native so many successful applications have launched and are running successfully.

Setting up the development environment

Setting up the development environment is very easy. We must have nodejs installed in our system. For easy react js setup, we have an application called the create react app which is available as a nodejs package. Install create react app using the following command.

Npm install -g create-react-app

Now issue the following command to start a new project

create-react-app new <project-name>

This will create the necessary files and install the necessary packages

After this navigate inside the created project folder and issue the following command to run the project

npm start

This will fire up a browser tab and then will launch the application. We can start editing the index.js file and look the changes in the browser instantaneously. The learning process can be further extended using the React Js documentation. Once the development environment is setup, we can start with the development process by following the documentation.

Conclusion

This post gave an overall taste of the basic introduction to the React Js framework, some of the advantages of using it, ways to set it up and start with the development process with the help of documentation. What else are we waiting for, Let’s get started.




No Comments


You can leave the first : )



Leave a Reply

Your email address will not be published. Required fields are marked *