The JSX preprocessor
JSX preprocessor it is a step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant.
When you start typing code, driving yourself into the amazing world of web programming sometimes you may feel overwhelmed when you have to select a tool, a library or a framework as your initial learning point. Out there are too many tools, each one with different features aiming the same goal in their own way. Eventually you realize that HTML and CSS are not enough, you need JavaScript. And now for react you are able to use
JSX preprocessor.
At some point, vanilla JavaScript became too heavy and hard in order to achieve certain task, the most efficient way is to make use of a library or a framework.
This time is the turn for ReactJS, it is a JavaScript library, and specifically one of its many features: JSX. Now, we will assume you already know something about ReactJs and the ecosystem around it. Otherwise you should start here first and then move on to this topic.
ReactJS feature:
Basically JSX is an inline markup that looks like XML/HTML and gets transformed to JavaScript (sometimes it can remind you a template language). It is possible to use ReactJS without JSX but JSX makes ReactJS code more elegant. A JSX expression starts with an XML/HTML-like open tag, and ends with the corresponding closing tag, it also supports the XML syntax so you can optionally leave the closing tag off. See the follow example:
const hw = <p>Hello, world!</p>;
This code is just JSX syntax example but you also can do things like embed JavaScript expressions in JSX by wrapping it in curly braces:
function hello(text) {
return text.firstWord + ' ' + text.secondWord + '!';
}
const text = {
firstWord: 'Hello',
secondWord: 'World'
};
const element = (
<p>
This is a, {hello(text)}! // embed JavaScript expression
</p>
);
Even specify attributes like follow:
You may use quotes to specify string literals as attributes:
const element = <div z-index="1"></div>;
You may also use curly braces to embed a JavaScript expression in an attribute:
var style = { backgroundImage: 'url(picture.png)', height: 10, width: 15 };
return <div style={style}></div>;
Now let’s analyze an example combined with ReactJS.
ReactJS applying JSX
var test = (
<div className='test-example'>//notice the parameter className instead of class
<img
src='image.png'
className='test-example'
/>
</div>)
ReactDOM.render(test, document.getElementById('myapp'))
As you can see, it is like write HTML/XML code inside JavaScript but at the end it is just JavaScript. The special consideration is that JSX makes you name the attributes in a different way form the standard, in the example above, the 'class' for CSS must be named 'className' instead of the html standard attribute 'class'.
Basically JSX produces React "elements" and according to the official documentation ‘JSX just provides syntactic sugar to React.createElement(…) function’, see below:
<MyButton color="green" shadowSize={10} >
Go!
</MyButton>
compiles into:
React.createElement(
MyButton,
{color: 'green', shadowSize: 10},
'Go!'
)
JSX preprocessor Pros:
Declarative syntax:
Provides a very easy way to import static HTML or migrate from JavaScript templates. Plus, its enforces good syntactical restrictions similar to XHTML that improves quality of codebase.
ReactJS Documentation priories JSX:
ReactJS documentation uses JSX everywhere so JSX is only going to become more powerful.
Very useful tools and resources:
Babel is a tool able to transpiles ES6, ES7(stage 1 flag), JSX altogether.
Integrations with other frameworks
JSX simple example with AngularJS:
You can integrate JSX preprocessor with Angularjs to write the templates in places that you use javascript, for example in the directives.
If you want to use JSX-style with AngularJS the way is through AngularJS directives. In order to achieve this goal, we have angular-jsx library to convert templates into strings that Angular can understand. Take a look to this example:
Input
angular.module("foo").directive("bar",
function() {
return {
// it can be used in the template for the directives
template: <div>This is a simple example.</div>
};
}
);
Output
angular.module("foo").directive("bar",
function() {
return {
template: "<div>This is a simple example.</div>"
};
}
);
More information about it can be found here. If you want a deeper point of view about more technical aspects related to ReactJs and JSX maybe this article will do the trick for you.
