Just like HTML

At the end of the day, the job of a React component is to render HTML into the browser DOM. This is why JSX has support for HTML tags, out of the box. In this section, we'll look at some code that renders some of the available HTML tags. Then, we'll cover some of the conventions that are typically followed in React projects when HTML tags are used.

Built-in HTML tags

When we render JSX, element tags are referencing React components. Since it would be tedious to have to create components for HTML elements, React comes with HTML components. We can render any HTML tag in our JSX, and the output will be just as we'd expect. If you're not sure, you can always run the following code to see which HTML element tags React has:

// Prints a list of the global HTML tags 
// that React knows about. 
console.log( 
  'available tags', 
  Object.keys(React.DOM).sort() 
); 

You can see that React.DOM has all the built-in HTML elements that we need, implemented as React components. Now let's try rendering some of these:

import React from 'react'; 
import { render } from 'react-dom'; 
 
// React internal defines all the standard HTML tags 
// that we use on a daily basis. Think of them being 
// the same as any other react component. 
render(( 
  <p> 
    <button /> 
    <code /> 
    <input /> 
    <label /> 
    <p /> 
    <pre /> 
    <select /> 
    <table /> 
    <ul /> 
  </p> 
  ), 
  document.getElementById('app') 
); 

Don't worry about the rendered output for this example; it doesn't make sense. All we're doing here is making sure that we can render arbitrary HTML tags, and they render as expected.

Note

You may have noticed the surrounding <p> tag, grouping together all of the other tags as its children. This is because React needs a root component to render; you can't render adjacent elements, like (<p><p><p>) for instance.

HTML tag conventions

When we render HTML tags in JSX markup, the expectation is that we'll use lowercase for the tag name. In fact, capitalizing the name of an HTML tag will straight up fail. Tag names are case sensitive and non-HTML elements are capitalized. This way, it's easy to scan the markup and spot the built-in HTML elements versus everything else.

We can also pass HTML elements any of their standard properties. When we pass them something unexpected, a warning about the unknown property is logged. Here's an example that illustrates these ideas.

import React from 'react'; 
import { render } from 'react-dom'; 
 
// This renders as expected, except for the "foo" 
// property, since this is not a recognized button 
// property. This will log a warning in the console. 
render(( 
  <button foo="bar"> 
    My Button 
  </button> 
  ), 
  document.getElementById('app') 
); 
 
// This fails with a "ReferenceError", because 
// tag names are case-sensitive. This goes against 
// the convention of using lower-case for HTML tag names. 
render( 
  <Button />, 
  document.getElementById('app') 
); 

Note

Later on in the book, we'll cover property validation for the components that we make. This avoids silent misbehavior as seen with the foo property in this example.