Your first React component

We've said you can assign a chunk of JSX to a variable and you know what, that's almost a component! To turn any chunk of JSX into a component you need to make two tweaks:

  • you need to return your JSX from a function
  • your function name has to start with a capital

For example, if you turn this chunk:

const link = <a href={url}>Google</a>

into a function like this:

const Link = () = > <a href={url}>Google</a>;

you've made your first component! πŸ™Œ

You can then use it as a custom bit of HTML. Like this:

<h2>
  This crazy fox jumps over a dog <Link />
</h2>

You can reuse your new link component. Write <Link /><Link /> and you get multiple links. 🀘

Components like this are called functional React components because they're functions.

Add custom props

But let's say you want to give each Link a different URL. You can do that using props.

You can think of props as custom attributes. They're the main interface your components have with the rest of the world.

React passes props into your component as function attributes πŸ‘‡

const Link = ({ url }) => <a href={url}>Google</a>

You can now define a url when using your component:

<Link url="https://google.com" />

All of this is just syntax sugar of course. React collects your props into an object, {url: "https://google.com", ...}, and passes it into your Link function, which then uses ES6 object destructuring to take out interesting values.

You could write the same component like this:

const Link = props => <a href={props.url}>Google</a>

But that makes your code repetitive and hard to read, so most people avoid it.

Composite components and the children prop

Links that always say Google aren't very useful. We can fix that with the children prop.

Every component can have children. That's because components are meant to work just like HTML. You can always nest things!

Like this πŸ‘‡

// using a children prop
const Link = ({ url, children }) => <a href={url}>{children}</a>

// lets you nest things inside your component
<Link url="https://google.com">
  Google
</Link>

You can take this approach further when you realize that any valid JavaScript can go inside curly braces. Even more JSX.

That means you can nest more JSX inside your Link component.

<Link url="https://google.com">
  <b>Google</b>
</Link>

That's your first composite component right there. A powerful concept that lets you construct components semantically out of smaller blocks.

Why don't you give it a try with an exercise 😊

Exercise

Use this playground πŸ‘‡

Build

  • an <Avatar /> component that renders an image
  • a <Text /> component that renders things in a paragraph
  • a <Name /> component that uses Text to render something bold
  • a <Message /> component that combines all three

Try listing a few different messages in a loop.

You can use my simple styling and layouting or build your own. The goal is to practice writing and composing components.

Know someone who wants to learn React and its whole ecosystem? Share πŸ‘‡


Cheers,
~Swizec