The Difference Between React and JSX

If you're just starting to learn React, there are many unknown variables. Technologies, you don't understand, patterns you've never seen, and terms you never heard of.

One of these terms is called JSX, and it's a key thing for building web applications in React. In this article, you'll learn exactly what JSX is, and what's the difference between React and JSX. Before we dive into the article, let's answer this question right away.

What's the difference between React and JSX?

The difference between React and JSX is simple. React is a JavaScript library, and JSX is a JavaScript syntax extension that can be used with any JavaScript library.

Now that we have a basic understanding of this difference, let's take a closer look at JSX and React.

What Is JSX in React

JSX is a JavaScript syntax extension that allows you to write XML-like elements in your JavaScript code. It's not required to use JSX in React, but it's a popular choice because it makes code more readable and concise.

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. (source: React)

JSX allows you to create custom elements and reuse them in your React applications. In the example below, the Main component is wrapped in a main tag. It also allows you to embed JavaScript expressions in your HTML tags. In the example below, the "Main Content" text is an expression that will be evaluated and rendered as text.

Here's an example of a simple React component written with JSX.

Main.jsx

const Main = () => {
  return (
    <main>Main content</main>
  );
}

export default Main

And its usage in the React application.

Components.jsx

import Component from "./Component"

const App = () => {
  return (
    <div className="App">
      <h1>Hello From React</h1>
      <Component />
    </div>
  );
}

export default App

While using JSX, we're free to use any valid HTML element. And on top of that, write javascript expressions to describe the React components properly.

How Is JSX Different From HTML

At this moment, we should already be familiar with JSX. You should know what it is, and how it's being used in React. And now, it's time to compare it to the other building block of web development. It's time to compare it to HTML.

Now that we understand how is JSX different from React, let's compare it to HTML.

The biggest difference between JSX and HTML is that JSX tags are converted into regular JavaScript objects and strings, while HTML tags are not. This means that you can use JavaScript expressions inside of your JSX tags, which gives you a lot of flexibility and power.

One of the main benefits of using JSX is that it makes your code more readable and concise. For example, take a look at the following code block that compares a simple list of items with, and without JSX.

Demonstration of JSX

// Without JSX
const fruits = ["apple", "banana", "cherry"];

// With JSX
const jsxFruits = [<li>apple</li>, <li>banana</li>, <li>cherry</li>];

JSX also has a number of features that make it more convenient to use than HTML. For example, you can use JavaScript expressions inside of JSX tags to dynamically create and populate HTML elements. You can also use built-in JavaScript functions to manipulate and style your HTML elements.

Why Is JSX Good

Now that we know what's the difference between JSX and HTML, it's time to show you why it's JSX better.

JSX is certainly not a new language. It is just a syntax extension to JavaScript, which allows us to write HTML tags in our JavaScript code. These tags are then transformed into pure JavaScript before being executed, resulting in a plain HTML format.

There are 2 key benefits to using JSX:

• Code readability
• Code reusability

JSX Code Readability

JSX code is very readable and easy to understand. The code is written in a way that makes it easy to see what is going on, and it is easy to follow the flow of the code. This makes it a great choice for code that needs to be easy to read and understand.

JSX Code Reusability

Reusability is a key concept in software engineering. And it can't be overlooked when writing React applications.

JSX provides a way to achieve code reuse. In its plain form, JSX is designed to be reusable. It allows us to write a single component once, and reuse it multiple times in our React application.

What Does JSX File Extension Mean

The one thing that can confuse (even experience React developers) is the .jsx file extension. It's a file extension that is used in conjunction with JavaScript. And it's used to create reusable React components.

There is nothing wrong in particular with using .js file extension for React components. However, if you use .jsx in your files, it will clearly indicate what is React component, and what is not.

Using this technique, you can easily distinguish files that are React components from the files that contain only plain JavaScript code (e.g utilities, functions, constants).

Concluding Thoughts

Despite their similarities, there are a few key differences between React and JSX. React is a library, while JSX is a syntax extension. Someone who's been using React for a while probably already knows this. But to someone that's just dipping their feet into React, it can sound very confusing.

Luckily for you, we wrote this article, where we answered all the doubts.

By reading this article, you learned what is JSX, and what's the difference between React and JSX. You also learned how JSX differs from HTML, and what the key benefits of using JSX are.

Lastly, we briefly talked about JSX and its associated file extensions.

With all this information in mind, it's to unleash the whole power of JSX and add it into your React project.