Understanding the concept of JSX with ease

Confused about the JSX syntax?

Or did you get startled by the term?

You will feel none of that after you are done with this article.

By the way guys, it’s Agbejule Kehinde Favour.

So without further ado, lets headbutt this stuff guys!

What’s JSX all about?

JSX is like the combination of HTML and Javascript. It is used to describe your UI (User interface) view when using React. It also produces the “React elements”.

“The essence of Jsx is to make coding less stressful”.

Separating Javascript (The logic) and HTML(Markup) is very stressful……Just like separating grains from sand particles. Damn guys, that’s soo stressful!

So by integrating them together, JSX makes coding much more easier.

React makes this possible through the use of components which contain the JSX syntax (Javascript and HTML).

Don’t you feel that relief?

So enough of the intro and lets jump into the interesting part…..

Using the JSX syntax

# Writing the JSX syntax for HTML and Javascript

In JSX , Javascript expressions are written in curly braces({})

The name variable( const name) is a Javascript expression

The element variable (const element) is equal to a JSX expression containing HTML and the Javascript expression

You notice that the javascript expression is inside the curly bracket.

If not written this way , you would be getting errors while writing your code.

HTML code as shown above is written with the HTML tag of your choice.

# JSX can be used in ;

• for loops
• if statements

if statement

You can assign it to variables, accept it as an argument and also return it from functions.

Therefore, JSX is definitely an expression.

# You can also specify attributes in JSX

In JSX, quotes are used in specifying string literal that is sentences or words in strings and so on.

string literal

As mentioned earlier, Javascript expression are put in curly braces({})

NOTE: Don’t put quotes around the curly braces for Javascript expressions in attributes. Use the marks and braces for their respective expressions.

#JSX is mostly Javascript than HTML, so the React DOM uses the camelcase naming convention instead of the HTML naming convention or attribute names.

Therefore;

• class in JSX is className
• tabindex in JSX is tabIndex

# JSX represents objects

“Babel is a software that complies JSX down to React.createElement() calls”.

React.createElement() calls helps to keep your code bug free and create an object like this :

Babel objects

They are called react elements.

Think of them as descriptions of what you want to see on your screen.

React reads/processes these objects and utilize them to construct the DOM and keeps it up to date.

Amazing right?

NO MORE MANUAL MANIPULATION!

Now you know the logic behind the Virtual DOM and the Real DOM synchronization.

Babel HTML

Babel objects on babel

CLICK HERE TO CHECK IT OUT

# in JSX ,you can close empty tags with (/>) like XML

Just like the image tag above

# JSX tags have children

It can contains lots of elements in the variable. It can be nested as shown above.

#FINALLY, The React DOM converts JSX expression to strings before rendering it to prevent XSS (cross-site-scripting) complications which essentially means ERRORS

So that’s about it for JSX expressions.

Hope you’ve learned a lot?

Hope you enjoyed the article?

Feeling like a Badass already?

Cool!

Thank you guys!

Drop in your thoughts in the comment section and don’t forget to hit that clap button if you liked it.

Let’s make this interesting!

How?

Jump right into it here!

Until next time!

Agbejule Kehinde Favour.

Peace y’all!