A Beginner’s Introduction to React.js

✍️Co-Authors
1. Aman Mundra
2. Jasjot Singh

Table of contents

1. What is React.js
2. Key features of React.js
3. Important React Functions (Hooks)
4. Popular React Libraries
5. Benefits of Using React.js
6. Example: A Simple React Component
7. Conclusion

1. Introduction

React.js, commonly known as React, is an open-source JavaScript library developed by Facebook for building user interfaces, specifically for single-page applications(Web applications that load a single HTML page and dynamically update content). It allows developers to create reusable UI components that efficiently update and render in response to data changes. Since its release in 2013, React has become one of the most popular tools for front-end development due to its simplicity, flexibility, and performance. As of 2025 React continues to evolve with regular updates, with the current stable version being React 19, which introduced features like APIs for resource preloading and improvements to server-side rendering.

2. Key Features of React.js

• Component-Based Architecture

Component-based architecture in React follows a pretty simple principle: divide everything into smaller segments and develop and manage each independently. Consequently, each component takes a single responsibility for its data flow of control and appearance. That is it enables teams to work on different parts of code components simultaneously without editing every other’s work.

• JSX (JavaScript XML)

JSX is a syntax extension that allows developers to write HTML-like code within JavaScript. It makes the code more readable and easier to understand, blending the power of JavaScript with the familiarity of HTML.

• Virtual DOM

The virtual DOM (VDOM) is a concept where an ideal or “virtual” representation of a UI is kept in memory and synced with the “real” DOM by the React DOM library. React uses VDOM to update the actual DOM efficiently.

• Unidirectional Data Flow

React, a Javascript library, uses unidirectional data flow. The data from the parent is known as props(Short for Properties). Props are read-only, meaning child components can’t change them. You can only transfer data from parent to child and not vice versa.

3. Important React Functions

• useState

One of the most well-known React hooks is the useState() hook. It lets you add a state variable to your component. The useState() hook can conveniently hold strings, arrays, numbers, objects and much more.

Below code is a simple counter. It starts at 0, and every time you click the Increment button, the number goes up. The useState hook is what lets React remember and update the count.

import React, { useState } from ‘react’;function Counter() {
 const [count, setCount] = useState(0); return (
 <div>
 <p>Count: {count}</p>
 <button onClick={() => setCount(count + 1)}>Increment</button>
 </div>
 );
}

• useEffect

The useEffect hook handles side effects, such as fetching data, subscribing to events, or updating the DOM. It runs after every render by default or when specific dependencies change.

In Below code React loads data from an API when the page first opens. While it’s waiting, it shows “Loading…”, and once the data arrives, it displays the result. The useEffect hook is what tells React to run this code after the component is shown.

import React, { useState, useEffect } from ‘react’;function DataFetcher() {
 const [data, setData] = useState(null); useEffect(() => {
 fetch(‘https://api.example.com/data')
 .then(response => response.json())
 .then(data => setData(data));
 }, []); // Empty dependency array means this runs once on mount return <div>{data ? JSON.stringify(data) : ‘Loading…’}</div>;
}

• useContext

When managing data between parent and child components, React gives us the ability to use something known as props to pass data down from parent to child. Props can only flow in one direction, from parent components to child components (and further down). When state changes occur on parent elements, React will re-render components that depend on those values.

• useReducer

useReducer() hook is a state hook used often as a versatile alternative to useState(). It helps aggregate multiple states of a component in one place, particularly in scenarios that involve the state’s changes at multiple nesting levels, and originating from multiple action types and sources. useReducer() is preferred over useState() when dealing with complex state logic, multiple related state values, or when the next state depends on the previous state in non-trivial ways.

Below code is a counter, but using useReducer. Instead of just updating a number directly, it uses a small function (called a reducer) to decide how the state changes when you send it an “increment” action. This is helpful for more complex apps with lots of updates.

import React, { useReducer } from ‘react’;const initialState = { count: 0 };
function reducer(state, action) {
 switch (action.type) {
 case ‘increment’:
 return { count: state.count + 1 };
 default:
 return state;
 }
}function Counter() {
 const [state, dispatch] = useReducer(reducer, initialState);
 return (
 <div>
 <p>Count: {state.count}</p>
 <button onClick={() => dispatch({ type: ‘increment’ })}>Increment</button>
 </div>
 );
}

4. Popular React Libraries

React’s ecosystem includes powerful libraries that enhance its functionality. Here are some widely used ones:

• React Router

React Router is the standard library for handling navigation in React applications. It enables client-side routing, allowing users to navigate between views without full page reloads.

Below example shows how to make a mini website with two pages: Home and About. The links let you move between pages instantly, without refreshing the whole site. That’s what React Router is for  -  smooth page navigation inside your app

import { BrowserRouter, Route, Routes, Link } from ‘react-router-dom’;
function App() {
 return (
 <BrowserRouter>
 <nav>
 <Link to=”/”>Home</Link> | <Link to=”/about”>About</Link>
 </nav>
 <Routes>
 <Route path=”/” element={<Home />} />
 <Route path=”/about” element={<About />} />
 </Routes>
 </BrowserRouter>
 );
}

• Redux

Redux can help us build maintainable apps by giving us a single central place to put global app state.

This version uses Redux, which is like a central storage for your app’s data. Instead of each component managing its own count, Redux keeps the count in one place so different parts of the app can share it. The Provider makes this shared data available to all components.

import { createStore } from ‘redux’;
import { Provider, useSelector, useDispatch } from ‘react-redux’;const reducer = (state = { count: 0 }, action) => {
 switch (action.type) {
 case ‘INCREMENT’:
 return { count: state.count + 1 };
 default:
 return state;
 }
};const store = createStore(reducer);function Counter() {
 const count = useSelector(state => state.count);
 const dispatch = useDispatch();
 return (
 <div>
 <p>Count: {count}</p>
 <button onClick={() => dispatch({ type: ‘INCREMENT’ })}>Increment</button>
 </div>
 );
}function App() {
 return (
 <Provider store={store}>
 <Counter />
 </Provider>
 );
}

• Axios

Axios is a promise-based HTTP client for making API requests. It’s commonly used in React for fetching data from back-end services

5. Benefits of Using React.js

• Performance: The virtual DOM and efficient diffing algorithm make React applications fast and responsive.
• Reusability: Components can be reused across different parts of an application, reducing development time.
• Community Support: React has a large and active community, providing extensive resources, tutorials, and third-party libraries.
• Flexibility: React can be integrated into existing projects and works well with other frameworks or back-end technologies.

6. Example: A Simple React Component

Below is an example of a basic React component using JSX, useState, and useEffect to demonstrate dynamic behavior.

This app lets you type your name, and it updates both the page and the browser tab title with your greeting (like “Hello, Alex!”). useState stores your name, while useEffect makes sure the browser title changes whenever the name changes.

import React, { useState, useEffect } from ‘react’;function Greeting() {
 const [name, setName] = useState(“Developer”);
 useEffect(() => {
 document.title = `Hello, ${name}!`;
 }, [name]);
 return (
 <div className=”greeting”>
 <h1>Hello, {name}!</h1>
 <input
 type=”text”
 value={name}
 onChange={(e) => setName(e.target.value)}
 />
 <p>Welcome to React.js!</p>
 </div>
 );
}
export default Greeting;

To use this component, you can include it in a React application like so:

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import Greeting from ‘./Greeting’;

ReactDOM.render(<Greeting />, document.getElementById(‘root’));

7. Conclusion

React.js has transformed front-end development with its component-based architecture, virtual DOM efficiency, and powerful hooks ecosystem. Its flexibility, reusability, and strong community support make it an excellent choice for building modern, scalable web applications. Whether you’re creating simple interfaces or complex platforms, React provides the tools and performance needed for today’s dynamic user experiences.

Originally published on the Welzin Medium.