We have successfully rendered something on to the screen, but that was already a lot of code for such as simple form. And it is not going to get any better. To make it clear the role of each input element, we should attach a label to each one. If we add this label on top of the input, the code will look even more bloated:

const emailInput = React.createElement('input', { type: 'email' });
const emailField = React.createElement('label', null, 'Email', emailInput);
const passwordInput = React.createElement('input', { type: 'password' });
const passwordField = React.createElement('label', null, 'Password', passwordInput);
const registerButton = React.createElement('button', null, 'Register');
const registrationForm = React.createElement('form', null, emailField, passwordField, registerButton);

A typical web application has thousands of moving parts. Using createElement thousands of times can make the code unreadable, so let's try an alternative: JSX.

JSX, or JavaScript XML, is a syntax that allows you to create React elements and components in XML format. For example, our registrationForm element would look like this in JSX:

<form>
  <label>
    Email
    <input type="email" />
  </label>
  <label>
    Password
    <input type="password" />
  </label>
  <button>Register</button>
</form>

The structure of our element is now immediately more clear. But you might be thinking, "But that's just HTML!", and you are not wrong. JSX is designed to look and work just like HTML. So let's try to replace the registrationForm element with the new JSX syntax and see what happens:

<script>
  const RegistrationForm = () => (
    <form>
      <label>
        Email
        <input type="email" />
      </label>
      <label>
        Password
        <input type="password" />
      </label>
      <button>Register</button>
    </form>
  );
  ReactDOM.render(<RegistrationForm />, document.getElementById('renderTarget'));
</script>

When we open index.html on the browser, it will now throw an error message on the console which reads:

Uncaught SyntaxError: Unexpected token <

That's because JSX is not valid JavaScript.