Beginning with JSX

As part of my journey into learning ReactJS I have been learning about JSX, and how it works. In order to try to make it clearer to myself I decided to write down what I had learnt. I realised that what I have written might make it a little bit clearer to somebody else, so I have posted it here on Medium.

JSX is an XML-like syntax extension of ECMAScript that is used by ReactJS. It is not intended to be implemented by web browsers, but to be transferred by pre-processors into standard ECMAScript. You can choose not to use JSX when using React, but JSX makes React code much more elegant.

JSX appears a lot like HTML. JSX elements can have attributes similar to HTML (var p1 = <p id=”example”></p>), but JSX elements are treated like JavaScript expressions. This means that a JSX element can be saved in a variable, passed in a function, stored in an object, and the list goes on. JSX expressions can be nested like HTML. This means that when JSX elements are nested, they should be wrapped in one element, or the code will not work. If a JSX expression takes up more than one line it should be wrapped in parenthesis.

var paragraphs = ( 
<div id=”this-is-the-outermost-element”>
<p>I am wrapped in the div.</p>
<p>I too am wrapped in the div.</p>
</div>
);

It is common in HTML to use “class” as an attribute name, but in JSX you have to use “ClassName”. The word “class” is a reserved word in JavaScript. When JSX is rendered “ClassName” attributes are automatically rendered as “class” attributes.

<p class="example">Hey</p>
This will return an error
<p className="example">Hey</p>
This will render as normal

Another syntactical difference between HTML and JSX is the way self closing tags are treated. For tags such as<img> and <br>, the ‘/’ at the end of the tag to close it is optional. They also do not require another tag to close the statement (</img>). In JSX all tags must be closed. Tags that require a closing tag are treated as normal, and the HTML self closing tags require the “/” at the end of the tag in order to close (<img /> or <br />).

<br>
This will be fine in HTML, but it will not work in JSX
<br />
This will work in both HTML and JSX

Any code that is written between the tags of a JSX element will be read as JSX. This can cause problems when you are trying to use JavaScript. When using JavaScript “var demo= 1 + 1” will return “demo = 2”. When the same code is written between the tags of a JSX element “var demo= 1 + 1” will return “var demo = 1 + 1”. By wrapping the JavaScript element in curly braces the Javascript element will execute as normal, and the JSX element will then return “demo = 2”.

var demo = (
<p>1 + 1</p>
);
demo = 1 + 1
var demo = (
<p>{1 + 1}</p>
);
demo = 2

‘If’ statements and ‘for’ loops are not expressions in JavaScript, and therefore cannot be used in JSX. However, there are a number of simple and neat work arounds for using conditional statements in JSX. The first is to inject JSX into the JavaScript ‘if’ statement. The below would result in only the relevant JSX element being used, with the other not being read by the compiler.

if (demo == true){
var message = <p>This JSX element will be compiled.</p>;
} else {
var message = <p>This JSX element will not be compiled.</p>;
};

The ternary operator can be used within JSX, and does not require any work arounds. By simply using the ternary operator between curly braces the code will be read by the compiler, and return the relevant action.

var demo = (
<p>
{5 < 6 ? true : false};
<p>
);

This is my first blog post. I hope you have enjoyed reading, and are feeling a little more enlightened than when you started. I am open to, and encourage feedback. Thanks for reading this far.