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 :)