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

Creando nuestro primer componente: Category

8/50
Recursos
Transcripción

Vamos a construir nuestro primer componente el cual será y usaremos styled-components para hacer los estilos de nuestro proyecto.

Para que el código del styled-component esté mejor formateado en nuestro editor utilizaremos esta extensión vscode-styled-components.

Aportes 54

Preguntas 13

Ordenar por:

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

… la extensión de VSCode.

URL

const DEFAULT_IMAGE = https://i.imgur.com/dJa0Hpl.jpg

Una buena practica seria definir desde styled-components, los globalStyles, de esta manera podras definir los valores que mejor te convengan… aqui un ejemplo:

import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
html {
  box-sizing: border-box;
  font-size: 10px;
}

*, *:before, *:after {
  box-sizing: inherit
}

body {
  padding: 0; 
  margin: 0;
  font-size: 1.5rem;
  font-family: sans-serif;

}

h1, h2, h3, h4, h5, p {
  margin: 0;
}
a { 
  text-decoration: none;
  color: #393939
}`;
export default GlobalStyles;


Traaaaaalalata!!Traaaaaalalata!! Traaaaaalalata!!

ala madre! mi cabeza exploto desde ahora todo así jaja

por si alguien le tiene un typo les comparto el codigo
index.js

import React from 'react'
import { Anchor, Image } from './styles'

const DEFAULT_IMAGE = 'https://i.imgur.com/dJa0Hpl.jpg'

export const Category = ({ cover = DEFAULT_IMAGE, path, emoji = '?' }) => (
  <Anchor href={path}>
    <Image src={cover} />
    {emoji}
  </Anchor>
)

styles.js

import styled from 'styled-components'

export const Anchor = styled.a`
  display: flex;
  flex-direction: column;
  text-align: center;
  text-decoration: none;
  width: 75px;
`
export const Image = styled.img`
  border: 1px solid #ddd;
  box-shadow: 0px 10px 14px rgba(0, 0, 0, .2);
  border-radius: 50%;
  height: auto;
  overflow: hidden;
  object-fit: cover;
  height: 75px;
  width: 75px;
`

Recuerden que si estan trabajando con archivos jsx en vez de .js solamente.

En la configuracion de webpack dentro de rules, deberia quedar asi:

{
        test: /\.js|.jsx$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }

Esto de styled-components me ha volado la mente. Adios colisiones

Link de la Documentación de Styled-components
https://www.styled-components.com/docs/basics

Bueno asi llevo mi codigo realice unas modificaciones pero al final es lo mismo.

export const StyledCategory = styled.a`
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 75px;
    text-decoration: none;
    img {
        border: 1px solid #ddd;
        box-shadow: 0px 10px 14px rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        height: 75px;
        width: 75px;
        overflow: hidden;
        object-fit: cover;
    }
`;

importo el syled component asi

 <StyledCategory href={path}>
        <img src={cover} alt="Categoria" />
         {emoji}
  </StyledCategory>

styled-component me rompió mi estructura mental de entender css jajja
una cosa no entiendo.
para dar estilo a una ancla <a> se agrega el styled.a´…´ pero que pasa si tengo varias anclas dentro del componente y todos con estilos distintos, como discrimino uno de otro ? 🤔

Recuerden que para levantar el entorno de desarrollo de este proyecto lo hacen con el comando:

npm run dev
import styled from 'styled-components'

export const Anchor = styled.a`
    display: flex;
    flex-direction: column;
    flex-align: center;
    text-decoration: none;
    width: 75px;
`

export const Image = styled.img`
    border: 1px solid #ddd;
    box-shadow: 0px 10px 14px rgba(0,0,0,.2);
    border-radius: 50%;
    height: auto;
    overflow: hidden;
    object-fit: cover;
    height: 75px;
    width: 75px;

cuando crea el styled component de Image, dos veces escribe height, el de de 75px termina sobre escribiendo al auto, creo que es mejor eliminar si no se necesita

Para usar .JSX no fué suficiente adicionar en la sección rules para mi.

Adicioné resolve, quedaría así:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
    mode: 'development',
    output:{
        filename: 'app.bundle.js'
    },
    resolve: {
        extensions: ['.js', '.json', '.jsx'],
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: 'public/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/, 
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                                '@babel/preset-env',
                                '@babel/preset-react'
                        ]
                            }
                }
            }
        ]
    }
}

Que buena clase!! Pero si usaramos Link de Router como hacemos para estilarlo?

Les recomiendo a todos que si están usando Coc en vim usen la extensión .jsx para poder usar el autocompletado de esta herramienta y ser más productivos. Pero habría que modificar el webpack.confg.js, la línea del “test: /.js$/” hay que cambiarla. Yo al menos lo tengo así:

Aqui les dejo los styles

import styled from 'styled-components'

export const Anchor = styled.a`
  display: flex;
  flex-direction: column;
  text-align: center;
  text-decoration: none;
  width: 75px;
`
export const Image = styled.img`
  border: 1px solid #ddd;
  box-shadow: 0px 1px 14px rgba(0, 0, 0, .2);
  border-radius: 50%;
  height: auto;
  overflow: hidden;
  object-fit: cover;
  height: 75px;
  width: 75px;
`

Que paso acá, me termino explotando la cabeza!! Desde ahora los estilos siempre los haré con styled-components

tengo una pregunta, veo que en el Image esta este estilo

height: auto;
  overflow: hidden;
  object-fit: cover;
  height: 75px;
  width: 75px;

al final el height auto no es redundante y seria reemplazado por el de 75px ?

Creo que los beneficios de Styled Components son superados por los problemas que ocasiona así que prefiero quedarme con Sass, al final haces exactamente lo mismo pero es más rápido utilizar Sass porque le das toda la funcionalidad que te brinda Sass como funciones hechas, mixins y variables de configuración que sirven para todo el equipo como pueden ser colores, tamaños específicos, queries, etc.

tambien podemos escribir nuestro css de styled-components dentro de nuestro codigo y quedaria algo asi, sin necesidad de crear un nuevo archivo para el css ni importar nada

import React from "react";
import styled from "styled-components";

const DEFAULT_IMAGE = "https://i.imgur.com/dJa0Hpl.jpg";

export const Category = ({ cover = DEFAULT_IMAGE, path, emoji = "?" }) => (
  <Anchor href={path}>
    <Image src={cover} />
    {emoji}
  </Anchor>
);

const Anchor = styled.a`
  width: 76px;
  display: flex;
  text-align: center;
  flex-direction: column;
  text-decoration: none;
`;

const Image = styled.img`
  width: 76px;
  height: 76px;
  border: 1px solid #ddd;
  overflow: hidden;
  object-fit: cover;
  box-shadow: 0px 10px 14px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
`;

Recuerden que dentro de los styled components podemos usas una sintaxis muy similar a sass, permitiendo ahorrarnos componentes y agregar multiples estilos mediante anidacion.

Sin embargo hay que ser precavidos de no caer en una sobre anidacion

const Anchor = styled.a`
    display: flex;
    flex-direction: column;
    text-align: center;
    text-decoration: none;
    width: 75px;

    img{
        border: 1px solid gray;
        box-shadow: 0px 10px 14px rgba(0,0,0,0.2);
        border-radius: 50%;
        height: auto;
        overflow: hidden;
        object-fit: cover;
        height: 75px;
        width: 75px;
    }
`;

Category/index.js

import React from 'react';

import {Anchor, Image} from './styles';


const DEFAULT_IMAGE = "https://imgur.com/dJa0Hpl.jpg";

export const Category = ({
    cover = DEFAULT_IMAGE, path, emoji= "=D"
}) => (
    <Anchor href={path}>
        <Image src={cover} />
        {emoji}
    </Anchor>
)

Category/styles.js

import styled from "styled-components";


export const Anchor = styled.a`
    display: flex;
    flex-direction: column;
    text-align: center;
    text-decoration: none;
    width: 75px;
`

export const Image = styled.img `
    border: 1px solid #ddd;
    box-shadow: 0px 10px 14px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    height: auto;
    overflow: hidden;
    object-fit: cover;
    height: 75px;
    width: 75px;

`

npm run dev

Genial

comando para instalar styled

npm install styled-components

Me sigue saliendo el mismo error: alguien sabe porque?

Como aplicaría las medía querys en Style-componentes

Nice code 😄

alguien más con este error ?¿

ERROR in ./src/index.js 4:16
Module parse failed: Unexpected token (4:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import App from './App'
| 
> ReactDOM.render(<App />, document.getElementById('app'))

el contenido de mi index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('app'))

y por si acaso el contenido de mi App.js

import React from 'react'

export default function () {
  return (
    <div>
      <h1>Test</h1>
    </div>
  )
}

y por si acaso el webpack.config

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  output: {
    filename: 'app.bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['babel-plugin-styled-components']
          }
        }
      }
    ]
  }
}

pero no se borre el node_modules lance el npm i y nada no se que esta cargando mal el loader¿?

Bien!

Hola, tengo un error con webpack y nose como solucionarlo 😦

Porque al nombre del archivo del componente Category se le puso index.js y no Category.js/jsx ?
que hace la diferencia ? cual es la ganancia ?

¿Esto no afecta el rendimiento de la app? perdón si es una pregunta tonta, recién estoy aprendiendo.

En lo personal me gusta mas los module.css es muy similar a como se trabaja esto de los StylesComponent pero siento que mas fácil e intuitivo

Che alguien sabe porque cuando inicio el servidor en desarrollo siempre me manda un puerto distinto
Osea nunca es el mismo, alguna idea?

¿Como usariamos correctamente variables globales (Por ejemplo para guardar los colores) como se hacía en sass? Sería fatal que tengamos que cambiar el color de nuestra app y tengamos que ir componente a componente a componente a cambiarlo. 😁

genial esto de styled components

No se si se me esté escapando algo pero no puedo renderizar el App component como se hizo al principio de la clase, alguien sabe a que se debe? Tuve que hacerlo de la siguiente manera.

export const App = () => {
  return (
    <h1>Seguimos con el curso avanzado</h1>
  )
}
export const App = () => (
  <h1>Seguimos con el curso avanzado</h1>
)

Esto es pura magia

Qué extensión usa el profesor para que visual studio le diga hace cuánto tiempo ha modificado el código?

Wow brutal el Styled Component, me encantó

Hola, ¿Hay una forma diferente de exportar los estilos?
Es que es engorroso estar importando cada una de los componentes, entonces se me ocurrió poner algo como:

import import Styles from './style.js'; 

y después cuando lo quiera utilizar solo hacer <Styles.Container>, pero esto no funciona.
¿Alguien tiene una mejor idea ?
Saludos.

Alguien me puede ayudar, la consola me arroja un ERROR y no logro determinar donde esta, he revisado mi (index.js) y no le veo el problema, por aqui voy a dejar mis archivos…![]

Hmmm tal vez mi css esté mal pero en el min 8:10 está escribiendo la misma propiedad dos veces .-. [height]

Como dato…
A mi personalmente me gusta definir los components de la siguiente forma

components
category
Category.js

A mi personalmente me parece mas declarativo… que tener muchisimos index.js

Aprendi bastante, ahora me siento más fluido

Excelente! Me encanta Styled components

Al galope va el profesor.
EXCELENTE!!!

Para poder utilizar la extensión .jsx hay que agregar lo siguiente en el archivo de configuración de Webpack.

 module: {
      rules: [
        {
          test: /\.(js|jsx)$/,  ->Esta línea de código
          exclude: /node_modules/,
	 /* Code... */
          },
      ],
    },

Todo al paso y a la primera, excelente!!!

j

Prácticas:

Personalmente prefiero meter los styled components todo dentro del mismo archivo donde esta la funcion, para no tener que andar cambiando de un archivo a otro