DEV Community

Korada Saikiran
Korada Saikiran

Posted on

Understanding JSX in React: A Beginner’s Guide

Many beginners in React development often mistake JSX for HTML inside JavaScript. However, JSX is more accurately described as HTML-like syntax in JavaScript or XML-like syntax. In this guide, we’ll explore what JSX really is and how it’s used in React development.

JSX, or JavaScript XML, is a syntax extension for JavaScript. It allows developers to write HTML-like code within JavaScript. For example:

const jsxHeading = <h1>Hey there JSX</h1>;
Enter fullscreen mode Exit fullscreen mode

Although this looks like HTML, it's actually JSX. JSX allows developers to write code that looks similar to HTML but is ultimately translated into regular JavaScript.

The JSX code we write is ultimately translated into React elements using createElement(). For instance, the previous JSX code is equivalent to:

const jsxHeading = React.createElement('h1', null, 'Hey there JSX');
Enter fullscreen mode Exit fullscreen mode

This means that JSX is not pure JavaScript and cannot be directly understood by native JavaScript engines.

For more refer to my below blog:

Top comments (1)

saikiran76 profile image
Korada Saikiran