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

JSX, used in React, is actually Javascript that is written similar to HTML that later turns into real HTML. This is used to structure and add functionality to your website at the same time. Let's see an example:

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:

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:

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

One thing you must keep in mind is that this isn't ‘real’ HTML and CSS. Because of this fact and some syntax complications with Javascript, some things may vary slightly. One good example of that is in CSS

in JSX is

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

Moving a bit more into how this actually works, as we said, this is Javascript so technically it is running methods that are in the React Library. So when it gets this JSX it then translates everything into actual HTML, CSS, and JavaScript and updated into the virtual DOM, which is later rendered into the real DOM.

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

A heads up on an issue that every beginner faces when using JSX for the first time, is not structuring your render/return method properly. Before writing any code in the return make sure you include an opening and closing tag like this:

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

A really useful feature to use is ternary, as it has a very important role in React because it allows for if statements inside the return method instead of having to use an external method. The basic blueprint of ternary is as follows:

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

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

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

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:

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:

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

To reiterate, JSX is nothing more than JavaScipt code that is translated through React to structure, style, and add functionality to the whole website without having to type in different files of different languages. This is both time-efficient and adds a lot of great features that can be a struggle in the vanilla languages, however, comes with its own learning curve and special syntax to learn and look out for. Good luck and Happy Coding!