First contact with ReactJS

In a past entrance, I wrote about a ReactJS talk I went, and now, it is time to put some code on what I learnt there. This is my first contact with ReactJS, on order to decide if … I keep on learning or I move to another one, such as VueJS.

A second step

After a initial code, the best thing you can do is to order your files, and not to mix Javascript with HTML or CSS. The Javascript code will be extract into a jsx file, but the way of using this file is by especifying the type=”text/jsx”. You’ll get the same result.

The next step

Next step, step 3, is writting a reusable component. To do that, the method ReactDOM.render should create the component inside a div element. Otherwise it will rise an error:

ReactDOM.render( <PrimerComponente /> <PrimerComponente /> , document.getElementById(‘content’));

On the other side, the render has no problems when calling from inside a div, such as:

ReactDOM.render( <div> <PrimerComponente /> <PrimerComponente /> </div> , document.getElementById(‘content’));

Next step: properties

By now, I am doing right, but in order to reuse the component, let’s adapt the code for assuming other data. Version 4 of our code add this feature, and the way ReactDOM.render render data now allow two properties: mensaje y un mensaje2.

ReactDOM.render(

<div>
<PrimerComponente mensaje="Manejando datos" mensaje2="React from JSX Version 3" />
<PrimerComponente mensaje="Esto " mensaje2="mola"/>
</div>

, document.getElementById('content'));

The consecuence of adding this two properties to the component is also include this two properties also to the class React.createClass, so now, you have available this.props.mensaje and this.props.mensaje2 ready to use. The full new code first4.js is:
var PrimerComponente = React.createClass({
    render: function() {
        return (
<h2>{this.props.mensaje} ... y {this.props.mensaje2}</h2>

     );
    }
});
ReactDOM.render(

<div>
    <PrimerComponente mensaje="Manejando datos" mensaje2="React from JSX Version 3" />;
    <PrimerComponente mensaje="Esto " mensaje2="mola"/>;
    </div>;

    , document.getElementById('content'));

As you can see, the HTML code has no change since version 2 and 3 of our example, and only the JSX file has been changed.
ReactJS, step by step
As you can imagine, the first code and today’s code are easy to understand, but I hope you can get an overview of what to expect from ReactJS, because when you can do more complext component, you need solid knowledge.
Por supuesto, no hay nada mejor que aprender de los que ya llevan usando ReactJS más tiempo, por lo que es una buena oportunidad para que leas los 9 consejos que dan aquí. Te hago un pequeño resumen de las primeras, que son las que afectan a los principiantes como yo:

React is a library focus on the V (if you use the MVC or MVW, or MVVM model)
Create small and functional components
Create stateless components (if you can)

The code of this entrance is available on GitHub.
Happy coding!
UPDATE: Finally, I decided to improve my skills on VueJs and Vuetify after this first contact with ReactJS.
LinkedIn
Facebook
Reddit
Print
Twitter
Telegram
WhatsApp
Tumblr
Pinterest