React JS - JSX & Props

function Food({ favorite }) {
  return <h1>I like {favorite}</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Food favorite="kimchi" />
      <Food favorite="ramen" />
      <Food favorite="samgiopsal" />
      <Food favorite="chukumi" />
    </div>
  );
}

JSX is something like HTML + JavaScript.

<Food favorite="kimchi" />

In the example above, I made a JSX with Prop named "favorite" and put a value named "kimchi"

The first example shows how to send value from one component to another. In this case, it is using prop favorite and the Food component is receiving the value using the { favorite } argument.