Un primer paso trabajando con ReactJS

Posted by in Javascript y TypeScript

En una anterior entrada os conté que hace tiempo fuí a una charla sobre ReactJS, y que gracias a ella, ahora mismo estoy poniendola en práctica.

Un segundo paso

Tras el código inicial, nada mejor que separar lo que es Javascript, del HTML, y en la versión 2 tienes la misma. Se trata de extraer el código Javascript (jsx) y almacenarlo en un fichero independiente, manteniendo el type=”text/jsx” para indicar el tipo de contenido que tiene el fichero. El resultado, sigue siendo el mismo.

El siguiente escalón

El siguiente paso, o sea, la versión 3 del código inicial, busca reutilizar el componente. Para ello, el método ReactDOM.render debe devolver los componentes dentro de un div. Si no fuera así, daria un error:

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

Por contra, el renderizado no da problemas si se llama a los componentes dentro de un div, tal que así:

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

El cuarto paso: propiedades

De momento, la cosa pinta bien, pero estoy seguro de que para reutilizar un componente, nada como que el usuario pueda modificar los datos. La versión 4 de nuestro código supone una modificación en el renderizado ReactDOM.render, al incluir en cada componente una propiedad 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'));

El hecho de incluir estas propiedades en la definición de nuestro componente se traslada a la clase que generamos, dentro de las propiedaes de la clase React.createClass, así que ahora disponemos de this.props.mensaje y this.props.mensaje2 para usar. La redefinición del código completo first4.js es:

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'));

El código HTML es igual que las versiones 2 y 3, modificando el acceso a su correspondiente fichero JSX.

ReactJS, paso a paso

Quizás, tanto la entrada anterior como esta de hoy parecen fáciles, pero creo que son las entradas ideales para hacerse una magnífica idea del potencial de ReactJS, puesto que conforme avanzamos se complican las cosas, y hay que tener las bases de conocimiento sólidas para avanzar.

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 es una libreria centrada en la V o sea, la Vista del modelo MVC (o MVW, o MVVM)
  • Crea componentes pequeños y funcionales
  • Crea componentes sin estado (en la medida en que pueda ser)

El código de estas entradas lo tienes disponible en mi cuenta de GitHub.

Un saludo, y happy coding!

Google+ Comments - Comentarios Google+