React: Front-End Framework

React is a JavaScript library that is used for building user interfaces. React is used for the development of single-page applications and mobile applications because of its ability to handle rapidly changing data. React allows users to code in JavasScript and create UI components.

Why use React?

  • Virtual DOM – A virtual DOM object is a representation of a DOM object. Virtual DOM is actually a copy of the original DOM. Any modification in the web application causes the entire UI to re-render the virtual DOM. Then the difference between the original DOM and this virtual DOM is compared and the changes are made accordingly to the original DOM.
  • JSX – Stands for JavaScript XML. It is an HTML/XML JavaScript Extension which is used in React. Makes it easier and simpler to write React components.
  • Components – ReactJS supports Components. Components are the building blocks of UI wherein each component has a logic and contributes to the overall UI. These components also promote code reusability and make the overall web application easier to understand.
  • High Performance – Features like Virtual DOM, JSX and Components makes it much faster than the rest of the frameworks out there.
  • Developing Android/Ios Apps – With React Native you can easily code Android-based or IOS-Based apps with just the knowledge of JavaScript and ReactJS.
  • You can start your react application by first installing “create-react-app” using npm or yarn.
npm install create-react-app --global
  • After that you can create a new react app by using.
create-react-app app_name

Then navigate into the “app_name” folder and type yarn start or npm start to start your application.

 

  • A typical React application looks like this:

A small React Example:

  • Update index.js file
ReactDOM.render( 
  <h1>Hello DEVELOPERS!!</h1>, 
  document.getElementById('root') 
);

  • Use the below commands to run your application.
npm start

 

Discussion