Day 60: React Course on Udemy

Props

  1. Props is short for properties.
  2. They are how components "talk" to each other.
  3. They allow data to be passed from parent to child top-down (uni-directional data flow).
  4. Props Contain immutable data (not changing)

Props with Stateless Functional Components

// curly brackets indicate a JavaScript expression we want to evaluate
// props argument will be a JavaScript object
// our expression is the props JavaScript object we want to evaluate
// on our props object, we want to evaluate the value of the name property on that object (we need to pass this from top down)

let Person = function(props) {
  return(
    <h1>Hi, {props.name}</h1>
  );
}

// behind the scene, it looks like this
// let props = {
//  name: "Himashi"
// }

// name automatically belongs to the props object
// you can pass in multiple prop values for name
ReactDOM.render(
  <div>
    <Person name="Himashi"/>
    <Person name="Rob"/>
    <Person name="Sarah"/>
  </div>,
  document.getElementById("app")
);