Course: Section

Get Started with Modern React: Step by Step

Episode: Title

S02・V03: React Elements

Date Created: July 17th, 2019
Last Updated: 27 days ago

Objectives
  1. We will look at “React.createElement()” in more detail.
  2. We will style the element with “#header” using CSS on the HTML page.
Watch Video
Duration: 4m 13s

createElement() Method

In the previous video, we introduced React’s createElement() method. We used it to create a React element expressing an h1 header with the text Hello, World! inside it. We then replaced it with some JSX.

Let’s comment out the JSX, and express it using React’s createElement() method again.

src/index.js
import React from "react";
import ReactDOM from "react-dom";

const rootNode = document.getElementById("root");
// const element = <h1>Hello, World!</h1>;const element = React.createElement("h1", null, "Hello, World!");
ReactDOM.render(element, rootNode);

Type (First Parameter)

We will now explain the input parameters of createElement(). The first parameter is the element type. The type can be either a tag name string, such as

  • h1, or a div tag, or any other HTML tag, or it can be a
  • React component type, or a
  • React fragment type.

Props (Second Parameter)

The second parameter is optional. It is called props, which is short for “properties”, of the element type. React props is an object of keys and values. The props object keys are akin to HTML tag attributes. In our example, the props are null.

src/index.js
import React from "react";
import ReactDOM from "react-dom";

const rootNode = document.getElementById("root");
// const element = <h1>Hello, World!</h1>;
const element = React.createElement("h1", null, "Hello, World!");

/**React.createElement(  type, // (1) tag name string, (2) React component, (3) React fragment  [props], // optional `props` object) */

ReactDOM.render(element, rootNode);

For illustration purposes, let’s add some props to our example. For example, we will add an object with a key of id, and a value of header. This is equivalent to putting an id attribute on an HTML tag. We can demonstrate that by adding some style to elements that have the id of header.

src/index.js
import React from "react";
import ReactDOM from "react-dom";

const rootNode = document.getElementById("root");
// const element = <h1>Hello, World!</h1>;
const element = React.createElement("h1", {id: "header"}, "Hello, World!");
/**
React.createElement(
  type, // (1) tag name string, (2) React component, (3) React fragment
  [props], // optional `props` object
)
 */

ReactDOM.render(element, rootNode);

Let’s go to public/index.html. We will add a style tag within the head element, giving the #header a color of red.

public/index.html
<!DOCTYPE html>
<html lang="en">

  <head>
    <style>      #header {        color: red;      }    </style>    <title>React App</title>
  </head>

  <body>
    <div id="root"></div>
  </body>

</html>

Save the file and see the header text color change to red.

Children (Third Parameter)

Let‘s go back to src/index.js. Now, the third parameter of React’s createElement() is also optional. It is the child, or possibly several children, to the type.

src/index.js
import React from "react";
import ReactDOM from "react-dom";

const rootNode = document.getElementById("root");
// const element = <h1>Hello, World!</h1>;
const element = React.createElement("h1", {id: "header"}, "Hello, World!");

/**
React.createElement(
  type, // (1) tag name string, (2) React component, (3) React fragment
  [props], // optional `props` object
  [...children]	// optional child(ren) to the `type`)
 */

ReactDOM.render(element, rootNode);

These children can be text strings or other React elements. In our example, we have a single text string child to the h1 tag type, with the text Hello, World!.

Summary

We looked at React.createElement(), showing its parameters, and we styled the element with #header using CSS on the HTML page.

Next Up…

In the next video, we will explain what JSX is, and how to use it in React.