Skip to content
CodeSweetly Logo CodeSweetly Logo CodeSweetly
Blog

JSX in React Explained: What It Is and How to Use It Effectively

JSX is a JavaScript syntax extension for building React elements with HTML-like syntax inside your JavaScript code.

Can React Work Without JSX?

Section titled “Can React Work Without JSX?”

Yes. React can work independently of JSX. However, JSX makes it easier to create user interfaces (UI).

In other words, whatever you can do with JSX, you can do the same with plain JavaScript. For instance, consider the two examples below. The first includes JSX syntax, while the second is regular JavaScript syntax.

Example 1: Creating React element with JSX

Section titled “Example 1: Creating React element with JSX”
MyBio.js
function MyBio() {
  return <h1>My name is Oluwatobi.</h1>;
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyBio />);

In the snippet above, <h1>My name is Oluwatobi.</h1> and <MyBio /> are JSX.

Example 2: Creating React element with regular JavaScript

Section titled “Example 2: Creating React element with regular JavaScript”
MyBio.js
function MyBio() {
  return React.createElement("h1", null, "My name is Oluwatobi.");
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(React.createElement(MyBio));

Everything in the ReactJS snippet above is plain JavaScript code.

What Is React.createElement()?

Section titled “What Is React.createElement()?”

React.createElement() is the JavaScript alternative to JSX. It is a method for creating React elements in regular JavaScript language.

Browsers cannot read the JSX syntax. Therefore, tools like Babel, TypeScript, and Parcel are typically used to compile JSX to a React.createElement(component, props, ...children) JavaScript call.

For instance, <button className="support-btn">☕ Buy me a coffee</button> will transform to React.createElement("button", { className: "support-btn" }, "☕ Buy me a coffee ") at runtime.

Under the hood, the React.createElement() method creates a JavaScript object conventionally called “React element”.

A simplified version of a React element looks like this:

const myBioReactElement = {
  type: "h1",
  props: {
    className: null,
    children: "My name is Oluwatobi.",
  },
};

React.createElement() is best for projects that want to avoid compiling tools like Babel. Whereas JSX is a syntactic sugar that makes React code easier to read. So, you are free to choose the syntax that works best for you (but most React projects use JSX for its simplicity).

How to Use JSX

Section titled “How to Use JSX”

The following tips will help you get up and running with JSX so you can use it in your React projects.

Use JSX like any JavaScript expression

Section titled “Use JSX like any JavaScript expression”

You can use JSX like any other JavaScript expression because, at execution time, JSX transpiles into regular JavaScript.

In other words, you can store JSX expressions in variables, use them in if statements, or make them the return value of functions.

Here’s an example:

DisplayMyName.js
const firstName = false;
const myFirstName = <h1>My first name is Oluwatobi.</h1>;
const mylastName = <h1>My last name is Sofela.</h1>;
function DisplayMyName() {
  if (firstName) {
    return myFirstName;
  } else {
    return mylastName;
  }
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<DisplayMyName />);

The ReactJS snippet above stored JSX code in variables. We also made it the return value of a function’s if...else statement.

Wrap multi-line JSX in parentheses

Section titled “Wrap multi-line JSX in parentheses”

Wrapping your JSX code in parentheses is best when it spans across multiple lines. Doing so will make your code readable and avoid the pitfalls of automatic semicolon insertion.

const myName = (
  <div>
    <h1>My name is Oluwatobi.</h1>
  </div>
);

The snippet above wrapped the div in parentheses because it spanned multiple lines.

Wrap expressions in curly braces

Section titled “Wrap expressions in curly braces”

Suppose you wish to write JavaScript expressions in your JSX code. In that case, wrap the expression in curly braces like so:

ExpressionInJSX.js
function ExpressionInJSX() {
  return <h2>JSX makes it {10 * 3} times faster to build React UIs.</h2>;
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<ExpressionInJSX />);

Use camelCase to name attributes

Section titled “Use camelCase to name attributes”

React uses camelCase for JSX attribute keys rather than the lowercase HTML attribute naming convention. This is because, under the hood, JSX compiles into plain JavaScript and, therefore, uses the JavaScript Web APIs.

In other words, instead of writing readonly, use readOnly. Likewise, instead of using maxlength, write maxLength. By so doing, React will get access to JavaScript’s readOnly and maxLength Web APIs.

Here’s an example:

const myName = (
  <div>
    <h1 className="about-me">My name is Oluwatobi.</h1>
  </div>
);

Close empty JSX tags properly

Section titled “Close empty JSX tags properly”

React requires closing all JSX elements explicitly with />—including empty tags. For instance, an HTML <img> element must be written as <img />.

Here’s an example:

const emptyJSXElement = <input type="button" value="Click me" />;

A React component can return only a single element

Section titled “A React component can return only a single element”

Creating two or more JSX elements from a component requires wrapping them in a single parent element; otherwise, React will throw an error. This is because React components return only a single element.

Here’s an example:

TwoInnerUIs.js
function TwoInnerUIs() {
  return (
    <div>
      <h1>My name is Oluwatobi.</h1>
      <button>☕ Buy me a coffee</button>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<TwoInnerUIs />);

In the expression above, the <div> is a parent element containing two (2) inner tags.

Time to Practice with JSX ‍️️‍️‍️🤸‍♂️🏋️‍♀️🏊‍♀️

Section titled “Time to Practice with JSX ‍️️‍️‍️🤸‍♂️🏋️‍♀️🏊‍♀️”

Here is your moment to practice the JSX concepts you’ve learned.

In this exercise, you will convert the regular JavaScript code below to its JSX equivalent.

function SupportCodeSweetly() {
  return React.createElement(
    "div",
    { className: "support-ui" },
    React.createElement(
      "a",
      {
        id: "support-link",
        className: "support-link",
        target: "_blank",
        href: "https://www.buymeacoffee.com/codesweetly",
      },
      "☕ Buy me a coffee"
    ),
    ". Thank you! 🎉"
  );
}


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(React.createElement(SupportCodeSweetly));

Take a moment to try it yourself before looking at the solution below. Even if you have to try a couple times, go back and read the above tips, or google a few things, it’ll help you learn the concepts better.

Ok, now that you’ve tried…

Check the solution
function SupportCodeSweetly() {
  return (
    <div className="support-ui">
      <a
        id="support-link"
        className="support-link"
        target="_blank"
        href="https://www.buymeacoffee.com/codesweetly"
      >
        ☕ Buy me a coffee
      </a>
      . Thank you! 🎉
    </div>
  );
}


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<SupportCodeSweetly />);

The SupportCodeSweetly component returns the UI we want to display on-screen and manage with React.

A Beginner's Guide to React: Learn JSX, Hooks, and Real-World App Development

Support CodeSweetly