React - Components and props

Components :

• In react , components is a reusable and independent piece of UI.
• Think of its like a function or building block that return html with javascript logic.
• Components make your code modular , reusable and easy to maintain.
• They can accept props (data) and manage state (their own data).

Types of Components:

• Functional Components – These are simple JavaScript functions that return JSX. (Most commonly used today)
• Class Components – These are ES6 classes that extend React.Component and include a render() method. (Older style)

Example – Functional Component:

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

function App() 
{
  return (
    <div>
      <Welcome name="Dharshini" />
      <Welcome name="Keerthi" />
      <Welcome name="Bhuvana" />
    </div>
  );
}

Props (Properties) :

• Props stands for properties.
• They are like function parameters in JavaScript.
• Props are used to pass data from a parent component to a child component.
• They are read-only, meaning a child component cannot modify them.

Props Example :

function Child(props) 
{
  return <h2>My favorite color is {props.color}</h2>;
}
function Parent() 
{
  return <Child color="Blue" />;
}