React Basics: Understanding Components, Props, and State

React is one of the most popular JavaScript libraries for building modern user interfaces.
Many beginners think React is hard, but actually it becomes very easy once you understand the core ideas.

In this blog, we will clearly understand:

• What React is
• How to start React
• Components
• Props
• State

Let’s begin step by step.

---

What is React?

React is a JavaScript library used to build interactive user interfaces.

Instead of manually updating HTML, React works like this:

Change the data → React updates the UI

So React is not magic.
It simply connects data and UI.

---

How to Start React (Basic Idea)

You can create a React app using these commands.

Using Vite

npm create vite@latest my-app
cd my-app
npm install
npm run dev

Basic React Syntax

Every React app starts with a component.

function App() {
  return <h1>Hello React</h1>;
}
export default App;

What is Component

A component is a reusable piece of UI.

Examples:

• Button
• Navbar
• Card
• Footer

Using a Component

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

Here, <Welcome /> is reused twice.

What are Props?

Props (properties) are used to pass data from parent to child component. Props are like function arguments.

Child Component(Greeting.jsx)

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

Parent Component (App.jsx)

import Greeting from "./Greeting";

function App() {
  return (
    <div>
      <Greeting name="Sadhana" />
      <Greeting name="React Learner" />
    </div>
  );
}

export default App;

Output

Hello, Sadhana
Hello, React Learner

Destructuring Props

In the above example, we accessed props using (props.name). React also allows us to destructure props directly inside the function parameter. This makes the code simpler and more readable.

Child Component with Props Destructuring (Greeting.jsx)

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

export default Greeting;

Here

• { name } is extracted from the props object
• name is the same as props.name

Why Use Props Destructuring?

• Reduces repeated props. usage
• Makes code cleaner
• Commonly used in real-world React project

What is State in React?

State is used to store data that can change over time inside a component.

In React applications, the UI is not static.
Buttons are clicked, inputs are typed, values change.
To handle these changes, React uses state.

When state changes, React automatically updates the UI.

---

Why State is Important

Without state:

• The UI cannot respond to user actions
• Data changes will not reflect on the screen

With state:

• React tracks changes in data
• The UI stays in sync with data

Common examples where state is used:

• Counter values
• Form inputs
• Toggle buttons
• Showing or hiding elements

---

Using State with useState

React provides a Hook called useState to manage state in functional components.

Basic Syntax

const [value, setValue] = useState(initialValue);

Explanation:

• value → current state value
• setValue → function to update the state
• initialValue → starting value

Simple State Examples

Counter Component

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;

How this Example works

• useState(0) initializes the state with 0
• count stores the current value
• setCount() updates the value
• Each time the button is clicked, the state changes
• React re-renders the component automatically

By understanding components, props, and state, you now have a strong foundation to build interactive React applications and confidently move on to more advanced concepts.