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?
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?
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
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.
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.