DEV Community

loading...
Cover image for Functional Components with document.createElement, React.createElement, and JSX

Functional Components with document.createElement, React.createElement, and JSX

Christina Gorton
Developer Advocate, Technical Writer, and Instructor. Courses on LinkedIn, Egghead, Design+Code, and Skillshare. https://egghead.io/instructors/christina-gorton/?af=1c6fpu
・2 min read

Last week I sat in on students at Lambda School learning how to create reusable functional components with vanilla JS. This week they will be learning how to create functional Components in React. I wanted to help bridge their knowledge a little so I am taking the components they wrote in vanilla JS and recreating them with React.createElement and with JSX.

So let's get started.
First we have our vanilla JS component. The goal was to create a reusable panel component. ( I have removed some of the code and objectives that's not necessary for this blog post )

Students learned about functional components and how to use document.createElement to add elements to the DOM.

I wanted to show how to do this the "React way" with both React.createElement and JSX.
Let's take a look at React.createElement first.

React.createElement

var Panel = function Panel(props) {
  var title = props.title,
    content = props.content;
  return React.createElement(
    "div",
    {
      className: "panel"
    },
    React.createElement(
      "div",
      {
        className: "panel-bar"
      },
      React.createElement("h3", null, title),
      React.createElement(
        "div",
        {
          className: "panel-buttons"
        },
        React.createElement(
          "button",
          {
            className: "panel-btn-open"
          },
          "Open"
        ),
        React.createElement(
          "button",
          {
            className: "panel-btn-close hide-btn"
          },
          "Close"
        )
      )
    ),
    React.createElement(
      "div",
      {
        className: "panel-content"
      },
      content
    )
  );
};
Enter fullscreen mode Exit fullscreen mode

You can see from the code above the React.createElement way is very similar to using document.createElement.

React.createElement

React.createElement(
          "button",
          {
            className: "panel-btn-open"
          },
          "Open"
        ),
Enter fullscreen mode Exit fullscreen mode

document.CreateElement

 const buttonOpen = document.createElement('button');
 buttonOpen.classList.add('panel-btn-open');
 buttonOpen.textContent = 'Open';
Enter fullscreen mode Exit fullscreen mode

We create an element. In this case a div. We give it a class, panel-btn-open, and give it it's text content, "Open"

Both of these ways work fine but are very verbose.
This is where JSX comes in.

JSX

JSX looks almost exactly like HTML but it comes with the ability to use JavaScript to add even more power to your component.
Below is an example of our code in JSX compared to how it looks by using React.createElement.

A comparison of our code in JSX and React.createElement on the Babel website

const Panel = props => {
  const { title, content } = props;

  return (
    <div className="panel">
      <div className="panel-bar">
        <h3>{title}</h3>
        <div className="panel-buttons">
          <button className="panel-btn-open">Open</button>
          <button className="panel-btn-close hide-btn">Close</button>
        </div>
      </div>
      <div className="panel-content">{content}</div>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

In my opinion this is a lot easier to read and understand at a glance than the previous two ways.
We are creating each element, giving them class names, and text content just like we did before.

This was a quick comparison of creating components with document.createElement, React.createElement, and JSX that hopefully helps explain how to use each. You can look at this CodeSandBox to see all of the code used here and get a look at how we will be using props, and one way to pull in data.

Discussion (2)

Collapse
yogeswaran79 profile image
Yogeswaran

Hey there! I shared your article here t.me/theprogrammersclub and check out the group if you haven't already!

Collapse
coffeecraftcode profile image
Christina Gorton Author

Thanks, I'll check it out :)