JSX Rules in React(A JavaScript Framework).

We always works according to some rules in our life. Everywhere you want to go you will face some rules to follow. I have come across some of the React JSX rules must be follow while using React.

1. Return Single Element.
2. div/section/article or React Fragment.
3. Use camelCase for HTML Attribute.
4. className Instead of Class.
5. Close Every Element.
6. Formatting.
7. Tags are elements.

Return Single Element:

In JavaScript we use to return JSX elements to DOM through components. We return HTML elements or tags to render it later. So one of the rule is to return single element. Wait I don’t mean that you can just return single tag. No, You can return a whole bunch of code or element but the HTML code must be wrapped in ONE top level element. So if you like to write two “div”, you must put them inside a parent element, like a “div” element.

Returning single Element

JSX will throw an error if the HTML is not correct, or if the HTML misses a parent element.

Returning More Elements

Error

div/section/article or React Fragment:

While working with the JSX one should keep in mind the HTML semantics. In the above rule I make it clear that there should a parent element to all the HTML elements. For these elements we can use “div” but we shouldn’t use it for everything. There is no rule against it to “div” everywhere but it is the best practice to follow the HTML semantics. An empty tags can also be used for the top level element.

Empty Tag

A pair of empty <> and </> tags get’s turned into a React. Fragment element, i.e. an element that doesn’t map to DOM nodes. Fragments are useful for returning multiple cells or list items from a component.

Use camelCase for HTML Attribute:

In JavaScript we used to write inline attributes or event Listeners e.g. “onclick()”. But in case of React we can’t write attributes like this. “onclick” attribute of JavaScript must be capitalized e.g. camelCase. If you don’t know about camelCasing, here you can read more about camelCase.

className Instead of Class:

In HTML we use class attribute for specific element. As we are using React, a JavaScript framework so we can’t use class keyword because in ES6 it is a reserve keyword to define a class. If we use class for HTML attribute it will gives an error, instead we should use className.

Close Every Element:

In HTML almost all the tags have starting and closing tags, rather than a few e.g. <img>, <input>, <br>.

These few tags have no closing tags. We use it simply as the way they are defined in the example above. In React JSX every tag must be close even those which have no closing tags e.g.

<img src = “ “ alt = “ “ />

Formatting:

While returning JSX we should have parenthesis so the HTML code must be wrapped inside.

parenthesis should be use

If we don’t use parenthesis compiler will gives us an error.

Without parenthesis

Don’t worry you have a choice to use parenthesis or not. if you don’t want to use it, your parent element starting tag must be in the same line where the return keyword exist.

Tags are elements:

JSX Tags map to calls to React.createElement().

Use lowercase tags <lowercase/> when you need a DOM elements, and Capitalized tags <Capitalized/> for component elements.