React Two - Styling

Una de las formas consideradas como escalable por algunos desarrolladores para dar estilos en React es :

• Los estilos deben ser globales

• Los estilos deben ser locales.

• Todos los estilos de los componentes deben concentrarse en una sola hoja de estilos.

• Ninguna respuesta es correcta

Uno de los pensamientos sobre estilos de REACT se centra en que cada componente debe tener sus propios estilos.

• Verdadero

• Falso

Cuando nos referimos a estilos inline o inline styling nos referimos a:

• Crear codigos de estilos CSS en una sola linea para ahorrar memoria.

• Crear codigos CSS dentro de la misma linea de HTML.

• Definir los textos de nuestra aplicación dentro de una misma linea para que el usuario tenga una mejor experiencia.

• Define el tamaño horizontal o vertical de un bloque de elementos, dependiendo del modo de escritura.

En REACT los estilos en linea lo pasamos en forma de un CSS string como

• Un string de CSS

• Un objeto de Javascript

• Todas son correctas

• Ninguna es correcta

¿Para aplicar estilos CSS podemos utilizar como alternativa de sintaxis JSX?

• Verdadero

• Falso

Answer explanation

Para poder utilizar utilizar estilos CSS en REACT es imprescindible utilizar sintaxis JSX ya que combinamos tanto JS como HTML en nuestro código.

¿Cual de lo siguientes objetos de estilos de REACT es correcto?

• const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', };

• const divStyle = { color: blue, backgroundImage: 'url(' + imgUrl + ')', };

• const divStyle = { color: 'blue' backgroundImage: 'url(' + imgUrl + ')' };

• const divStyle = { color: 'blue' backgroundImage: url(' + imgUrl + ')};

Answer explanation

En los objetos de estilos de REACT los atributos deben estar encerrados entre comillas y separados por comas, respetando la sintaxis de los objetos de Javascript.

¿Para dar color de fondo en REACT podemos utilizar background-color?

• VERDADERO

• Falso

Answer explanation

En REACT estilos cambiamos la sintaxis de los atributos ya que entran en conflicto el guión (-) por lo tanto cambia por camelCase

Dos ventajas de utilizar inline styling son:

• No requiere de un loader.

• Evitamos colisiones gracias a los estilos locales.

• Mantenemos los pseudo selectores.

• La sintaxis es intuitiva.

Answer explanation

Cuando utilizamos inline styling tenemos la ventaja de evitar colisiones entre los estilos porque estos se encuentran confinados a cada componente y evitamos tner que utilizar un loader,contrario tenemos que perdemos los pseudo selectores (como hover y click) y la lectura de su sintaxis es menos intuitiva.

¿Para dar asignar una clase en inline styling utilizamos la palabra reservada class?

• VERDADERO

• FALSO

Answer explanation

Para evitar conflictos con la palabra reservada CLASS de Javascript es necesario utilizar className en su lugar en nuestros estilos CSS de REACT.

¡¡No olviden utilizar camelCase!!

Para importar una hoja de estilos propia o un framework en REACT utilizamos:

• import

• requiere

• get

• search