JSX vs HTML

Intro to React > JSX vs HTML

JSX and HTML

Any HTML element can be used in JSX. You can see on the right we have rendered a dozen or so classic HTML elements in JSX. Just like regular HTML, these are referred to as tags.

Differences between JSX and HTML

JSX requires all tags to be closed

While <img src="cat.jpg"> is a totally valid tag in an HTML document, tag must be closed in JSX. That means it has to end with />, like <img src="cat.jpg"/>. The <img> tag is called a self-closing tag and a void element tag and so it cannot have any children (tags nested within it). You will get an error if you try to render the tag with a closing tag, like <img> </img>. Another void element tag is the <input/> tag.

Attributes must be camelCased and cannot contain reserved words

In HTML, declaring CSS classes is done with the class attribute. However, this is a reserved word in JavaScript, so this must be className in JSX:

<img className="coolImg"/>

In HTML, onclick is a way to specify a click handler, but in JSX, this is onClick.

<button onClick={myFunction}>Log in</button>

JavaScript expressions can be evaluated inside JSX

Above, you'll see that between the two curly braces we have declared {myFunction} as the value of the onClick attribute. This would refer to any scoped JavaScript variables named myFunction. In fact, any JavaScript expression can be placed between these curly braces. Notice we said "expression" and not "statement". JavaScript statements are invalid inside JSX, like if statements. We'll learn more about the power of conditional rendering and dynamic JSX later.

Notice also that the JavaScript evaluated in the event handler has to be an actual JavaScript function, not a string as it would be in HTML.

// This does not work in JSX!
<button onClick="function(){ alert('hello'); }"> Say hi </button>
// This works in JSX
<button onClick={function(){ alert('hi')}}> Say hi </button>

Style attribute must be in object notation instead of a string

In HTML, you can declare style with a single string of CSS attributes separated by semi-colons:

// HTML
<div style="box-shadow: 1px 3px 1px grey; color: blue;"> Hello </div>

But in JSX, that has to be an object, and you guessed it: the keys have to be camelCase. The values also have to be strings. This is called inline-style and something we will dive deeper into.

// JSX
<div style={{boxShadow: '1px 3px 1px grey', color: 'blue'}}> Hello </div>

React Components - Custom HTML Tags

React offers the ability to create your own tags that render their own HTML. We refer to these as React components. You can see an example of this to the right, as a functional component. We'll dive deeper into these as well as other special JSX components like Fragments shortly.

Lesson 12/22

const pirateImage =
  "https://p192.p3.n0.cdn.getcloudapp.com/items/Wnuqd8er/7364860e-2d3f-4038-9abd-6dd2c618ce83.jpeg?source=viewer&v=55293d1c01462cce1ce1e2cd0581e57c";
export default function App() {
  return (
    <div>
      <h1>Captain's Tasks</h1>
      {/* This is a comment */}
      {/* This is a javascript expression mixed within JSX */}
      <div> Complex Math Equation: 1 + 1 = {1 + 1} </div>
      {/* Using a javascript expression as a JSX attribute */}
      <img src={pirateImage} />
      <div>
        <div>A nested JSX element</div>
        {/* A button with an onClick handler */}
        <button
          onClick={function () {
            alert("hi");
          }}
        >
          {" "}
          Say hi{" "}
        </button>
        {/* A self-closing input tag with a string attribute*/}
        <input placeholder="Type in here!" />
      </div>
      {/* An inline-styled element */}
      <button
        style={{
          marginTop: "10px",
          padding: "10px",
          background: "black",
          color: "white",
        }}
      >
        {" "}
        Stylin' Button{" "}
      </button>
    </div>
  );
}

Open Sandbox