How React JS Works: Components, State, and Props Explained Simply

Introduction

After understanding why developers use React JS, the next important step is learning how React actually works. Many beginners feel confused by terms like components, state, and props — even though these are the core concepts of React.

In this article, we’ll break down how React JS works, using simple explanations and clear examples, without unnecessary complexity.

---

How React JS Thinks About the UI

Traditional websites update the page by reloading everything. React takes a different approach.

React treats the user interface as:

A collection of small, reusable pieces called components

Each component controls:

• What is displayed

• How it behaves

• When it updates

When data changes, React automatically updates the affected parts of the UI.

---

What Are Components in React?

A component is a reusable piece of the interface.

Examples of components:

• Button

• Navbar

• Card

• Form

• Footer

Instead of writing HTML repeatedly, React lets you build once and reuse.

---

Example of a Simple React Component

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

This component:

• Is written in JavaScript

• Returns UI using JSX

• Can be reused anywhere in the app

---

Why Components Are Important

Components help developers:

• Organize code better

• Reuse UI logic

• Maintain large applications

• Work efficiently in teams

In large projects, hundreds of components work together to form one application.

---

What Is JSX?

JSX looks like HTML but works inside JavaScript.

Example:

const title = "Hello React";

return <h1>{title}</h1>;

JSX allows you to:

• Combine logic and UI

• Use JavaScript expressions inside markup

• Write cleaner, more readable code

Although JSX is optional, it is widely used because it improves developer experience.

---

What Is State in React?

State represents data that can change over time.

Examples of state:

• User input

• Button clicks

• Toggle values

• API responses

When state changes, React automatically re-renders the component.

---

Simple State Example

import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

What happens here:

• count stores the current value

• setCount updates the value

• UI updates instantly when clicked

---

Why State Matters

Without state:

• UI would be static

• Interactions would feel slow or broken

State is what makes React applications interactive and dynamic.

---

What Are Props in React?

Props (short for properties) are used to pass data from a parent component to a child component.

Props are:

• Read-only

• Passed like function arguments

• Used to customize components

---

Example of Props

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

function App() {
  return <Greeting name="Faris" />;
}

Here:

• name is a prop

• The Greeting component displays dynamic data

---

Difference Between State and Props

Feature	State	Props
Changes over time	Yes	No
Owned by component	Yes	No
Passed to child	Yes	Yes
Controls UI updates	Yes	No

Understanding this difference is crucial when learning React.

---

How React Updates the UI

When something changes:

1. State is updated

2. React updates the Virtual DOM

3. React compares changes

4. Only the necessary parts are updated in the browser

This process keeps React applications fast and efficient.

---

Why These Concepts Matter Together

Components, state, and props work together to:

• Keep code modular

• Manage data flow clearly

• Make UI predictable

Most React patterns and libraries are built on top of these core ideas.

---

Common Beginner Mistakes

Many beginners struggle because they:

• Try to modify props directly

• Store too much data in state

• Create overly large components

Learning these basics early helps avoid bad habits later.

---

When You Truly Understand React

You know React well when you can:

• Break UI into components

• Decide what should be state

• Pass data cleanly using props

• Predict how UI will update

Once these fundamentals click, learning advanced React becomes much easier.

---

Conclusion

React JS is not magic — it’s a structured way of managing UI using components, state, and props.

By understanding how these three concepts work together, you gain a strong foundation to build scalable, maintainable, and interactive web applications.

This knowledge is essential before moving on to topics like routing, hooks, and performance optimization.