React JS JSX

What is JSX?

JSX – JavaScript XML is a syntax extension for JavaScript. It is commonly used with React. JSX enables you to write the HTML code along with JavaScript.

Key Features:

JSX looks similar to HTML, but it is essentially a more convenient syntax for JavaScript function calls.
This makes it easier to understand the structure of the UI component.

Benefits of JSX:

Declarative UI: JSX makes it easier to describe how a UI should look and behave.
Better Developer Experience: It combines the flexibility of JavaScript with the readability of HTML, allowing developers to write concise and clean code.
Improved Maintainability: It keeps both the layout and the logic in one place (components), making the code easier to maintain.

Difference between JSX and traditional HTML

Feature	JSX	HTML
Usage	JavaScript extension (React)	Static markup language
Syntax	HTML-like in JavaScript	Standard HTML tags
Event handling	camelCase (e.g., onClick)	lowercase (e.g., onclick)
Self-closing tags	Must be self-closed	Can be self-closing (optional)
Rendering	Needs to be compiled (e.g., by Babel)	Natively rendered by the browser
Dynamic behavior	Embedded with JavaScript	Needs JavaScript to add dynamic behavior
Conditional rendering	Supported (e.g., with map, if)	Not supported directly

Why is JSX used in React?

Makes the code more readable and maintainable.
Integrates JavaScript and UI rendering seamlessly and increases flexibility.
Promotes a component-based architecture, where each component manages its own structure and logic.
Allows for dynamic rendering by embedding JavaScript directly within the UI structure.

JSX Syntax Basics

JSX Element

JSX elements are React syntax extensions that let you write HTML-like code in JavaScript. Developers can use JSX (JavaScript XML), which combines the simplicity of HTML with the power of JavaScript, to declaratively specify how the user interface should appear.

Structure:


<elementName attributes>content</elementName>

Example:


<h1>First JSX element</h1>

It represents an h1 HTML tag with the text “First JSX element” inside.

Using curly braces {} in JSX

In JSX, you can include JavaScript expressions using curly braces {}. This enables dynamic content to be displayed within the HTML-like format.

Creating reusable elements

JSX is utilized to create React components, which serve as reusable elements for user interfaces. These components can be implemented in either functional or class form.

CamelCase in JSX

In JSX, attribute names are written in camelCase rather than the lowercase format used in HTML. For instance, the HTML attribute class is represented as className in JSX.

JSX & Browsers

Web browsers cannot interpret JSX on their own. Prior to execution in the browser, JSX is transformed into standard JavaScript through tools such as Babel.

Nesting JSX elements

By nesting JSX elements inside one another, you can create complex user interfaces in React. JSX elements may contain variables, functions, or other JSX elements.

Embedding Expressions in JSX

Embedding expressions in JSX enables us to render values dynamically or evaluate logic within our UI.

Types of Expressions You Can Embed in JSX:

Variables: Directly embed variables within JSX.
Arithmetic Operations: Perform operations and display the result.
Function Calls: Call functions with or without parameters and embed their results in JSX.
Arrays and Loops: Render elements for each item from the Array.
Objects: Create an object and access properties inside JSX.

Conditional rendering with JSX

You can render JSX elements based on certain conditions using ternary operators or logical AND (&&).

Attributes in JSX

Properties of HTML elements or React components are specified via attributes in JSX. These work similarly to HTML attributes with a few key differences.

class becomes className.
for becomes htmlFor.
style becomes an object with camelCased keys and values.

Writing attributes in JSX

1. Class Vs className

As the keyword class is reserved in JavaScript, in JSX we define it as className.

2. Style

In JSX, the style attribute is not a string as in HTML but rather an object with key-value pairs where the CSS property names are camelCase.

How JSX is transformed into JavaScript

JSX must be converted into standard JavaScript that browsers can understand using tools like Babel.

Transformation Process

Step 1: JSX code like <h1>Hello, World!</h1>
Step 2: Babel converts it to React.createElement('h1', null, 'Hello, World!')
Step 3: This is JavaScript the browser understands

React.createElement Syntax


React.createElement(type, props, ...children)

type: A string (like ‘div’) or a React component
props: An object of attributes
children: JSX elements, strings, or numbers

Step 4: React Rendering

Once JSX is transformed, React uses virtual DOM elements to update the real DOM. This allows React to efficiently update only the necessary parts of the UI.

Why Does JSX Exist?

JSX provides a syntax that looks very similar to HTML but is much more powerful because it integrates JavaScript expressions and logic directly within the UI definition. It simplifies the process of creating components, making the code more readable and concise.

Conclusion

JSX is a powerful tool for developers using React, combining JavaScript and HTML syntax to streamline the creation of dynamic and interactive user interfaces. Its main characteristics, including a declarative UI, reusable components, and the smooth integration of JavaScript logic, make it an important resource in contemporary web development. Although it resembles HTML, JSX is converted into JavaScript using tools like Babel, which ensures it works with various browsers. By grasping the syntax of JSX and understanding its transformation, developers can create applications that are more efficient, easier to maintain, and scalable, ultimately improving both productivity and user experience.

Request more information

React JS JSX