In this section, we'll implement the obligatory "hello world" JSX application. At this point, we're just dipping our toes in the water; more in-depth examples will follow. We'll also discuss what makes this syntax work well for declarative UI structures.
Hello JSX
Without further ado, here's your first JSX application:
import React from 'react';
import { render } from 'react-dom';
render(
<p>
Hello, <strong>JSX</strong>
</p>,
document.getElementById('root')
);
Let's walk through what's happening here. First, we need to import the relevant pieces. The render() function takes JSX as the first argument and renders it to the DOM node passed as the second argument.
The actual JSX content in this example renders a paragraph with some bold text inside. There's nothing fancy going on here, so we could have just inserted this markup into the DOM directly as a plain string. However...