Understanding JSX and Its Relationship with React

React has revolutionized the way we think about web interfaces, and at the core of its simplicity lies JSX. JSX has raised eyebrows, triggered debates, and made us rethink how we write our UI components. In this post, we'll unravel the magic behind JSX and demystify why we often import React in JSX files even if it's not explicitly used.

What is JSX?
JSX stands for JavaScript XML. At first glance, it looks a lot like HTML embedded directly in your JavaScript (or TypeScript) code. But that's where the similarities mostly end.

Here's an example:

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

Wait, aren't we mixing our markup with logic? Yes, and that's the beauty of it! With JSX, you can have a clear view of your UI alongside the logic that drives it.

JSX vs. HTML

While JSX might look like HTML, there are subtle differences. Let's list a few:

Class vs. className: In JSX, you can't use the class attribute due to its reserved status in JavaScript. Instead, we use className.

<div className="container">Hello JSX</div>

*Inline Styles: * In JSX, styles are not strings but objects. This allows us to manipulate styles dynamically using JavaScript.

const buttonStyle = {
  backgroundColor: 'blue',
  color: 'white'
};

<button style={buttonStyle}>Click Me</button>

Self-Closing Tags: In JSX, all tags must either have a closing tag or be self-closing.

<img src="image.jpg" alt="A description" />

Why Import React in JSX Files?

You might have come across the seemingly redundant import statement at the top of many React components:

import React from 'react';

But, often, you'll notice that React isn't directly used in the file. So, why do we import it?

Behind the scenes, JSX is transpiled to React.createElement function calls. When the Babel transpiler transforms JSX, it converts:

const greeting = <h1>Hello, world!</h1>;
//into something like this
const greeting = React.createElement('h1', null, 'Hello, world!');

Without importing React, this transpiled code would throw an error since React wouldn't be defined. Hence, even if you don't see React being used directly, it's working behind the scenes, giving life to your JSX code.

Note: With the introduction of the new JSX Transform introduced in React 17, this import might become unnecessary in some setups. But as of now, it's a good practice to include it unless you're sure your setup supports the new transform.

Conclusion

JSX offers a declarative syntax sugar that makes our components more readable and maintainable. It allows us to visualize the UI structure clearly while keeping it closely tied with the component's logic. By understanding the transpilation process and the nuances of JSX vs. HTML, we can write better, more efficient React code. Happy coding!