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...