The Basics of Using JSX in React.js

If you’re new to React, you might have run into the term JSX. JSX stands for JavaScript XML. For those who are curious, XML stands for Extensible Markup Language. JSX is a type of syntax or syntax extension that allows us to use a blend of HTML and mainly JavaScript to create elements. Once JSX passes through a conversion tool or compiler like Babel, it will turn into JavaScript so that the elements created can show up on a webpage.

Benefits

Some benefits of JSX is that it helps us to:

• Incorporate design practices into simplified code that we can render onto the screen without using separate technology.
• Write cleaner code or syntactic sugar instead of using React.createElement() repeatedly.
• See valuable error messages so we can find solutions easier.

There are a number of ways to use JSX in React. Let’s investigate how to assign a className, call attributes with curly brackets, and simplify React.createElement() all using JSX.

class vs. className

In HTML, in order to implement design using CSS, we would have to add a class to a tag like <div> and call the name of that class in a CSS file. HTML uses the “class” attribute, but since JSX more resembles JavaScript, class needs to be used in camelCase. Camel case is helpful because it allows readability and the ability to use dot notation like other object oriented programming languages. In the image below, instead of typing “class” like in HTML, it becomes a className called “greet” in a component called App.js as seen on line 14:

Calling Attributes

In React, props are attributes from an object containing data that we can send to multiple components in an app. In order to render the extracted data to a webpage for users to see, we could use JSX. Let’s say I wanted my computer screen to read “hello”. I can pull data from state on line 7 to display “hello” on the webpage in a HTML h1 tag. To do this, I would need to put curly brackets around the prop I want to use. Here I am calling state as {this.state.greeting} on line 15.

This will pop up on the DOM as “hello!”.

React.createElement()

In React, if we didn’t want to use JSX, we would use React.createElement(). By doing that we would have to repeatedly type out React.createElement() and input the tag name, props, and children every time we want to add an element to a webpage. In a function component called Hello, I am producing an element using React.createElement().

Writing the equivalent of lines 5–7 would be simplified JSX with props passed as a parameter in the function as seen on line 8 below. “Props.response” is the state that I took from line 8 in App.js and sent down to the Hello component on line 20 in the first code editor photo.

Now we can see the response “hi” showing on our webpage!

Takeaways

We looked at different, basic ways to use JSX in our React apps by assigning className, using curly brackets for props, and replacing React.createElement(). Here are a few points to remember:

• React is a framework for building user interfacing components. JSX is a syntax extension React uses to create elements that we can add to components. It is not a programming language. Once we enter JSX into our code editor and save the changes, a compiler converts the JSX into JavaScript so that the code can be executed. Once the code is executed we will see any changes we made on the webpage.
• JSX lets us incorporate design practices by combining mostly JavaScript and some HTML into a useful syntax. It also gives us valuable error messages for debugging and allows us to write simplified code.

I hope this article was helpful in exposing the basics of JSX. Thanks for reading!