ReactJS in a minute: What is JSX?

Hello :)

Today’s topic is JSX.

JSX is an abbreviation for (J)ava(S)cript (X)ML.

Don’t worry. You don’t need to know what is XML to use JSX, and you don’t need to download anything because it is included with React.

JSX is a “syntax extension” that allows you to write HTML inside JavaScript.

Now, imagine every time you want to add a new HTML element to JavaScript you have to write this:

Old fashion way of writing HTML in JavaScript.

Horrible, right?

Now, imagine if you could write NORMAL HTML!

JSX

One amazing feature in JSX that I like so much is that you can add expressions!

You don’t know what is an expression?

Okay, to make it simple for you…Expression is JavaScript inside HTML.

Okay, maybe an example will solve the dilemma.

JavaScript expression

So, an expression is a value or an operation you can add to HTML using JSX.

IMPORTANT!!!
React uses camelCase property naming convention, for example:

class becomes className

onclick becomes onClick

Thank you for reading :)

--

--

I love React and anything that has JavaScript and frontend in it.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abdo Amin

I love React and anything that has JavaScript and frontend in it.