Introducción al curso avanzado de React

1

Qué necesitas para este curso y qué aprenderás sobre React.js

2

Proyecto y tecnologías que usaremos

Preparando el entorno de desarrollo

3

Clonando el repositorio e instalando Webpack

4

Instalación de React y Babel

5

Zeit es ahora Vercel

6

Linter, extensiones y deploy con Now

Creando la interfaz con styled-components

7

¿Qué es CSS-in-JS?

8

Creando nuestro primer componente: Category

9

Creando ListOfCategories y estilos globales

10

Usar información real de las categorías

11

Creando PhotoCard y usando react-icon

12

SVGR: de SVG a componente de ReactJS

13

Creando animaciones con keyframes

Hooks

14

¿Qué son los Hooks?

15

useEffect: limpiando eventos

16

useCategoriesData

17

Usando Intersection Observer

18

Uso de polyfill de Intersection Observer e imports dinámicos

19

Usando el localStorage para guardar los likes

20

Custom Hooks: useNearScreen y useLocalStorage

GraphQL y React Apollo

21

¿Qué es GraphQL y React Apollo? Inicializando React Apollo Client y primer HoC

22

Parámetros para un query con GraphQL

23

Usar render Props para recuperar una foto

24

Refactorizando y usando variables de loading y error

25

Usando las mutaciones con los likes

Reach Router

26

¿Qué es Reach Router? Creando la ruta Home

27

Usando Link para evitar recargar la página

28

Creando la página Detail

29

Agregando un NavBar a nuestra app

30

Estilando las páginas activas

31

Rutas protegidas

Gestión del usuario

32

Introducción a React.Context

33

Creación del componente UserForm; y Hook useInputValue

34

Estilando el formulario

35

Mutaciones para registro

36

Controlar estado de carga y error al registrar un usuario

37

Mutaciones para iniciar sesión

38

Persistiendo datos en Session Storage

39

Hacer like como usuario registrado

40

Mostrar favoritos y solucionar fetch policy

41

Cerrar sesión

Mejores prácticas, SEO y recomendaciones

42

Últimos retoques a las rutas de nuestra aplicación

43

React Helmet

44

Midiendo el performance de nuestra app y usando React.memo()

45

React.lazy() y componente Suspense

46

Usando PropTypes para validar las props

47

PWA: generando el manifest

48

PWA: soporte offline

49

Testing con Cypress

Conclusiones

50

¡Felicidades!

Curso de React Avanzado

Curso de React Avanzado

Miguel Ángel Durán

Miguel Ángel Durán

¿Qué es CSS-in-JS?

7/50
Recursos
Transcripción

Antes la forma en la que construíamos nuestras aplicaciones era con HTML-centric:

<button className='button button-red'>
	Click here!
button>
const button = document.querySelector('button')
button.addEventListener('click', function () {
	doSomething()
})
.button {
	border-radius: 4px;
}

.button-red {
	background: red;
	color: #fff;
}

Luego pasamos a JavaScript-centric:

render () {
	return (
		<button
			className='button button-red'
			onClick={doSomething}
		>
			Click here!
		button>
	)
}
.button {
	border-radius: 4px;
}

.button-red {
	background: red;
	color: #fff;
}

Ahora hoy en día pasamos a CSS-in-JS nos permite no solo hacer el jsx si no colocar los estilos en el mismo JavaScript, de la siguiente manera:

const Button = styled.button`
	border-radius: 4px;
	${props => props.accent && `
		background: red;
		color: #fff;
	`}


render () {
	return (
		
	)
}

Con CSS-in-JS no debemos preocuparnos por tener dos clases igual, no nos debemos preocupar por el Critical Path CSS, tendremos un CSS mucho más óptimo.

En esta clase utilizaremos styled-components el cual es una biblioteca para CSS-in-JS pensada más que todo para React

Aportes 23

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Styled-components

.
Los styled-components son una de las nuevas formas de usar CSS en JavaScript moderno. Está basado en los CSS modules, una forma de escribir CSS que se enfoca el que el alcance de los estilos funcione por componente y no se filtren a ningún otro elemento de la página.
.
Los styled components se basan en crear componentes de carácter estético para hacer código más semántico y evitar los problemas de especificidad que trae el CSS tradicional.
.
Los styled components le permiten escribir CSS simple en sus componentes sin preocuparte por las colisiones de nombres de clase y haciendo uso del poder de JavaScript para manejar estilos con lógica (basado en props).
.
Nota: en styled components escribes CSS exacto, así que prácticamente todo lo que puedes hacer en CSS lo puedes hacer en styled components y se escribe igual.
.
Es bastante sencillo, sólo tenemos que seguir 3 pasos:

  1. importar styled components
import styled from 'styled-components'
  1. crear un componente con estilo basado en algún elemento html
const DivConEstilo = styled.div`
	color:red;
  background:black;
`
  1. Utilizar el componente como si fuera cualquier componente de React
const Contenedor = () =>{
  return (
  	<DivConEstilo>
    	Hola Styled Component
    </DivConEstilo>
  )
}

Styled Components
funciona en react native ?

De que manera podrìamos usar tokens para variables frecuentes como colores o bordes? bno espero que salga en la siguiente clase

Esto mataría el uso de los preprocesadores de CSS (less, sass, stylus)?

Una gran desventaja de esta librería es que se vuelve un caos al tratar de depurar directamente desde el inspeccionador de elementos del navegador, ya que tokeniza las clases, se te hace un lío identificarlas en el codigo desde el inspector, como que voy a pasar de esta librería…

como es el uso de sass usando styled components?

¿Utilizar styled-components significa que ya no se debe configurar los loaders relacionados con CSS en el archivo de Webpack?

Esto se ve muy practico. Ya imagino las posibilidades…

una consulta el uso de https://material-ui.com/ Material UI afecta el desarrollo con Style-components?

Es algo similar a lo que se usa en Vue, generas dentro del archivo .vue el HTML y puedes añadir los estilos con el termino scoped, haciendo que solo tenga efecto dentro del componente./

Es una tendencia muy genial 🤘

En lo personal no me termina de agradar el css en Js, aun no lo he probado a fondo, pero me parece que para animaciones complejas puede ser algo engorroso o tal vez solo sea yo por no probarlo a fondo aun.

Genial

Puedo usar javascript para jugar con propiedades en css?

Consulta, que tiene de mejor “CSS-in-JS” por sobre “SCSS”?, por que usar “CSS-in-JS” por sobre “SCSS”?

Ahora hoy en día pasamos a CSS-in-JS nos permite no solo hacer el jsx si no colocar los estilos en el mismo JavaScript, de la siguiente manera:

const Button = styled.buttonborder-radius: 4px; ${props => props.accent &&
background: red;
color: #fff;
`}

render () {
return (

		Click here!
	
)

}
Con CSS-in-JS no debemos preocuparnos por tener dos clases igual, no nos debemos preocupar por el Critical Path CSS, tendremos un CSS mucho más óptimo.

Antes la forma en la que construíamos nuestras aplicaciones era con HTML-centric:

<button className=‘button button-red’>
Click here!
button>
const button = document.querySelector(‘button’)
button.addEventListener(‘click’, function () {
doSomething()
})
.button {
border-radius: 4px;
}

.button-red {
background: red;
color: #fff;
}

Luego pasamos a JavaScript-centric:

render () {
return (
<button
className='button button-red’
onClick={doSomething}
>
Click here!
button>
)
}
.button {
border-radius: 4px;
}

.button-red {
background: red;
color: #fff;
}

Honestamente creo que el css in js es una buena idea para aplicaciones muy pequeñas pero existen varias razones por las que esto no es recomendable cuando se esta trabajando a nivel mas profesional, chevere para los propositos del curso (que al final es de React y no de CSS) pero no recomendable para uso extensivo.

Styled-components ahi te voy

He trabajado un poco con Svelte, allí en un componente se escribe JS, CSS y HTML, todo en un solo documento, también es CSS-in-JS?

Styled-components, segun veo, es algo parecido a como implementa Vuejs los estilos y clases sobre el componente

h

Súper, una herramienta muy interesante y si css no cambia tanto, será mas fácil aprenderlo. Gracias!!