A Quick Introduction to JSX

Mariola P
Mariola P
Sep 17, 2020 · 3 min read

JSX allows us to add HTML elements in React, thus making it easier to write React components in an efficient and expressive manner. In this blog I will briefly explain what JSX is, then I will focus on explaining some of the unique syntax of JSX.

What is JSX?

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that was written to be used in React applications. JSX code looks a lot like HTML but it comes with the full power of JavaScript. With JSX we can write HTML elements in JavaScript without using methods like createElement() or appendChild(). JSX converts HTML tags into React elements.

JSX is considered as a declarative style of programming, whereas most of the JavaScript code would be considered imperative. To illustrate the difference:

In vanilla JavaScript our code is made of 3 explicit steps. With JSX, we just need to write what we want, and allow React to figure things out behind the scenes:

What JSX code looks like?

A basic unit of JSX is called a JSX element. JSX elements are treated exactly the same as JavaScript expressions, they can be passed to a function or stored as a variable. Just like HTML elements, JSX elements can have attributes and are written in an HTML - style syntax:

Just like in HTML, we can nest JSX elements inside of other JSX elements. Nested JSX expressions can also be saved as variables, passed to functions etc. Multi-line JSX expressions should be wrapped in parentheses:

JSX expressions should have exactly one outermost element. If JSX expression has multiple outer elements, the expression should be wrapped in a <div></div>.

A react component returns JSX with the render() method and every component you use needs a render() method to return JSX. Without an element that wraps the returned JSX in a component, we will get an error.

JSX allows us to write HTML in React. JSX provides a significant boost to readability this is especially true for building complex applications, where components can be children of other components. For more in depth JSX tutorial visit: https://reactjs.org/docs/jsx-in-depth.html

The Startup

Get smarter at building your thing. Join The Startup’s +787K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Mariola P

Written by

Mariola P

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Mariola P

Written by

Mariola P

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store