React JSX in Depth

Prerequisite: Basic knowledge of React

Did you know in React, it is not required to create a component using only JSX? You can use React createElement function as well for building the Components.

Then, why do people use it most in their React App? Let's deep dive, and understand more about it.

What is JSX in React?

return (
    <div>
        <h1>Hey, I am Himanshu</h1>
    </div>

)

or

const hOneHeading = <h1>Hey, I am Himanshu</h1>

JSX (JavaScript XML) is a syntax extension to JavaScript that gives visual aid to developers by allowing them to write HTML types of codes in JavaScript, and it helps to describe "what the User Interface should look like and how it should be"

After that, React Engine will convert those JSX into React function

React.createElement(component, props, ...children)  

In Technical Terms, JSX is syntactic sugar in React that provides React.createElement(component, props, ...children) function after converting from JSX.

So, Instead of writing long and long React.createElement function to create the UI, React team developed JSX to build UI using something that we are used to, which is HTML.

Let's see the breakdown of the JSX converting process to React.createElement function:

JSX Code:

<h1 className:"topBarHeading">I am Himanshu</h1>

compiles to

React.createElement("h1",{className:"topBarHeading",
"I am Himanshu"}

Adding Expressions into JSX as we do in template literals:

Well, in the end, JSX is JavaScript too. So, adding expressions in JSX is easy because it uses almost the same syntax approach as we use in template literals.

Code:

const userName = "Himanshu";
const whoLoggedIn = <h1>{userName}</h1>

Inside the curly braces, you can put almost any valid expressions like variables, inline condition checks, perform functions calls, etc. As we see earlier, after compilation, JSX becomes the regular JavaScript.

Note: Expressions inside curly braces {} always get evaluated. Also, these curly braces give a signal to React that we are using javascript expressions here.

Adding Attributes to JSX elements

In HTML, we can add many attributes to specify more about the tag, like adding a class attribute, id attribute, src attribute, etc.

In React, we can do the same with JSX elements, but the only difference is that JSX is closer to JavaScript than to HTML, so HTML attributes become camelCase.

const element = <div tabIndex = "0"></div>

Note: As the "class" is a reserved keyword in JavaScript, it becomes className, "for" is reserved for loop, it becomes htmlFor, and some other attributes like tabindex become tabIndex.

Adding Children elements as we do in HTML

Well, creating nested tags in HTML, we all mostly do in our projects, and in React, we can do the same thing as we do in HTML, so here is the way to do the same:

function sampleComponent(){
    return (
        <div>
            <h1>Hey, I am himanshu</h1>
            <p>Taskmaster...A JS Master</p>
        </div>
        )
};

Did you know the JSX feature in React prevents XSS (Cross-site-Scripting Attack) injections Attacks?

How? What happens under the hood?
Well, by default, React DOM escapes any value before rendering them on the screen, which means that whatever value (can be malicious code) you give in the input field will be converted to a string by JSX. Also, if you display the input on the screen, then those inputs will be shown as it is on-screen in text format unless you specified those explicitly in the code.

This feature in React makes our React-based app safer from XSS (Cross-Site-Scripting attacks).

Specifying React Element type using Name Casing

Whenever you create a custom component in your project, always start your component name with a capital case. It will help the ReactJS engine in several ways like:

Reason:

1. Help React Engine to easily distinguish which tag is an HTML tag or custom component. Otherwise, some weird things can happen.
2. Help you to spot which is the custom component or not.

In short, Built-in HTML tags in JSX represent in lowercase, and user-defined custom components represent in Capital Case casing.

function exampleOfNameCasing(){
return (
    <div>
        <h1>Himanshu kanojiya</h1>
        <CustomComponent>I am JS Task Master</CustomComponent>
    </div>
)
}

Accessing internal components from a module using dot notation:

In many cases in the future, you can have or need to build a single module that exports many React components. Well, wrapping multiple React components in a module is a convenient way to encapsulate all React components, and access them as per need & requirements.

Let's see how we can do this, and access them:

const MyParentComponents = {
    userName:function(name){
        return <h1>User Name: {name}</h1>
}

function myApp(){
    return (
        <MyParentComponents.userName name="Himanshu" />
)
}

Note: If you have a question like, how the object has been written in JSX format or will it be accessible, will it work as component initialization format?

Yes, It will work because the userName function can be accessed using dot notation as we access object property in JavaScript. The other fact is that the userName function is React component, so it is valid to do.

Some don't's while using this:

1. As it works like JavaScript objects, never use general expressions to access internal components (MyParentComponents[userName], instead, save it to individual variables first, then use it like below:

function doThis(){
    const componentFromModule = MyParentComponents["userName
"]
    return <MyParentComponents.userName name="Himanshu" />
}

So, that's it for JSX, and now let's understand about the props & another several things about JSX:

1. You can also pass JavaScript expressions as a prop by using curly braces. For an example: , as it is in curly braces, it will be evaluated first, and then it becomes 6
2. You can not use if-else and loop in expression, as these are not valid expressions, so put in the surrounding code.
3. You can use the ternary conditional operator in the JSX.
4. Instead of loops, you can use higher-order functions like map, reduce, filter, etc.
5. You can use the spread operator to pass an object as a prop. For an example: <Hm numbers = {...numbers}
6. Booleans, null, and undefined don't render
7. Props come as JavaScript Objects in the function signature.
8. Suppose you have to write JSX between the opening and closing tag, then that content between those tags is passed as a special prop which is the props.children, and you can access them in the parent component as well. Example:

Example:

function ParentComp(props){
    return (
        return <h1>{props.children}</h1>
)};

function ChildComp(){
    return (
        <ParentComp>I am Hero</ParentComp>
)}