JSX

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

Get Building Enterprise JavaScript Applications now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.