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>;

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');

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

For more refer to my below blog:

Comments

[Korada Saikiran]

REACT ON MEDIUM