Starting React can be confusing, especially when it comes to JSX. After this blog, you will understand what JSX is and how to use it so you are no longer confused. Before we start a thing to keep in mind is that JSX is NOT HTML.

The Basics

const title = <h1> Super Awesome Kitchen </h1>;

We are setting the constant variable of title to what seems like HTML. Now let's see what you can do with it, that makes it different:

const title = <h1 onClick={this.handleClick}> Super Awesome Kitchen </h1>;

Now not only is the header created and displayed but it also has the functionality of being clicked which is then handled by any function you assign it to, in this case, we called it handleClick.

Another thing you can do is in-line styling with CSS which is not recommended but has its uses:

const title = <h1 style={{color: “red”}}> Super Awesome Kitchen </h1>;

Now the text color will be red! This gives us the power to use HTML, CSS, and Javascript all in the same line instead of having separate files for each.

Differences to Look Out For

background-color: “blue”;

in JSX is

style={{ backgroundColor: “blue}}

and many other variations like this so if your guess on the syntax isn’t working give it a search.

How JSX Works and Where to Use it

Now that we know what JSX is and how we can use multiple languages on it, where can we write this code? Well first of all you must be working with React installed, this is not a vanilla JavaScript feature. Second, you must be working in either a .js or .jsx file. and Lastly, you can put this in your methods and in your render/return section.

Tips and Tricks

Structure

<div>

</div>

If you want to add attributes to it, like a className that allows you to target that whole div. If you do NOT need to target that section at all you can use:

<>

</>

In both cases, you must write all of the returning code inside those two tags or it will break, and not know what to return

Ternary

{condition ? statement executed if true : statement execute if false}

Bellow is a simple logIn logOut button swap based on if the user is logged in, by checking its status in state:

return(

<div className= ‘main-page’>

{

(this.state.loggedIn === False)

? <button>Log In </button>

: <button>Log Out</button>

}

</div>

)

This looks complicated at first but let’s take a look at each line in between the {}, starting with

(this.state.loggedIn === False)

This is checking if the variable loggedIn in state is False. If False it runs the line after the ? which is:

? <button>Log In </button>

and this means that it will return a button with the text Log In. however, if the variable LoggedIn in state is True, it runs the line after : which is:

: <button>Log Out</button>

and similar to before this means it will return a button with the text Log Out.

If you are still struggling with this but understand if statements, the ternary is exactly the same as writing:

if (this.state.loggedIn === False){

return <button>Log In </button>

}

else {

return <button>Log Out</button>

}

Although both of these do the exact same thing, the ternary can be written in the return method whereas the if statement would have to be in a method that is later called in the return method.

Writing an external method like this is only really used when there is a lot of code to be written so you don’t want to clutter the return method with a huge ternary or if you need to reuse this method in different places.

Conclusion