What is the use of JSX in React JS?
You’ve undoubtedly heard of JSX if you’ve worked with React. In this blog, we’ll see how JSX translates to regular JavaScript. We’ll also discuss the benefits of JSX and what happens behind the scenes when you write JSX in React. Show This article will cover what JSX is and what goes on behind the scenes when using JSX with React. I will go ahead and assume that this is not your first encounter with React. No deep knowledge is required, but fundamental knowledge is. You can refer to the Getting Started page of the React documentation for a refresher. A Quick Recap of What React IsReact is an open-source JavaScript library developed by the team at Facebook. It is used to build rich graphical user interfaces (UIs). It is based on the concept of reusable components, which allows you to create complex UIs out of small isolated pieces of code called components. What Is JSX?JSX stands for JavaScript syntax extension. It is a JavaScript extension that allows us to describe React’s object tree using a syntax that resembles that of an HTML template. It is just an XML-like extension that allows us to write JavaScript that looks like markup and have it returned from a component. JSX With React in ScopeBecause JSX is not valid JavaScript, browsers can’t read it
directly; they do not know what to do with it, so we need a transpiler to translate it to This occurs during the build process, so the browser will never know JSX was present in the first place. The browser, in turn, receives a tree of objects that have been described using the React API. In addition, when we write modern JavaScript, especially some of the features introduced in ECMAScript 6, some older browsers can’t make sense of these features. We need to use a transpiler to convert ES6 to ES5. That’s exactly how it works with JSX as well. Consider this example:
This is a simple component that renders “Hello World” in the browser, and it returns what appears to be HTML, but it isn’t. The The above example would compile into this before being used by the browser.
Notice how in the JSX example above, we didn’t exactly reference the instance of React we imported, but, when compiled, it calls the React.createElement() function. So we need to have React in scope for JavaScript to know what to do with the compiled code. The
It is not required to use JSX while writing React, but it makes the development and debugging process easier for developers. Let’s make a React component using JSX and see how it translates to regular JavaScript function calls.
The compiled code should look like this:
This is also how you would write React without JSX. With a bit of nesting, we can see that it is beginning to get unreadable and ugly. Not only does it look difficult to code, but it also looks difficult to maintain. That’s where JSX comes in, combining the beauty of HTML and the power of JavaScript.
These objects are known as React elements, but they are just plain JavaScript objects. They describe what you want to see on the screen. They represent HTML elements, and they do not live on the page (the “real” DOM)—they live on the virtual DOM. React reads these objects and uses them to create HTML elements on the virtual DOM, after which it gets synced with the real DOM. So we’ll have trees of objects on the virtual DOM and trees of objects on the real DOM. React automatically updates the associated DOM element when we change data on a React element. Here are some of the DOM elements you’ll encounter:
JSX Without React in Scope (With React 17)As seen earlier, when we use JSX, the compiler converts it into React function calls that the browser can comprehend. Still, following the release of React 17, the Facebook team collaborated with Babel to enhance the JSX transform without breaking any of the existing configurations. This update does not have any effect on the JSX syntax and is not compulsory. The previous JSX transform will continue to function normally, and there are no plans to discontinue support for it. Because JSX was
compiled into React.createElement() calls, you had to have React in scope if you used JSX. With the new transform, you can skip the (required) React 17 adds two new entry points to the React package that will only be used by compilers such as Babel and TypeScript, so instead of converting JSX to React.createElement(), the new JSX transform automatically imports special functions from those new entry points in the React package and calls them. So if we have this:
With the new transform, you can write your component with JSX without importing React manually. The new JSX transform will compile to:
Now we can see that we didn’t need to import React because of the new JSX transform. The import statement in the example above isn’t supposed to be done manually—the compiler will do it for you. This improves our code and allows us to make speed improvements that React.createElement() does not enable; however, we would still need to import React to use Hooks and other React exports. This change is entirely compatible with any current JSX code, so you won’t need to change your components. The functions included under react/jsx-runtime and react/jsx-dev-runtime can only be used by the compiler transform. If you need to create elements manually in your code, you should continue to use React.createElement.
You can check the React documentation for more information on how to upgrade to the new JSX transform. Bonus: Important JSX Rules
ConclusionIn this article we’ve learned that JSX is just a nice way to write plain JavaScript objects describing the React elements that make up your application. Try not to treat it like a black box. I hope you found this post useful, and discovered some interesting ways to harness the power of JSX. What is JSX in React JS with example?JSX stands for JavaScript XML. It is simply a syntax extension of JavaScript. It allows us to directly write HTML in React (within JavaScript code). It is easy to create a template using JSX in React, but it is not a simple template language instead it comes with the full power of JavaScript.
What is JSX and what are its benefits?JSX means you can write JavaScript code inside the HTML this is called JSX Also JSX helps to make it easy to understand your code and important point is easier to Debug your code. Without JSX complex to handle and understand code.
When use JSX vs JS React?JSX isn't necessary to use as React can be written with both JS and JSX, but JSX makes it easier for users to make React applications, as it is similar to HTML. It makes it easier to write and update HTML code, thus functionality is easier to handle.
|