ReactJS tools

A long ago, I wrote an entrance about ReactJS and what it is, and in a second entrance, I wrote how to create the first components. In this third entrance, it is time to go further and start working with tools for using React, and later on, use JSXTransformer.

No matter if you are working with Firefox or Chrome, there are tools for both for debugging code with React. The official repo is on GitHub https://github.com/facebook/react-devtools:

react reveloper tools for Firefox

And for Chrome:

react reveloper tools for Chrome

Let’s focus on the last version done, first4.htm, to see the debugging tools in action:

React Tools

As you can see, the tool is perfect for the job, for debugging components.

JSXTransformer.js

In the first code, and in the rest done until now, I have used the library JSXTransformer.js, who is build for compiling the JSX code into a React code. The library allow that this transformation can be done directly on the browser, but it’s a time consuming task, and it can be a solution when developing, but not the right solution when the code is in production. It is better to have precompiled the code.

As an option, you must include:

/** @jsx React.DOM */

at the beginning of the JSX code, so the compiler can be aware of.

Another way of copiling is by using gulp and the plugin gulp-react, in NodeJS (you can read this article if you need to add a proxy when using npm). So, let’s install react-tools:

npm react-tools

Later, you can write the command jsx –watch input_dir/ output_dir/ to watch the dirs where we are writting the jsx files, and automatically, transform them into a js code.

Trying JSX in an example

I created a first6.html with this code:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Manejando Datos</title>
</head>
<body>

<div id="content"></div>

</body>
</html>

And the JSX file, it is the same as version 5:


var PrimerComponente = React.createClass({
render: function() {
return (
<div>
<h2>{this.props.mensaje} ... </h2>
<div>{this.props.children}</div>
</div>
);
}
});
ReactDOM.render(
<div>
<PrimerComponente mensaje="Manejando datos" >Aprendiendo React</PrimerComponente>
<PrimerComponente mensaje="ReactJS">Version 6 usando NodeJS!!</PrimerComponente>
</div>
, document.getElementById('content'));

Let’s transform the JSX code using NodeJS:

nodeJS jsx

And the JSX code has been transformed into:


var PrimerComponente = React.createClass({displayName: "PrimerComponente",
render: function() {
return (
React.createElement("div", null,
React.createElement("h2", null, this.props.mensaje, " ... "),
React.createElement("div", null, this.props.children)
)
);
}
});
ReactDOM.render(
React.createElement("div", null,
React.createElement(PrimerComponente, {mensaje: "Manejando datos"}, "Aprendiendo React"),
React.createElement(PrimerComponente, {mensaje: "ReactJS"}, "Version 6 usando NodeJS!!")
)

, document.getElementById('content'));

Let’s try, and it is still working:

first6 usando jsx

The only difference between versions 5 and 6 of our demo is that version 5, the compilation is done on the browser, while version 6 is running compiled code already.

Attribs class and for using ReactJS

When you are building components, it is normal that you assign classes. But class is a reverved word in Javascript (also for). instead, you must use className and htmlFor, so this way you are indicating to ReactJS to compil the HTML attributes class and for (because you must not forget that you are writting Javascript o TypeScript code).

Have a nice day and happy coding!

ReactJS tools

ReactJS tools

JSXTransformer.js

Trying JSX in an example

Attribs class and for using ReactJS

Manejando Datos Newsletter