Atul's Tech Corner

JSX in React !!

JSX in React !!

Atul Kumar Hande's photo
Atul Kumar Hande
·

4 min read

When one transition from writing vanilla JS to choosing a JavaScript library such as React, we come across JSX.

JSX stands for Javascript XML

JSX is HTML-like JavaScript syntax which helps us to write elegant and simpler react code.

Now, to understand what the above definition means let's understand it through examples.

const Greeting =()=>{
return <h1> Hello World </h1>
}

The above code snippet consists of a component named 'Greeting' and it returns HTML. So, in react components, we always return JSX. We can never leave it empty. A simple 'h1' tag is also considered as JSX return.

However, JSX is not a necessity in react. We can achieve the same result by doing the following:

const Greeting =()=>{
return  React.createElement( 'h1', {} ,'Hello World');
}

Now, let's understand what we did above. Instead of using JSX, we used the creatElement method on react which takes three parameters: element tag, prop object or attributes, and children.

So, If this way exists then why do we even need to use JSX. Let's find out again with the help of an example.


const Greeting =()=>{
return <div>
         <h1> Hello World </h1>
       </div>

}

So the above code has a div and an h1 element. Now the same code if we write without JSX :

const Greeting =()=>{
return  React.createElement( 'div', {} ,React.createElement('h1',{},'Hello World'));
}

As we can see, when we added more HTML elements the complexity of our code just increased. Hence, to avoid writing this much amount of code we rely on JSX which actually is running functions under the hood as we see above.

Rules in JSX

  • Return a single element: we need to always return something even it may be a single HTML element or a complete app code. We return always.
  • Everything must be wrapped in an enclosing tag : 
const Greeting =()=>{
return <div>
         <h1> Hello World </h1>
       </div>
       <div>
         <h1> Hello Universe </h1>
       </div>

}

The above code will give us an error as we haven't wrapped our JSX in an enclosing tag.

Understanding why we will get an error: React implementation relies on constructing a tree-like structure ie DOM. So it expects us to return a single root node. When we return multiple elements from React elements from the render method, then the assumption of having a single root node crumbles and hence making it difficult for the process reconciliation algorithm.

React provides a React.Fragment component, that provides a cleaner syntax to return multiple elements. React.Fragment acts as a dummy parent node to which multiple elements can be treated as children.

Example:

const Greeting =()=> {
return <React.Fragment>
            <div>
                   <h1> Hello World </h1>
            </div>
            <div>
                   <h1> Hello Universe </h1>
            </div>
      </React.Fragment>
}

Returning single element:

const Greeting =()=>{
return <div>
            <div>
                   <h1> Hello World </h1>
            </div>
            <div>
                   <h1> Hello Universe </h1>
            </div>
      </div>
}

Above we wrapped our whole code inside of a 'div' tag i.e enclosing tag. We should use semantic tags to improve the readability of our code.

  • Using camel casing for HTML attributes:
const Greeting =()=>{
return <div>
         <h1 className='text'> Hello World </h1>
         <button onClick={console.log('clicked')} ></button>
       </div>

}

In react since we are writing JavaScript we use camel casing for HTML attributes ie using onClick event instead of onclick.

Similarly, for class attribute, we use className instead of class as it is a reserved keyword for JavaScript.

  • Closing every tag: We need to close out all the elements even the ones that are self-closing. If in React any tag is missing closing React will throw an error
  • Formatting : 
const Greeting =()=>{
return (
             <div>
                <div>
                    <h1> Hello World </h1>
                </div>
                <div>
                   <h1> Hello Universe </h1>
                </div>
             </div>

)
}

Above we used parenthesis to format our code a little bit. If we are not using parenthesis then we will have to return our div element right next to return and if it is not there it will give us an error.

Conclusion

I hope you found the article insightful! We have covered how JSX can help us write better React code and what are the rules one should follow while writing JSX.

I hope you liked this blog. You can follow me on LinkedIn or Twitter for more content.

JSXReact