What is JSX and why use it in ReactJS?

From now I will be writing on components basics like JSX, State and Props, Conditional rendering and composition. This is the first part in which I will explain what is JSX and why it is used in ReactJS. Let's get started.

JSX stands for JavaScript XML, and it is a syntax extension to JavaScript that allows us to write HTML-like code in ReactJS. JSX is not a requirement for using React, but it makes it easier to create and maintain React components. JSX also enables us to use the full power of JavaScript expressions within our markup, such as variables, functions, loops, and conditionals.

In this blog post, we will explore some of the benefits and features of JSX, and how it can help us create dynamic and interactive user interfaces with ReactJS. We will also look at some real-life examples of JSX code and how it is transformed into regular JavaScript by a tool called Babel.

How does JSX work?

JSX is a syntax extension that looks like HTML, but it is actually JavaScript. When we write JSX code in our React components, we create React elements, which are plain JavaScript objects that describe what the UI should look like. These elements are then rendered to the DOM by React.

However, browsers do not understand JSX syntax, so we need a tool that can convert our JSX code into regular JavaScript that browsers can execute. This tool is called a transpiler, and one of the most popular ones is Babel. Babel is a JavaScript compiler that can transform JSX code into standard JavaScript calls of the React framework.

For example, this JSX code:

const element = <h1>Hello, world!</h1>;

is transpiled by Babel into this JavaScript code:

const element = React.createElement(
  'h1',
  null,
  'Hello, world!'
);

You can try out this transformation yourself using the Babel REPL , which is an online tool that lets you write JSX code and see the corresponding JavaScript output.

Why do we use JSX instead of Plain JavaScript?

Well, JSX has several advantages over writing plain Javascript or creating React components. Let's talk about the advantages of JSX over plain Javascript:

JSX is concise and readable: JSX allows us to write HTML-like syntax that is familiar and intuitive for web developers. It also reduces the amount of boilerplate code that we need to write for creating React elements.
JSX is expressive and powerful: JSX lets us use any valid JavaScript expression inside curly braces { }. This means that we can use variables, functions, loops, conditionals, and any other JavaScript features within our markup. This makes our code more dynamic and interactive.
JSX is optimized for performance: JSX is not executed by the browser, but by Babel, which transforms it into efficient JavaScript code. This means that JSX does not add any runtime overhead to our application, and it can benefit from the optimizations and features of modern JavaScript engines.
JSX supports custom components: JSX allows us to create and use our own custom components, as well as the built-in HTML elements. Custom components are also written in JSX syntax, and they can accept props (properties) and children (nested elements) as arguments. Custom components make our code more reusable and modular.

How to use JSX in ReactJS?

Now that we are familiar with JSX let's learn how to use it in ReactJs.To use JSX in ReactJS, we need to follow some rules and conventions that ensure that our code is valid and consistent. Some of these rules are:

Use camelCase for attribute names. Since JSX is JavaScript, we need to follow the naming conventions of JavaScript for our attributes. For example, instead of using class for CSS classes, we use className, and instead of using for for labels, we use htmlFor.
Use quotes for string values. When we assign a string value to an attribute, we need to enclose it in quotes. For example: <input type="text" />.
Use curly braces for expressions. When we want to use a JavaScript expression as an attribute value or as a child element, we need to wrap it in curly braces { }. For example: <h1>Hello, {name}</h1>.
Close all tags. Since JSX follows XML rules, we need to close all tags properly. For self-closing tags, such as <input /> or <img />, we need to add a slash / at the end of the tag. For nested tags, such as <div><p>Hello</p></div>, we need to match the opening and closing tags correctly.
Use parentheses for multiple lines. When we write JSX on multiple lines, we need to wrap it in parentheses ( ) to avoid the pitfalls of automatic semicolon insertion in JavaScript. For example:

const element = (
  <div>
    <h1>Hello</h1>
    <p>Welcome to my blog</p>
  </div>
);

An example of JSX?

To illustrate how JSX can be used in ReactJS, let’s look at some real-life examples of JSX code and how they render to the browser.

A simple greeting component ~

In this example, we are creating a simple component that displays a greeting message based on a name prop (Don't worry we will learn about props in my next blog). We use JSX to write the markup for the component, and we use a JavaScript expression to insert the name prop into the <h1> element.

function Greeting(props) {
  return <h1>Hello {props.name}</h1>;
}

ReactDOM.render(
  <Greeting name="Shivam" />,
  document.getElementById('root')
);

This code renders the following output to the browser:

<h1>Hello Shivam</h1>

Conclusion

Basically, JSX is a syntax extension that allows us to write HTML-like code in ReactJS. JSX makes it easier to create and maintain React components, and it also enables us to use the full power of JavaScript expressions within our markup. JSX is not executed by the browser, but by Babel, which transforms it into regular JavaScript code. JSX follows some rules and conventions that ensure that our code is valid and consistent. JSX also supports custom components, which make our code more reusable and modular.

I hope that this blog post has given you a better understanding of what JSX is and why use it in ReactJS. If you want to learn more about JSX, you can check out the official React documentation, or some of the online resources listed below:

These are some of the resources from where you can learn more about JSX.

So in my next blog, I will talk about props and states.

Thanks for reading 😊.

Read my previous blogs here: