Learning Redux

Functional components

To turn our little snippet into a React component, we need to turn the simple constant into a function. We will pass a name to the function and then output hello {name}!:

const Greeting = ({ name }) => (
  <h1>
    hello {name}!
  </h1>
)

It is best practice to name React components starting with an uppercase letter, to be able to distinguish them from simple HTML elements when they are used in JSX.

Note how instead of passing name as a single argument, we are expecting an object with a name property to be passed. React passes all properties as an object via the first argument. Then we use de-structuring to pull out the name from the object. If we wanted to process the input before rendering JSX (for example, to make the name ...