ReactJS Props:

Syntax:

<MyComponent prop1="value1" prop2="value2" />

Where prop1 and prop2 are the names of the props passed to the component MyComponent.

Example:

import React from 'react';

const MyComponent = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

const App = () => {
  return (
    <MyComponent title="Welcome to React Props!" description="This is a demo of React Props." />
  );
}

export default App;

Output:

This will output:

Welcome to React Props!
This is a demo of React Props.

Explanation:

Props (short for properties) are parameters passed to a React component. They allow you to customize the behavior of the component and provide data to be rendered.

In the example above, we have created a MyComponent component which receives two props - title and description. The component then uses these props to render a heading and a paragraph.

In the App component, we have passed values for the title and description props. These values are then passed to the MyComponent component as props.

Use:

Props are used to pass data and configuration options to React components. They allow you to customize the behavior of the component and provide data to be rendered.

Important Points:

• Props are read-only, meaning that components cannot modify their own props.
• Props can only be passed from parent components to child components.
• Props should be used to pass data and configuration options to components, while component state should be used for component-specific state.

Summary:

• Props are parameters passed to a React component.
• They are read-only and can only be passed from parent components to child components.
• Props are used to customize the behavior of the component and provide data to be rendered.