Skip to content
CodeSweetly Logo CodeSweetly Logo CodeSweetly
Blog
Latest: Build and Master React Components Without Frameworks

JSX Explained: Learn JSX in React Without Any Framework

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

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

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

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()?

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. Although most React projects use JSX for its simplicity.

How to Use JSX

The following tips are a few guidelines on JSX.

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

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

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

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

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

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 ‍️️‍️‍️🤸‍♂️🏋️‍♀️🏊‍♀️

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

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

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));
Show 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.

What Exactly Is a React Component?

Are you still wondering what a React component is? Master it with the React Components tutorial.

Support CodeSweetly