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?
“The essence of Jsx is to make coding less stressful”.
So by integrating them together, JSX makes coding much more easier.
So enough of the intro and lets jump into the interesting part…..
Using the JSX syntax
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
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.
- 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 :
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.
NO MORE MANUAL MANIPULATION!
Now you know the logic behind the Virtual DOM and the Real DOM synchronization.
# 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?
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!
Until next time!
Agbejule Kehinde Favour.