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 ListOfCategories y estilos globales

9/50
Recursos
Transcripción

Para crear nuestros estilos globales con styled-components haremos lo siguiente:

// src/GlobalStyles.js

import { createGlobalStyle } from 'styled-components'

export const GlobalStyle = createGlobalStyle`
        html {
                box-sizing: border-box;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        
        *, *::before, *::after {
                box-sizing: inherit;
        }
        
        ul, li, h1, h2, h3, p, button {
                margin: 0;
        }

        ul {
                list-style: none;
        }

        button {
                background: transparent;
                border: 0;
                outline: 0;
        }

        body {
                background: #fefefe;
                height: 100vh;
                margin: 0 auto;
                max-width: 500px;
                overscroll-behavior: none;
                width: 100%;
        }

        #app {
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
                overflow-x: hidden;
                min-height: 100vh;
                padding-bottom: 10px;
        }

Aportes 23

Preguntas 2

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Si quieren ocultar el scroll pero mantener la funcionalidad pueden usar.

const List = styled.ul`
  display: flex;
  overflow: scroll;
  width: 100%;
  &::-webkit-scrollbar {
    display: none;
  }
`

Les paso los estilos

html {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

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

  ul, li, h1, h2, h3, p, button {
    margin: 0;
    padding: 0;
  }

  ul {
    list-style: none;
  }

  button: {
    background: transparent;
    border: 0;
    outline: 0;
  }

  body {
    background: #fefefe;
    height: 100vh;
    margin: 0 auto;
    max-width: 500px;
    overscroll-behavior: none;
    width: 100%;
  }

  #app {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    overflow-x: hidden;
    min-height: 100vh;
    padding-bottom: 10px;
  }```

Para no agregar un div innecesario en nuestro App.js podemos usar React Fragments, que react ‚Äėlee‚Äô como elementos, pero no son renderizados en nuestro DOM, quedar√≠a de esta manera:

import React from 'react';

import { GlobalStyles } from './GlobalStyles';
import CategoriesList from './components/CategoriesList';

const App = () => (
  <>
    <GlobalStyles />
    <CategoriesList />
  </>
);

export default App;

React.Fragment es otra opci√≥n cuando se quiere exportar m√°s de un componente sin a√Īadir un elemento adicional al DOM.

Algo que no me gusta y que definitivamente no recomiendo por muchas razones es utilizar los mismos nombres de archivos una y otra y otra vez porque cuando te marca error muchas veces te dice: tu error est√° en index.js pero cu√°l de los 10 millones de index.js que creaste y tienes.

También así

// ...
<>
	<GlobalStyle />
	<ListOfCategories />
</>

Una mejor manera de envolver los componentes de GloblaStyles y ListOfCategories es usando React Fragment asi el componente de App devuelve solo eso dos componentes sin el div la sintaxis seria la siguiente

export const App = () => (
  <>
    <GlobalStyle />
    <ListOfCategories />
  </>
);

Si copian los estilos globales de la descripción del video, agregar el padding a la regla CSS

ul, li, h1, h2, h3, p, button {
	margin: 0; 
	padding: 0;
        }

M√°s adelante en el curso les puede ocurrir un problema de dise√Īo.

Nota: Los archivos adjuntos a esta clase estan correctos, no requieren esta actualización

Solo una peque√Īa correcci√≥n del minuto 3:55 donde los valores del padding corresponden es 0 a top y bottom y 8px a right y left.

.map(category)
El category que está después del método map Viene siendo el componente o viene siendo un identificador especial

Les recomiendo esta extencion
Auto Rename Tag
Es para que una vez renombres la etiqueta de apertura automaticamente renombras la etiqueta de cierre ūüėĄ

Gracias!! muy interesante ūüėÉ

A opinion personal, usar style-component es poco intuitivo, y mi razon es que si quiero leer luego mi componente como las etiquetas HTML (JSX) han cambiado tendria que ir a ver a que etiqueta se refiere en los estilos. Luego pense, no pasa nada modifico el nombre de la etiqueta estulizada para saber a que tag (h1, h2, ... p, etc) estoy asociando pero ... si cambio la etiqueta tendria que tambien cambiar el nombre. So ... no veo ninguna utilidad en comparacion a utilizar SASS con simplemente un nombre de clase. Valorenlo y dejen saber que piensan. Saludos

Esta es la documentación de la librería y muestra varios ejemplos de como usar createGlobalStyle entre otras cosas.

https://www.styled-components.com/docs/api

Si están usando prettier, aparte de instalar la extensión recomendada, pueden hacer de esta forma los estilos globales, para que les formatee el css. O al menos a mi no me estaba funcionando el formato con createGlobalStyle y así lo solucioné:

import styled from 'styled-components';

export const GlobalStyle = styled.createGlobalStyle`
  html {

ListOfCategories/index.js

import React from 'react';
import { Category } from '../Category';

import {List, Item} from './styles'

export const ListOfCategories = () => {
    return (
        <List>
            {
                [1,2,3,4].map(category => 
                    <Item key = {category}>
                        <Category />
                    </Item>
                )
            }
        </List>
    )
}

ListOfCategories/styles.js

import styled from 'styled-components';

export const List = styled.ul`
    display: flex;
    overflow: scroll;
    width: 100%;
    &::-webkit-scrollbar {
        display: none;
    }

  `

export const Item = styled.li` 
    padding: 0 8px;
    list-style: none;
`

GlobalStyles.js

import { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle` 
    html {
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    
    *, *::before, *::after {
            box-sizing: inherit;
    }
    
    ul, li, h1, h2, h3, p, button {
            margin: 0;
    }

    ul {
            list-style: none;
    }

    button {
            background: transparent;
            border: 0;
            outline: 0;
    }

    body {
            background: #fefefe;
            height: 100vh;
            margin: 0 auto;
            max-width: 500px; //mobile first
            overscroll-behavior: none;//evita que haya rebotes cuando usemos el scroll
            width: 100%;
    }

    #app {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
            overflow-x: hidden;
            min-height: 100vh;
            padding-bottom: 10px;
    }
`

App.js

import React from "react";

//styles
import { GlobalStyle } from "./GlobalStyles";

import { ListOfCategories } from './Components/ListOfCategories';



export const App = () => (
    <>
        <GlobalStyle />
        <ListOfCategories />
    </>
)

Genial

Si desean que cambiando el nombre de la etiqueta de apertura se modifique al mismo tiempo la de cierre (por ejemplo para pasar de ul a List), pueden usar esta extensión esta para vscode

alguien mas ha tenido problemas con los estilos globales en produccion? en desarrollo funcionan perfecto pero en produccion no cargan, de hecho, no me carga ningun estilo en realidad.

Como puedo hacer que mi prettier le de formato a los archivos de style?

Alguien sabe cómo hacer desaparecer las barras de scroll?

Si no quieren preocuparse cambiando las etiquetas de apertura y cierre instalen este plugin https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Asi, si cambian la etiqueta de apertura se cambia la de cierre automaticamente.

Hice un teléfono, para darle mi toque. Sí a alguien le interesa, este es el GlobalStyle.

import { createGlobalStyle } from 'styled-components'

export const GlobalStyle = createGlobalStyle`
    html {
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
        
    *, *::before, *::after {
        box-sizing: inherit;
    }
        
    ul, li, h1, h2, h3, p, button {
        margin: 0;
    }

    ul {
        list-style: none;
    }

    button {
        background: transparent;
        border: 0;
        outline: 0;
    }

    body {
        background: #fefefe;
        height: 100vh;
        margin: 0 auto;
        max-width: 500px;
        overscroll-behavior: none;
        width: 100%;
    }

    #app {
        overflow-x: hidden;
        height: 580px;
        padding-bottom: 10px;
        width: 330px;
        background-color: #fefefe;
        border-radius: 5px;
        margin: 0 auto;
    }

    #phone {
        overflow-x: hidden;
        width: 350px;
        border-radius: 30px;
        background-color: rgb(36, 36, 36);
        margin: 20px auto;
    }

    #camera {
        display: block;
        width: 60px;
        height: 8px;
        border-radius: 20px;
        margin-bottom: 25px;
        background-color: rgb(107, 107, 107);
        left: 42%;
        position: relative;
    }

    #button_down {
        width: 100%;
    }

    #btn_home {
        width: 70px;
        height: 25px;
        display: flex;
        border-radius: 40px;
    }
`

Dentro del index.html est√° de la siguiente manera.

  <div id="phone"><br>
    <div id="camera">
    </div>
    <div id='app'>
    </div>
    <div id="button_down">
      <div id="btn_home"></div>
    </div>
  </div>

intenté usar una imagen, pero no encontré la manera.