How does React allow creating custom components?

React strives to give its users the ability to build encapsulated, reusable components, but how does it implement this logic in JSX?

Here is a simple example of a custom user-defined component, named Greeting. It renders inside a well-known App component.

// Greeting.jsx
const Greeting = ({name}) => {
  return <span>Hi, {name} 👋</span>;
}

// App.jsx
const App = () => {
  return (
    <div>
      <Greeting name="Nikita" />
    </div>
  );
}

Let's break it down!

👉 How Greeting works?

• Greeting is just a function, which returns JSX. JSX is syntax sugar for calling React.createElement
• React.createElement expects three arguments:
  • type
  • props
  • children

Let's rewrite our Greeting component with this new knowledge.

// Greeting.jsx
const Greeting = ({name}) => {
  return React.createElement(
    'span', 
    null, 
    'Hi, ', name, ' 👋');
}

👉 How to use the Greeting now?

Turns out, createElement expects three values as type:

• tag name, like div or span
• a class or a function, that defines custom component
• React fragment type

// App.jsx
const App = () => {
 return React.createElement(
   'div',
   null,
   React.createElement(Greeting, {name})
 );
}

Simply put, createElement calls the passed function internally and uses its return value to form the component tree.

// Internal intermediate result
const App = () => {
 return React.createElement(
   'div',
   null,
   React.createElement(
     'span', 
     null, 
     'Hi, ', 'Nikita', ' 👋'
   )
 );
}

👉 Verify that it works yourself!

Go to reactjs.org, open the console and paste the last code snippet there.

Then call the App() and see the end result.
If it's the same as here 👇, you've done a great job!

{
  "type": "div",
  "key": null,
  "ref": null,
  "props": {
    "children": {
      "type": "span",
      "key": null,
      "ref": null,
      "props": {
        "children": [
          "Hi, ",
          "Nikita",
          " 👋"
        ]
      },
      "_owner": null
    }
  },
  "_owner": null
}

P.S. Follow me on Twitter for more content like this!