< Back

Owen PhillipsNovember 26, 2018

Updated: April 22, 2023

Learn React - What is JSX

You might have heard of JSX by now if you have spent any amount of time looking into React. You may have wondered to yourself 'what is JSX' but didn’t' know where to start. JSX is basically HTML in JavaScript and in this quick tutorial you will understand what that means.

It's basically HTML in JavaScript

To understand JSX better, it helps to understand why it exists in the first place and how to use it.

Why does JSX exist?

Separation of concerns in computer science is a design principle where you separate your application into distinct sections that each have a specific role to play. Until React came along, it was an established best practice to use the MVC (Model, View, Controller) design pattern where you separate your application's logic from how it is shown on the users screen. The people at Facebook felt that the existing way to do this on the web using the MVC pattern (Django, Angular, etc), wasn't a _proper _way to separate concerns. The idea with React is that HTML and JavaScript are both involved in showing the UI to the user anyway so why not combine them. React does this with components made up of HTML and the full power of JavaScript allowing for a better separation of concerns.

How do you use JSX?

Here is an example of a simple React component

<MyComponent> Your Text Here </MyComponent>

For this piece of code to work in the browser, it has to be complied into plain JavaScript which ends up like this

React.createElement(MyComponent, "Your Text Here");

As you can see, it is a little easier to write JSX than plain JavaScript in the second example. Essentially what JSX comes down to is just making it easier to express

React.createElement(component, props, …children)

And we can all use some simplicity in our lives.

So what is JSX?

JSX gives you "the accessibility of templates with the power of JavaScript". It is a better separation of concerns and you don't have to learn any framework specific language. This is great news, since you can bring your existing JavaScript skills into React and take them with you when you move on to something else.