React JS Fundamentals: Components, Props, State and Hooks Explained

React JS is one of the most popular JavaScript libraries for building modern and interactive user interfaces. Developed by Meta, React helps developers create reusable UI elements and manage changing data efficiently. It is widely used in frontend development and is an essential technology for anyone planning to become a MERN Stack developer.

If you are a beginner, understanding React components, props, state, and Hooks will help you build a strong foundation in frontend development. In this guide, we will explore these fundamental concepts with simple explanations and code examples.

What Is React JS?

React JS is an open-source JavaScript library used to build user interfaces for websites and web applications. Instead of creating an entire webpage in one large block of code, React allows developers to divide the interface into smaller, reusable components.

For example, an e-commerce website may have separate components for the header, navigation bar, product cards, shopping cart, and footer. These components work together to create a complete application.

React also uses a Virtual DOM to help update the user interface efficiently when data changes.

1. Understanding React Components

Components are the building blocks of a React application. A component is a reusable piece of code that describes a part of the user interface.

In modern React development, function components are commonly used because they are simple to write and work with Hooks.

Example of a React Component

function Welcome() {
  return <h1>Welcome to React JS!</h1>;
}

export default Welcome;

In this example, Welcome is a function component that returns a heading. You can reuse it inside another component:

function App() {
  return (
    <div>
      <Welcome />
      <Welcome />
    </div>
  );
}

export default App;

This displays the welcome message twice without repeating the component's implementation.

Why are components important?

• They make code reusable and organized.

• They simplify application maintenance.

• They allow developers to divide complex interfaces into smaller parts.

• They support teamwork by separating different parts of an application.

2. Understanding Props in React

Props, short for properties, allow one component to pass data to another component. They are commonly used to send information from a parent component to a child component.

Props are read-only from the receiving component's perspective. A child component should not directly modify the props it receives.

Example of Props

function Student(props) {
  return <h2>Hello, {props.name}!</h2>;
}

function App() {
  return (
    <div>
      <Student name="Rahul" />
      <Student name="Priya" />
    </div>
  );
}

export default App;

Here, the App component passes different names to the Student component. The child component displays the appropriate greeting based on the received prop.

You can also use destructuring to make the code cleaner:

function Student({ name }) {
  return <h2>Hello, {name}!</h2>;
}

When should you use props?

Props are useful when you want to reuse a component with different data, such as displaying multiple products, student details, profile cards, or blog posts.

3. Understanding State in React

State is data that a component manages internally and that can change over time. When state changes through React's state management functions, React schedules an update so the interface can display the new value.

For example, a counter application needs to remember the current count. React state makes this possible.

Example of State Using useState

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

export default Counter;

In this example:

• useState(0) initializes the count to zero.

• count stores the current state value.

• setCount updates the state.

• Clicking the button increases the count by one.

React then renders the updated count on the screen.

State is useful for managing form inputs, dropdown menus, shopping cart quantities, login information, and other interactive features.

4. Understanding React Hooks

Hooks are special functions that allow function components to use React features such as state and effects. They must generally be called at the top level of a function component or a custom Hook, not inside loops, conditions, or nested functions.

Here are three commonly used React Hooks.

useState

The useState Hook manages component state. It is useful whenever a component needs to remember information that changes over time.

For example, you can use it to track whether a password is visible or hidden.

useEffect

The useEffect Hook synchronizes a component with external systems, such as browser APIs, subscriptions, or network requests.

import { useEffect } from "react";

function Welcome() {
  useEffect(() => {
    document.title = "React Tutorial";
  }, []);

  return <h2>Learn React JS</h2>;
}

The empty dependency array means this Effect runs after the component mounts, with additional development behavior possible under Strict Mode. This example updates the browser tab title.

useContext

The useContext Hook allows components to access values provided through React Context without passing props through every intermediate component.

It is useful for shared information such as a theme, language preference, or authenticated user data.

5. Difference Between Props, State, and Hooks

Although these concepts work together, each has a different purpose.

• Components: Define reusable parts of the user interface.

• Props: Pass data from a parent component to a child component.

• State: Stores data that a component can update over time.

• Hooks: Let function components use React features, including state and effects.

Understanding these differences will help you write cleaner and more maintainable React applications.

6. How to Practise React JS Fundamentals

The best way to learn React JS is through practical projects. Start with small applications and gradually introduce more complex functionality.

Consider building these beginner-friendly projects:

1. Counter App: Practise state management using useState.

2. Student Profile Cards: Learn how to pass data using props.

3. To-Do List: Practise components, state, and event handling.

4. Theme Switcher: Explore state and Context for managing light and dark themes.

5. Product Listing Page: Combine reusable components, props, and state.

Once you understand these fundamentals, you can explore React Router, API integration, form handling, and state management libraries.

Conclusion

React JS fundamentals provide the foundation for developing interactive and reusable web applications. Components help organize your interface, props allow components to share data, state manages changing information, and Hooks provide access to important React features.

If you are planning to build a career in frontend development or MERN Stack development, practise these concepts regularly and apply them in small projects. A strong understanding of React fundamentals will make it easier to develop larger applications and learn advanced React techniques.

Start with simple examples, experiment with your code, and gradually build projects that solve real-world problems. Consistent practice is one of the most effective ways to become confident in React JS development.