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

#react #beginners #lambdaschool #javascript

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
    )
  );
};

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"
        ),

document.CreateElement

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

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.

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>
  );
};

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.