React’s Javascript Extension(JSX)
Javascript XML…
JSX is short for JavaScript XML and it is a JavaScript Syntax Extension created by Facebook during the birth of her JavaScript Library, React. JSX makes it possible to combine plain Javascript and Hyper Text Markup Language (HTML) in a single file. JSX being used in React, produces React Elements.
Why Does React Use JSX?
React, a JavaScript library used for building seamless User-Interfaces( UIs ) uses JSX syntax extension and this has been one of its most thrilling features so far. Initially, before JSX, developers had to split their code files when using JavaScript and HTML because their individual file extensions didn’t support the other’s syntax. To a massive extent, this contributed to the complexity of code blocks under development. In order to reduce this complexity, the inventors of React decided to employ the use of an extension that could see developers writing these supposed must-be-separated codes in a single file.
This idea changed lots of initiatives and as intended, together with the introduction of components which allowed for the splitting of an entire UI into independent, reusable pieces, so as to think about each piece in isolation, development was made easier. React developers are not compelled however to to use JSX, hence, it can be forgone.
Nevertheless, majority of it’s developers have found immeasurable amount of ecstasy in using the amazing JavaScript extension because of its unique features and the role it plays in reducing complexity while writing codes.
Using JSX in React
JSX came with some amazing features which has contributed to it’s adoption by React developers. One of these features is its syntax which means its important to learn how this syntax works.
Using JavaScript Expression
The way JSX expressions are written makes it unique, To write a JavaScript expression e.g User.lastName, User.firstName etc in JavaScript, it must be embedded/encapsulated in a curly brace, {}. This communicates to the compiler that it is a JavaScript expression
JSX is an Expression
JSX expressions can be written anywhere a JavaScript code can fit in e.g Within an If statement, loops, callbacks, blocks etc.
Jsx expressions are to be wrapped in brackets “( )” by convention as this prevents automatic insertion of semi-colon.
Using Attributes in JSX
It is obvious that JSX is a combination of both JavaScript and HTML, but it is very important to point out that JSX is closer to JavaScript with respect to syntax than it is to HTML, hence, it adopts the camelCase properties which are similar to those in JavaScript naming convention. Attribute names are also written in camelCase, eg; tab-index becomes tabIndex etc.
There are two major ways of assigning values to attributes in JSX. They are:
Using quotes to assign a string value.
- Using curly braces to assign JavaScript expressions as value.
- Using quotes to assign a string value.
It is very necessary to note that quotes should never be used around the curly brace when a JavaScript expression is being used. Quotation marks and curly braces must never be used at the same time.
Specifying Children in JSX
Similar to HTML, JSX uses two types of tags, which are self-closing tags and non self-closing tags.
- Self-closing Tags: They do not have any element/children nested in them, hence they are self closing.
- Non self-closing Tags: They have elements/children nested in them, hence they have both opening and closing tags.
How Does JSX Really work?
JSX is compiled at run-time to plain JavaScript by a compiler called Babel. Babel compiles JSX down to React.createElement() whenever it runs JSX codes. What this means for short is that all JSX codes are converted by React.createElement() and after compilation, these compiled codes are read and used in the construction of the UI and keeping the virtual DOM up to date.
For further reading, see the reactjs documentation.
