React ๐ŸŽ„


We'll start from basics and get all the way to Suspense, Hooks, and advanced composition!
Each day is a 2-3 minute read with CodeSandbox and quick assignments.
Check out 2017 (below) for examples.

Day 4: Props are function arguments

If components are functions and functions take arguments, components should take arguments.

They do!

In React we call component arguments props.

Where do props come from?

Props are authored like HTML attributes. Say you want to add a name prop. Add it as an โ€œattributeโ€ where you use the component:

<Greeting name="bulbasaur" />

Now how do I use โ€˜em in the component?

React puts props in a single object. And that object is conveniently, the first argument of our component function.

Once you have the props object, you can interpolate values in with {}.

function Greeting(props) {
  return <h1>Hello {props.name}</h1>;
}

Tinker with it

Use the workspace below and play with props.

Be creative and have fun!

โ† Previous
Next โ†’

Learn other React stuff...