What is ReactJS?

ReactJS is an open source, component-based JavaScript front-end library used for developing reusable UI components. ReactJS first appeared in May 2013 and it is developed and maintained by Facebook. Right now, ReactJS is a widely used library for developing single page front-end applications.

Why is ReactJS so popular?

1. ReactJS makes it easier to develop dynamic web applications. It requires less coding and offers more functionality.
2. React uses a virtual DOM which is faster than the regular DOM. It helps to improve the performance of the application.
3. A single React app contains multiple components. And each component has its own logic and controls. These components can be reused throughout the application and it helps to reduce development time.
4. React Native, a framework derived from React, can be used for developing mobile applications.

Now let’s take a look at the key features of ReactJS library.

1. JSX

JSX is the language used for defining user interfaces in ReactJS. JSX allows you to write HTML structure in the same file as JavaScript code.

2. Virtual DOM

React’s Virtual DOM is a lightweight version of the real DOM. When an object’s state changes, Virtual DOM only updates that object. This makes Virtual DOM faster than the real DOM.

3. One-Way data flow

In React, child components are nested within parent components. Because of that React’s one-way data flow makes it easier to debug errors.

Components in React

Components are the building blocks of React applications. Each component has its own properties and functions.

Features of React components,

1. Reusable
2. Can be nested inside another component
3. Components can receive props, data passed by other components.

Class components and functional components are the two types of components in React. These components are extended from React.Component parent class and they inherit a method called render(), which is used to specify how the component renders to the DOM. Each component in a React application has a life cycle. The methods that define the lifecycle are also inherited from React.Component class.

React class component

Props in React

Props (properties) are used to pass data or arguments to other components. Props make components more dynamic. However they are read-only and cannot be changed.

Passing ‘name’ prop to Welcome component

Receiving ‘name’ prop in Welcome component

State in React

State is used to keep data inside a component. States are read write enabled so they can be updated. In class components, the setSate method is used to update the state.

Defining ‘name’ state and updating the state using setState method

Anyone with a basic knowledge of HTML and JavaScript can easily learn ReactJS. In a future article we will discuss how to get started with ReactJS.