Section 6: Styling React Components

Question 1

trim()

Answer 1

trim() es un built in method que remueve el exceso de espacios en blanco al principio y al final.

Question 2

Nota sobre inline style

Answer 2

El inline style tiene la prioridad más alta en CSS y eso hace override a todos los otros estilos.

Nota: Maximilian prefiere no usar inline style.

Question 3

Setting CSS Classes Dynamically

Answer 3

Luego de definidas las clases en un archivo css, podemos usar curly braces {} y backticks ‘’ para formar un template literal (todo lo que ponga dentro de los bc será tratado como un string) má un place holder ${}, en el elemento y definir.

Question 4

Introducing Styled Components

Answer 4

Si los estilos CSS no están scoped, cada elemento en la página será afectado por ellos. Hay dos formas que nos ayudan a resolver eso aplicando los estilos específicamente a los componentes que deseamos:

Styled components (Package): descargamos el paquete en la web oficial, paramos el servidor y lo instalamos en la carpeta del proyecto.

Método Especial: default javascript permite llamar un método con backticks ej:
const Button = styled.button``;
en donde button es un método especial que se inicializa con ``. Lo que se coloque entre los backticks será interpretado de una forma especial.

Question 5

El paquete styled component

Answer 5

El paquete styled component tiene estilos para todos los elementos de HTML.

El símbolo & es soportado por el styled component package y es como la palabra reservada .this porque hace referencia al componente que se está creando.

El paquete toma los estilos que establezco y luego asigna un classname único al componente asegurándose de que los estilos no puedan asignarse a otros componentes en el app y luego agrega las clases como global CSS.

Question 6

Dos componentes por archivo

Answer 6

Tener un solo componente por archivo es una buena regla a seguir, pero puedo tener dos componentes en un archivo.

Question 7

Styled Components & Media Queries

Answer 7

Tenemos un botón y queremos que si estamos en un mobile device tome todo el ancho pero que en pc solo tome el ancho que necesita, en ese escenario usaríamos media query. Ej:

@media (min-width: 768px) {
width: auto;
}
Cuando la condición se cumple, asume el estilo.

Question 8

CSS Modules

Answer 8

CSS MODULES es un feature que solo está disponible en proyectos que están configurados para soportarlo porque necesita una transformación de código antes de que mi código corra en el navegador.

Nota: los proyectos creados con create-react-app están configurados para usar CSS MODULES.

1# Primero hay que nombrar el archivo.css como module.css
Ej: Button.module.css
2# importar classes o styles desde el .css:
import styles from ‘./Button.module.css’;
styles se convierte en un objeto manipulable que contiene todas las clases dentro de mi archivo CSS.
3# referencio en el atributo className la clase que deseo aplicar dentro de aquellas que están en mi objeto STYLES.