Components & Props

React components are JavaScript functions that return JSX. They accept props (properties) as inputs.

Props are read-only — a component cannot modify its own props.

Syntax

REACT

1
2
3
4
5
6
7
8
9
10

function Greeting({ name, age }) {
    return (
        <div>
            <h2>Hello, {name}!</h2>
            <p>Age: {age}</p>
        </div>
    );
}

<Greeting name="John" age={25} />

Components with Props

REACT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function Greeting({ name, age }) {
    return (
        <div className="greeting">
            <h2>Hello, {name}!</h2>
            <p>Age: {age}</p>
        </div>
    );
}

function App() {
    return (
        <div>
            <Greeting name="Alice" age={25} />
            <Greeting name="Bob" age={30} />
        </div>
    );
}

Try It Yourself

Practice

1

Exercise

Create a React component that displays a user name.

Answer

function UserName({ name }) {
    return <h2>{name}</h2>;
}

Quick Quiz

1

Are props mutable in React?

Yes

No

Sometimes

Only in classes

Props are read-only. Components cannot modify their own props.

Retry Quiz

Interview Questions

What is the difference between state and props?

Props are passed from parent to child and are read-only. State is managed within a component and can be updated.

Tutorial Complete

Back to React