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.
  Types of components :

• functional components

• class components

Example:

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


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

Props:

• props stands for properties.
• they are like function parameters in javascript
• props are used to pass data from parent componts to child component.
• props are read-only .child can not modify them.

Example:

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

function Parent() {
  return <Child color="Blue" />;
}