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:
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
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
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
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:
<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
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:
{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
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!
