Introduction to JSX

React enables you to create a website by building and combining components. These components return React elements that describe what should be displayed on the page. But how can we produce these elements? React provides a special syntax called JSX, which makes this easy. In this topic, you will learn how to work with JSX.

What is JSX?

JSX is a core part of React. It makes it simple to write HTML and JavaScript together in React.

JSX looks like HTML but is neither HTML nor a string. It's an HTML-like syntax extension to JavaScript that allows you to write HTML in JavaScript. Have a look at this variable declaration:

const element = <h1 className="title">Introduction to JSX</h1>;

This example shows how you can write JSX in React. However, browsers don't recognize this syntax. Under the hood, JSX is compiled into React.createElement() calls, which return React elements. So the above example is equivalent to:

const element = React.createElement(
  'h1',
  { className: 'title' },
  'Introduction to JSX'
);

JSX also prevents Cross-Site Scripting (XSS) attacks. Any value inserted in JSX will be converted to a string before being rendered. This means that only things written by your own application will get executed.

How to write JSX

There are some rules to follow when writing JSX, and a few of them are listed below:

• You can put any valid JavaScript expressions inside curly braces in JSX:

  const user = {
    firstName: 'John',
    lastName: 'Smith'
  };
  
  function getUserName(user) {
    return user.firstName + ' ' + user.lastName;
  }
  
  const element = <p>{ getUserName(user) }</p>
  

• JSX attributes use the camelCase naming convention:

  const buttonElement = (
    <button
      type="button"
      onClick={() => alert('Confirmed')}
    >
      Confirm
    </button>
  );
  

  Note that the onClick here is the same as the onclick HTML attribute.

• JSX requires explicit closing tags. It's ok to omit the closing tag in some HTML markup, like <input type="text">. But in JSX, you have to add the closing tag. For example:

  const element = <input type="text" />;
  

• JSX must be wrapped in a single top-level tag. The below JSX is incorrect because it has two top-level h1 tags:

  const element = (
    <h1>Title 1</h1>
    <h1>Title 2</h1>
  );
  

  We can correct it by wrapping the two h1 tags in one div, like this:

  const element = (
    <div>
      <h1>Title 1</h1>
      <h1>Title 2</h1>
    </div>
  );
  

File extension

As mentioned above, code written with the JSX syntax can't run in the browser by itself. So, it won't work if you put it in the <script> tag.

In React, we usually write components in .jsx files to indicate that the files contain JSX syntax. It's not mandatory to use .jsx files, you can still use .js files to write components, but the .jsx extension makes it clearer.

Conclusion

In this topic, you've learned what JSX is and how to write it. It's important to have a good grasp of JSX because you're likely to be using it a lot when coding in React. Understanding JSX makes it easier to build React components smoothly. Remember that JSX also natively protects your application from XSS attacks to help you build secure websites.