From the course: Master React 19, Build Ecommerce Solutions, and Prepare for Interviews with TypeScript, Next.js, and Remix

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

The rules of JSX

The rules of JSX

From the course: Master React 19, Build Ecommerce Solutions, and Prepare for Interviews with TypeScript, Next.js, and Remix

Start my 1-month free trial Buy for my team

The rules of JSX

“

We have been using JSX till now but it's time to dive deeper into the rules of using JSX and get to know the behavior in various scenarios. There are many rules for using the JSX in react. One of them is, we can return only one parent element from the component. It is not possible to return multiple parent components. So we have to wrap them with a single parent container for which ideally we use a div or the fragments. If we use the div, then it can create unnecessary nodes to the DOM. So we prefer to use the fragments where needed. Now here the question is raised, why do multiple JSX tags need to be wrapped? The JSX is transformed into plain JavaScript objects under the hood. So, we cannot return multiple objects from a function without wrapping them into an array. That is the reason we cannot return the multiple elements or JSX tags without wrapping them in a parent tag. The next rule is, JSX requires tags to be explicitly closed. For example, self-closing tags like image must be…

Contents