ezakto code

Tutorial para crear un clon de Google Keep con React.js

La idea de esta serie de tutoriales es ilustrar los conceptos principales de React de forma práctica por medio de la construcción de una aplicación web completa y útil. Como el objetivo es (por lo pronto) centrarse en el desarrollo y mantenimiento de código javascript, tanto la parte de planeamiento de UI/UX como el desarrollo visual es muy generalizado y/o salteado.

Administrador de notas

Si bien el "Hello World" de las aplicaciones web es el ToDo List, preferí hacer otra cosa un poco más compleja para variar (Es más, un ToDo List estará contenido, también). Para esto, vamos a "clonar" la interfaz del administrador de notas Google Keep.

El diseño visual es minimalista, mas la interfaz interactiva es un poco más compleja de lo que parece. Sólo se clonarán las características principales en favor del rápido avance.

Demo aquí

Sobre estos tutoriales

Organización: Esta serie no será 100% lineal. Habrá un conjunto de artículos "primordiales" necesarios para avanzar, y la implementación de características extra u opcionales tendrán su desarrollo en artículos opcionales.

Contenidos: Esta serie será muy amplia en contenidos y estará enfocada de forma práctica y no tanto teórica. Podrán haber terminologías no-tan-conceptualmente-correctas cuyas correcciones/explicaciones tendrían su lugar en un artículo más dedicado. Además, se construirá, destruirá y reconstruirá mucho código intencionalmente, para experimentar el proceso de evolución de una aplicación.

Tecnologías: Si bien lo más adecuado sería utilizar ES6, en primera instancia se va a utilizar la sintaxis más globalmente difundida. En el futuro debería ser actualizado.

Requisitos previos: Conocimiento básico-intermedio de javascript (Variables, estructuras de control, funciones, objetos). Conocimientos básicos de HTML/CSS. Node.js instalado y conocimiento básico de npm. Haber leído la introducción teórica :)

Índice

Let's go!

1. Preparando el campo de batalla: Creando directorios y archivos principales. Instalando dependencias con npm: React, Browserify, Reactify
2. Planeamiento y divisón lógica de componentes: Creación de componentes. Creación del formulario. Creación de nota. Creación de grilla
3. Primeros pasos manipulando el state
4. Cargando y guardando notas en localStorage (Aplicación funcional)
   • [Opcional] Tamaño de fuente dinámico
5. Interacción entre componentes con un componente controlador
   • [Opcional] Masonry layout
6. Reestructurando para utilizar Flux: Estructura de archivos de un proyecto flux. Implementación de actions, dispatcher y stores. Implementación en los componentes.
7. Almacenamiento y actualizaciones en tiempo real con Firebase