Function components

Function components

Component functions are also sometimes called Stateless Functional Components within the React community, or SFCs for short.

But I’m lazy, so I’ll just call them function components. You can too. It’s OK, I promise.

React components are just functions.

To be more specific, components are functions that tell React how to render one type of element. Each function takes a props object, and returns a new element that will be rendered in place of the original.

As an example, take this element with type XKCDComic:

let element =
  React.createElement(XKCDComic, {
    path: 'compiling',
    number: '303',
    altText:
      "'Are you stealing those LCDs?' "+
      "'Yeah, but I'm doing it while my code compiles.'",
  })

The XKCDComic type is a function that takes some props, and maps them to an element that the browser actually knows how to render:

main.js
index.html
New
Build In Progress

So what type of props can a component receive?

Like HTML elements, they can certainly receive strings and numbers. But custom components can also receive objects, arrays, functions – or even other elements!

Component functions are usually named in CamelCase. While you could create a component with a lowercase name, it’d be… odd. So stick to the convention unless you have a really good reason.

A Contact type

Now that you know how to define components, it’s time to put your knowledge to work.

Remember the contact element from the previous example? I’ve added it to the editor below. But it doesn’t work yet, as there’s no Contact function to tell React how to render Contact elements!

Your task is to make the example work by adding a Contact function.

main.js
styles.css
index.html
New
Build In Progress