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.
$ npm i -g create-react-appNext, create a new React app
$ create-react-app react-todo-app
$ cd react-todo-appFor 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
$ code .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
$ npm startIt will open React application in the browser, which will look like this
Awesome! we have our React Application up and running 🙂
