What Is ReactJS?

React Introduction

Facebook introduced the React framework in March 2013. It is a free and open-source JavaScript tool that helps developers build user-friendly and dynamic websites or apps.

React is a fast, clean, and easy-to-use library for handling large applications smoothly.

In today’s world, React has become one of the most popular tools for modern front-end development.

React Versions

Over the years, React has released major versions, and each version has introduced new features:

React 0.14 (2015): This version introduced stateless functional components, which are simple components and don’t need to manage the data (state). This function is faster and easier when we want to display something.

React 15 (2016): React 15 brought better performance and improved error handling. It also introduced fragments that allow you to return multiple elements from a component without wrapping them in a div.

React 16 (2017): React 16 came with a new internal engine that made React faster and more stable. It introduced error boundaries, so components could catch and handle JavaScript errors without crashing the entire app.

React 17 (2020): This version didn’t add new features but focused on making it easier to upgrade React itself. It also allowed multiple versions of React to run on the same page, which is helpful in large apps and team projects.

React 18 (2022): React 18 introduced automatic batching (better performance by grouping updates), transitions (for smoother UI updates), and a new concurrent rendering engine for faster user experience.

React 18.3 (April 2024): React 18.3 added deprecation warnings, which are showing alerts during development to tell you that some features you’re using will be removed or changed in the next version (React 19).

React 19.0 (December 2024): React 19.0 was released with major updates like async actions in transitions, new useActionState hook, support for server components, and better hydration & context APIs.

React 19.1.0 (March 2025): React 19.1.0 version provides more accurate and readable error messages in the dev console bar, so you know exactly where a bug came from.

Note: It is important to update your React up-to-date for new pre-built features and performance improvements.

How To Install React?

You can set up the React project using different methods, but the most popular choice is create-react-app due to its simplicity and being beginner-friendly.

First, we build a React project using create-react-app.

You need to install Node.js on your system. Download from Node.js.org.

After successfully installed, then type this command in your terminal:

npx create-react-app my-app

Then go to the project using this command:

cd my-app

Run your app:

npm start

Manually React Setup (Step-by-Step)

1. Create a project folder:

Run this command:

mkdir my-app

Then run this command:

cd my-app

2. Initialize npm (creates package.json):

npm init -y

3. Install React and ReactDOM:

npm install react react-dom

4. Install Webpack and Babel (development dependencies):

npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
npm install --save-dev html-webpack-plugin

5. Project Structure

my-app/
│
├── public/
│   └── index.html         ← Your main HTML file
│
├── src/
│   └── index.js           ← Your main React file
│
├── package.json
├── webpack.config.js
└── .babelrc

6. Create these configuration files according to the root

Create webpack.config.js file:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  devServer: {
    static: './dist',
    open: true,
    port: 3000,
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  }
};

Create .babelrc file:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

7. Create React Files

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Create src/index.js file:

import React from 'react';
import ReactDOM from 'react-dom/client';

const App = () => {
  return <h1>Hello from Manual React Setup!</h1>;
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

8. Add this Scripts in package.json

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}

9. Run Your React App

npm start

Key Features of React

• JSX (JavaScript XML)
• Components
• Virtual DOM
• State Management
• Props (Properties)
• Hooks

Simple React component example:

import React from 'react';

class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}

export default Greeting;

Pros And Cons of ReactJS

Pros of React:

1. Reusable Components: In React, you can build small blocks (components) only once and use them in many places. This functionality saves the developers’ time and makes the code cleaner.
2. Virtual DOM: React doesn’t directly update the real webpage. Instead, it first updates a copy (meaning Virtual DOM), then finds specific changes, and then updates only that part. This makes the app faster.
3. Strong Community and Ecosystem: React is a large community itself that provides us a wide range of resources, libraries and powerful third-party tools.

Cons of React:

1. Learning Curve: Sometimes JSX(HTML inside JavaScript) and state handling can be confusing for beginners. so you could take time for the learning.
2. Frequent Updates: React sometimes creates confusion because its tutorials or documentation might be outdated.
3. Integration with Other Libraries: React is a flexible library, but connecting with other tools or libraries, like state management are can become hard and requires experience.