Skip to content
Latest: Publish JavaScript Packages to NPM Like a Pro!

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.

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.

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.

The following tips are a few guidelines on JSX.

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.

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.

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 />);

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

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 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.

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