A form that follows every rule
You write htmlFor, maxLength, autoComplete, readOnly and tabIndex; React writes the normal HTML attributes (for, maxlength, …) into the page. Click the word Email: the input gets focus, because the label is linked to it. readOnly alone means true, like a boolean attribute in HTML.
JSX looks like HTML but is stricter: a component returns one root element (or a Fragment), every tag must be closed, and attributes use JavaScript names such as className, htmlFor and camelCase like onClick and tabIndex.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Convert to JSX: <img src="cat.png" alt="A cat"><label for="pet" class="big">Pet</label>, returned from a component.
Render a list of three products as <dt>/<dd> pairs inside a <dl> with no extra wrapper elements.
Explain it without notes
Why must a component return a single root element?
What is a Fragment, and when would you use <Fragment> instead of <>?
Why do we write className and htmlFor in JSX?
Which tags must be self-closed in JSX, and what happens if you forget?
Preview
Console
Nothing logged yet.Expected console output
<label for="email">Email</label>
<input id="email" maxlength="40" autocomplete="email" type="email">
<input id="code" readonly="" tabindex="-1" value="HECTAL">