ReactJS | Introduction to ReactJS and Create Your First Application

React is a javascript library to user interfaces very quick in the form of easily manageable components. It was developed by Facebook in 2011. To prove the performance of React, face already developed mobile applications like Instagram & Facebook in React Native which is widely used for developing mobile applications for Android and IOS.

As compared to others, React is the most popular among javascript libraries used worldwide.

Is React Better then Angular?

We simply can’t compare Angular IO with React JS, but we can surely discuss some points, which can give a good understanding of each one’s play area.

React is developed and maintained by Facebook whereas Angular is acquired by Google which is still getting updates nearly after every 6 months

Angular is a framework which is used as a whole for each and everything for a project. Angular is basically a template engine who always keeps an eye on changes on view, on other side React is a library, whose only task is to create easily manageable components and communicate with real DOM through a sync mechanism between virtual DOM in memory and component’s state.

As view and modal structure keep a layer between them, so continuous watch is required to have updated DOM, but React is very lazy πŸ˜› we always need to tell React that we are done now please update the DOM by calling a setState component method.

As Angular is itself a framework so it is always preferred to use from options we have, and Reactjs can be used in existing or with any other set of libraries which provides more freedom in terms of usage.

System Requirements to Start React Development

Make sure you have the latest version of NodeJs installed

In this post, we will create a very simple ToDo application in ReactJS to understand what ReactJS is how it works by creating components and setup communication between them.

To create ReactJS app we will install Creat React App toolchain, this will create a React app having only front end setup very useful and preferred for beginning with React.

Next, create a new React app

For development, most of the developers use Visual Studio Code (VS Code) as IDE which provides a wide variety of useful plugins like for React development Simple React SnippetsΒ and Prettier – Code formatter are very good plugins to have in VS Code.

Open React app in VS Code by running

Created react app will have a file structure as shown in the image below.

Let’s get to know about files and folders in the application directory above.

The public folder has the index.html file where the whole react app is loaded in <div id="root"></div> as we have defined it in “~src/index.js

index.js file under src keeps a track of starting component class which will be loaded on app initializations and also imports external modules and libraries.

App.js file is the base component class which is created by default.

 

After successfully creating the React app you can run on the browser by running following command in npm

It will open React application in the browser, which will look like this

Awesome! we have our React Application up and running πŸ™‚

 

 

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of