Cuando comenzamos un proyecto con React.js posiblemente entramos en la incertidumbre de cómo manejar los estilos, ya que existen diferentes maneras y herramientas que podemos usar para ello, podemos hacer cosas desde utilizar un json para definir los estilos e importarlo en cada etiqueta jsx como una prop``style o colocar un archivo .css, .scss o .sass e importarlo en el RootComponent o tu mainjs. También existen otras alternativas como styled components una libreria de la que hablaremos más adelante. Como verán existen muchas alternativas para hacer tu aplicacion con React.js y construir una buena UI (interfaz de usuario) de una forma escalable y ordenada. En este post presentaré diferentes formas de aplicar estilos en tus componentes y el por qué de cada una:
Crear Json styles
Entre las formas poco convencionales para aplicar estilos quizás destaca esta, crear un json para cada componente y transferirlo por medio de una prop style. Parece una locura para muchos especialistas de la maquetación, pero les informo que para los amantes del perfomance no es así, ya que hacer peticiones al servidor de hojas de estilos parece un tema que quizas se deba reconsiderar según la magnitud de tu aplicación. Prueba de este detalle es que existe un framework, o como yo le llamo un pack de componentes, que usa este principio y crea todos sus estilos a partir de la propiedad style en cada jsx y este es "framework" es material-ui (lo recomiendo muchisimo para el material design), ademas imagínate el caso de un ejemplo que conocemos los del equipo EDteam; como es la firma de correo, si eres fan de EDteam conoces dicho tutorial (lo dejo aqui en caso contrario); donde requieres que los estilos se impriman en el atributo style de cada etiqueta para que lo podamos colocar en nuestro correo, aqui conseguiras un ejemplo donde se aplica con reactjs. Además imagínate cuando necesitas hacer un componente o vista dinamica para que tus estilos sean modificados según unas variables, esta forma te facilitaria la vida. Dejaré un simple texto con un "hola mundo" para demostrar cómo se hacen estilos de esta manera:
1import React from 'react' 2import ReactDOM from 'react-dom' 3 4// json styles 5const styles = { color: 'white', backgroundColor: 'blue' } 6 7const Mycomponent = () => ( 8 <div style={styles}> 9 hola mundo 10 </div> 11) 12 13ReactDOM.render(<Mycomponent/>, document.getElementById('container'))
Seguramente te preguntarás pero que ocurre en el caso de los prefijos y todo ese asunto, créeme que la comunidad se preparó para ello y se creó una herramienta diseñada para crear tus etiquetas jsx con estilos y que esto sea solucionado, se llama Styled Components para reactjs y se está usando en el bolerplate más popular que conozco (o eso dice sus 14000 estrellas en github). En resumen, creamos nuestro componente a partir de un conjunto de etiquetas diseñadas con esta libreria y actúan como componente, por lo tanto se escriben en mayúscula como en el siguiente ejemplo retomando el hola mundo:
Div.js
1import styled from 'styled-components' 2import {blue400} from 'material-ui/styles/colors' 3 4export default styled.div´ 5 background-color: ${blue400}; 6 color: white; 7´ 8
index.js
1import React from 'react' 2import ReactDOM from 'react-dom' 3import Div from './div' 4 5const Mycomponent = () => ( 6 <Div> 7 hola mundo 8 </Div> ) 9 10ReactDOM.render(<Mycomponent/>, document.getElementById('container') ) 11
Crear archivos css, sass, less o stylus
Bueno esta es una manera comun de realizar el trabajo para muchos frontend, la unica diferencia que encontraremos en reactjs en combinación con webpack es que tus importanciones del archivo de estilos las realizaras en el componente de tu preferencia, es decir, hay muchas formas de ordenarlo ya sea por componentes individuales, vistas o una sola importacion de estilos y la separación comun en sub archivos donde colocamos mixins y todo lo que necesitamos para nuestra estructura de trabajo. Para utilizar este metodo es evidente que necesitamos tener nuestro style-loader configurado junto con el preprocesador de nuestro agrado como sass-loader o less-loader.
En este boilerplate podemos darnos cuenta de la forma de trabajar con estilos mas comun cuando de archivos scss o css hablamos; es importante tomar en cuenta que podemos trabajarlo en diferente orden por lo que definir una estructura será importante al momento de escoger las herramientas que utilizaremos.