Beginning ReactJS Foundations Building User Interfaces with ReactJS

3JSX

Newcomers to React often remark on how it appears that React breaks one of the cardinal rules of web development, which is to not mix your programming logic with your HTML. This chapter explains where this misperception about React comes from and introduces JSX, which gives us an easy, HTML-like syntax for composing React components. In this chapter, you'll learn:

• How to write JSX.
• How modules work in JavaScript.
• What a transpiler does.
• How to include literal JavaScript in JSX code.
• How to do conditional rendering in React.
• How to render children in JSX.

JSX IS NOT HTML

Take a look first at Listing 3-1. If you know some HTML, you can probably guess what the result of this function will be—a form containing two input fields and a button will be returned.

LISTING 3-1: A React component

import React from "react";
 
function Login(){
 
    const handleSubmit = (e)=>{
        e.preventDefault();
        console.log(`logging in ${e.target[0].value}`);
 
        // do something else here
    }
 
    return (
        <form id="login-form" onSubmit={handleSubmit}>
            <input  type="email"
                id="email"
                placeholder="E-Mail Address"/>
            <input type="password"
                id="password"/>
            <button>Login</button>
        </form>
    );
}
 
export default Login; 

But, if you know some JavaScript, you might think the result of running this JavaScript function should be an error—HTML is not valid JavaScript, and so the value of the return statement will cause this function to fail.

However, this is a perfectly well-formed React component ...