# Props

// JavaScript
// define


// param => called parameter
function Fruits(param) {
  
}


// call or excute
// 13 => called arguments
Fruits(13)

// <p style="" width="200"></p> => element
// called 
// style => attribute, property
// width => attribute, property


// React
// properties => props
// function based
// simple props use
// <MyApp title="..." width="..." position: "..." />
//given title and position and width props
function MyApp(props) {
  return (
     <div>
      {props.title} - {props.position}
    </div>
  );
}

// destructure props
// <MyApp title="..." width="..." position: "..." />
function MyApp({ title, position }) {
  return (
    <div>
      {title} - {position}
    </div>
  );
}

// Class based
// this.props
// <MyApp title="..." width="..." position: "..." />
class MyOtherApp extend React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <div>
      {this.props.title} - {this.props.position}
    </div>
    );
  }
}

// props is a object/Dictionary 
// props = {  }
// <Header title="My Header" />
// props = { title: "My Header" }
// add more
// <Header title="My Header" position="top" />
// props = { title: "My Header", position: "top" }


// test class
class Component {
  constructor(name) {
    this.name = name;
  }
  
   // perform action with name anything we can take //name or any other word like age or anything
}

class Test extend Component {
  constructor(props) {
    super(props)
  }
}