Tutorial React: Planeamiento
27 de junio 2015
Planeamiento y división lógica de los componentes de la aplicación
Vamos a darle un vistazo nuevamente a la interfaz que pretendemos crear:
Antes de empezar a escribir javascript sin sentido, tenemos que tener cierta visión general del funcionamiento de la aplicación. La forma en que lo haremos utilizando React es fragmentando esta vista en componentes y subcomponentes, bajo el criterio de que cada componente debería representar y manejar información lo más independiente posible, y también ejecutar funciones simples. Basándome en estos principios, dividí la interfaz en los siguientes componentes principales:
Estos tres componentes principales contendrán, además, más componentes en su interior. Pero vamos a comenzar con estos tres y los subdividiremos a medida que la complejidad aumente. Algunos desarrolladores prefieren fragmentar hasta el más atómico componente antes de comenzar. Yo lo haré paulatinamente pensando en quienes no están acostumbrados todavía al metodo.
Ya que tenemos identificados nuestros tres componentes principales, vamos a detallarlos:
- Form, formulario: Necesario para añadir notas nuevas. Se expande al ser enfocado, mostrando además un campo de título, una barra de herramientas y un botón de confirmación.
- Note, nota: cada nota es una instancia del mismo componente. La función primordial es mostrar el contenido de la nota, pero además tendrá la posibilidad de eliminarla o editarla. Es, probablemente, el componente principal más complejo.
- Grid, grilla: En este diseño, la grilla no es tan obvia a simple vista, ya que parece que las notas están "sueltas" en la pantalla. Sin embargo, haciendo analogía, podemos decir que la grilla es el tablero donde las notas están pegadas. La grilla contiene todas las notas. Su función principal es ordenarlas y mostrarlas.
Antes de comenzar con javascript, vamos a crear la estructura básica de nuestro index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Keep</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="form"></div>
<div id="grid"></div>
</div>
</body>
</html>
Ahora si, procederemos entonces a crear los respectivos módulos. En el directorio react/components, creamos los archivos Form.js, Note.js, y Grid.js. Cada archivo contendrá un único componente de mismo nombre.
Nota: la nomenclatura de los nombres de archivo puede variar. Algunos prefieren usar la extensión .jsx para indicar que el archivo aún no fue transpilado. Otros, además, prefieren sufijar como form.react.js. Yo prefiero dejarlos simples, ya que la estructura de directorios implica la naturaleza de los archivos.
En primera instancia, el contenido de los componentes será estático.
Form.js
Al expandirse el formulario, vemos que cuenta con varios elementos internos, que podríamos dividir así:
Entonces, comenzamos incluyendo React, y luego definimos la estructura básica del componente.
Recordemos que el método render debe devolver un único elemento react.
var React = require('react');
var Form = React.createClass({
render: function() {
return (
<form className="addnote">
<input className="addnote-title" type="text" placeholder="Título" />
<textarea className="addnote-text" placeholder="Añadir nota" />
<div className="addnote-toolbar">
<button>Hecho</button>
<a className="addnote-btn-list" />
</div>
</form>
);
}
});
module.exports = Form;
Nota: En JSX, el atributo className es utilizado en vez del class de su contraparte HTML. Esto se debe tanto a que class es una palabra restringida en JavaScript como a que className es el nombre de la propiedad en los elementos (V)DOM.
Nota: Por el momento, solo incluiremos un único boton dentro de las herramientas.
Note.js
En principio, la estructura de la nota será simple. Eventualmente, se volverá un infierno :)
Hay que destacar que hay una barra de herramientas inicialmente invisible, que aparece cuando pasamos el mouse sobre cada nota. Dicho esto, la mutilamos:
var React = require('react');
var Note = React.createClass({
render: function() {
return (
<div className="note">
<div className="note-text">Lorem Ipsum</div>
<div className="note-toolbar">
<a className="note-btn-delete" />
</div>
</div>
);
}
});
module.exports = Note;
Nota: Por el momento también, sólo habrá un botón en las herramientas.
Grid.js
No hay mucho para dividir dentro de este componente, ya que no tiene herramientas ni botones ni nada. Sólo será un contenedor con algunas notas dentro.
La grilla será el primer componente que incluya otro componente. Para hacerlo, debemos importar el componente Note creado previamente.
var React = require('react');
var Note = require('./Note'); // El nombre de los componentes debe comenzar con mayúscula!
var Grid = React.createClass({
render: function() {
return (
<div className="grid">
<Note />
<Note />
<Note />
</div>
);
}
});
module.exports = Grid;
Nota: Al requerir un componente, debemos incluir el archivo que creamos. Es por eso que usamos una ruta relativa (./). De lo contrario, browserify buscará el componente en la carpeta node_modules.
Inicializando la aplicación
Ya con los tres componentes principales en forma, es hora de montar la aplicación.
Lo primero será montar los componentes en el DOM. Para ello, editamos nuestro archivo javascript principal: react/app.js. Incluimos react, los componentes a montar y hacemos uso del método React.render().
app.js
var React = require('react');
var Form = require('./components/Form');
var Grid = require('./components/Grid');
// No es necesario incluir Note, ya que las notas son incluidas dentro de Grid.
// Ahora, montamos los componentes en sus respectivos contenedores:
React.render(<Form />, document.getElementById('form'));
React.render(<Grid />, document.getElementById('grid'));
Ya casi listos! Ahora tenemos que compilar toda la estructura en un archivo js ejecutable por el navegador. Para ello, abrimos la consola en el directorio raiz del proyecto y ejecutamos el siguiente comando:
browserify -t reactify ./react/app.js -o ./js/main.js
Browserify fue instalado globalmente, por eso llamamos el ejecutable directamente. La opción -t indica que aplicaremos una transformación a los archivos, que en nuestro caso es reactify (transpila jsx a js estándar). Luego indicamos el archivo base a compilar. Browserify acoplará todos los modulos llamados a través de require() de forma tal que funcionen perfectamente en el navegador. Finalmente, la opción -o indica dónde guardar el resultado final.
Ahora agregamos el script compilado a nuestro index.html. Justo antes del </body>, incluimos la siguiente línea:
<script src="js/main.js"></script>
Ahora, abrimos index.html en nuestro navegador de preferencia y voilà!
Si, se ve un poco mal. Natural, ya que no hay css todavía. Como este tutorial no pretende enseñar css, escribiremos nuestro propio style.css a gusto. Por si acaso, pongo a disposición uno de ejemplo aquí.
