What's a React Component?

chantastic - Dec 3 '19 - - Dev Community

A React Component is a function that returns a React Element.

What's a React Element?

Great question!
A React Element is anything between angle brackets:

<h1>Title</h1>
<div>...content...</div>
<App />
<Pokemon />
Enter fullscreen mode Exit fullscreen mode

These are all React Elements because they're wrapped in JSX angle brackets.

These elements look like HTML tags but aren't.
Those tags get converted to function calls:

React.createElement("h1", null, "Title");
React.createElement("div", null, "...content...");
React.createElement(App);
React.createElement(Pokemon);
Enter fullscreen mode Exit fullscreen mode

So React Elements can be created from host elements like h1 and div or Components like App and Pokemon.

How do I Create a Component?

A React Component is just a function that returns a React Element.

function MyComponent() {
  return <h1>Look what we did!</h1>;
}
Enter fullscreen mode Exit fullscreen mode

You can then use it by creating a React Element from it:

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Now you know how to create a component!

Give it a Try!

Give your newfound knowledge a try.
Open this CodeSandbox directly in your browser and extract a component.

Find the <h1>Bulbasaur</h1> React Element and turn it into a component.


Follow the 🧵 on Twitter:

Subscribe on YouTube:

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .