Part 5 JSX in React | JSX expressions | React Fragments | JSX tutorial

What is JSX? JSX is a shorthand for JavaScript XML. This makes the HTML file really easy to understand. This is a type of file used by React that utilizes the expressiveness of JavaScript along with HTML-like template syntax. This file makes applications robust and boosts their performance. Web browsers cannot read JSX directly. This is because they are built to only read regular JS objects and JSX is not a regular JavaScript object For a web browser to read a JSX file, the file needs to be transformed into a regular JavaScript object. For this, we use Babel JSX:- - Component uses the JSX syntax. - JSX means syntax extension to JavaScrip. - JSX produces React “elements”. - JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods. - JSX converts HTML tags into react elements. - As part of the JSX syntax, we can't use 2 tags at a high level. - If we want to use then we have used those codes inside the empty angle brackets Fragment:- -------- - In React, a fragment is a way to group multiple elements together without adding an extra node to the DOM. A fragment is represented by the React.Fragment component or the shorthand syntax. Here's an example of using fragments to return multiple elements from a component