ReactJS

React Poster

React.js | Compilar Sass

Aunque hay muchas formas de escribir estilos cuando trabajamos con React.js, es bastante habitual usar Sass, que no es más que CSS con superpoderes, para escribir las hojas de estilos pero que requieren de una pequeña librería para compilar lo que hemos escrito en reglas CSS puras. Es aquí donde entraba el archiconocido node-sass que tantos quebraderos de cabeza solía dar, pero…

Continue reading…
React JS

React.JS | Cómo crear Web Components

Aunque el concepto de React.JS y Web Components es muy parecido en el fondo, crear componentes reutilizables, resuelven problemas diferentes porque se aplican a contextos muy distinto ya que, Web Components se basa en crear mini-componentes que puedan ser incrustados en cualquier desarrollo web y en React.JS se crean componentes que pueden ser reutilizados dentro de cualquier desarrollo con React. Pero ¿es posible mezclar ambos mundos? La respuesta es, y además de una forma muy sencilla.

Continue reading…
React JS

React.JS | Theming con JSS

En ocasiones, al desarrollar aplicaciones web es necesario realizar un diseño que acepte el cambio de Tema para adaptarlo a las necesidades del cliente de forma dinámica y que pueda personalizar su experiencia. Si estamos usando React.JS junto con JSS para aplicar los estilos, podemos hacerlo de forma manual añadiendo el código necesario o, usar la característica de Theming de JSS.

Continue reading…
React JS

React.js | Variables de entorno

Al desarrollar un proyecto siempre es necesario disponer de diferentes entornos para poder desarrollar y testear antes de pasar a producción. Así, es habitual tener entornos de Desarrollo, Pre-Producción y Producción aunque también podemos encontrarnos con escenarios con más (o menos) entornos. Por ello, es necesario disponer de variables de entorno que puedan ser configurables de forma automática a la hora de compilar/ejecutar nuestras aplicaciones react, tales como URLs de Apis, Client Ids, etc.

Continue reading…
React JS

React.JS | Cambiar el puerto 3000 que viene por defecto con la plantilla

Cuando creamos un proyecto de React.JS con la plantilla, por defecto se ejecutará en el puerto 3000, lo que hará que pueda darnos conflicto con otros proyectos que tengamos en ejecución si, como en mi caso, hacéis pruebas en proyectos paralelos mientras desarrolláis la aplicación principal. Entonces, ¿cómo lo cambiamos?

Continue reading…