How to create a functional component in React

With the introduction of Hooks in the latest releases of React, functional components have become all the rage. Let's look at how you would create one!

    function Greeting(props){
      return <div>Hello, {props.name}!</div>
    }

That's it - a functional React component is simply a pure function, from which you return the JSX that your component should render.

Within this function you can have other functions, hooks, and even other components. Props are received as normal, and can be accessed via the props parameter.

Check out this code sandbox:

This is part of the React bite-size series of posts. Check out the rest here!