A few weeks ago, I had the chance to assist to @coSfera to a talk given by @javivelasco related to ReactJS, a library to build user interfaces, perfect for front-end developers.
The ReactJS talk
Before continue, I must say that the talk about ReactJS given by Javier Velasco ends to convince me about the use of new technologies becuase they are though to make things easy, well, although once toy invest some time in increasing your skills and the knowledge. The talk was desinged to share the filosophy of ReactJS, the state of the components, how components are rendered, and several other good features about ReactJS. At the end of the talk, Javi did live coding to create a YouTube search app by using of of the projects he is working on, React Toolbox, and he didn’t spend more than 15 minutes to do it, starting with a blank template. A really cool example of using several tools!!.
Now, it is my turn to put this knowledge into play, improve my skills related to Javascript (well, I will try to move to TypeScript, of course!), and use the power of the tools explained in the talk.
Where to start
The first step is visiting ReactJS and download the librery, or instead, using the CDN (that’s what I did!).
React is a library to build user interfaces.
React works by creating components, easy to reuse them, and later on, insert them on elements on the DOM, or in a virtual DOM if you are using NodeJS. the internal behaviour is not so simple, because the rendering is depending on the content, and only when the content is modified, the component is re-rendered. The idea behind is to decrease the time consuming act of recreate the DOM, doing the process faster. Another important issue is that there is only one way (no birdirection, although I believe it can be added!).
The main reasons to try ReactJS are:
- It is based on components that can be reused
- The library is small, around 140 Kb
- It is fast
- It is easy to learn (in comparision to others), and you can use it wth other such as jQuery, …
- It has a virtual DOM
- It has a language called JSX that you can use to code your components as you were writting HTML, so, later on you need to compile to Javascript by using JSXTransformer.js
In my opinion, with such advantajes, I encaurage you to use this library in your projects from today!
In case you need more information, you have all documentation available here https://facebook.github.io/react/docs/getting-started.html. Also, you can access to online tools for starting your react code using JSbin, either with or without JSX.
Mi first React code
Maybe it is not me best code, but there is nothing better that starting from zero, with a little of HTML and Javascript to put React into action:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Manejando Datos</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.5/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
var PrimerComponente = React.createClass({
render: function() {
return (
<h2>Manejando datos ... y React</h2>
);
}
});
ReactDOM.render(<PrimerComponente />, document.getElementById('content'));
</script>
</body>
</html>
The code is very easy to understand. In the head I reference to several libraries, including React, and you need to load two of them: react y react-dom. The third library is JSXTransformer, who is the actor that translate React code into Javascript. Also, I created a DIV where the action will be shown.
It is really important to include type=”text/jsx” in scripts to notify that the content is JSX, and not Javascript.
For creating a component, you need to use the React.createClass class, and include the properties of the component. It always has to be a render function, the only that has the code of the coponent.
In order to show the component in the DOM, you need to execute the render function of the ReactDOM library, specifying the component to include, and the parameters, and also, where the component should be shown.
I like ReactJS
Although the example code is only a small tip of how to use React, I must admit that I like it so much, and I will try to invest several entrance to see React in deep.
Happy coding!