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!

No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Curso de React Avanzado

Curso de React Avanzado

Miguel √Āngel Dur√°n

Miguel √Āngel Dur√°n

Usando PropTypes para validar las props

46/50
Recursos

Las PropTypes ser√°n un validador del tipo de datos que estamos recibiendo como props en nuestros componentes, el cual nos permitir√° a que sea exclusivamente ese tipo de datos.

Aportes 15

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Seria bueno tener un curso de React con Typescript.

Como dato interesante, esto se hace mucho en React Native, además se hace idéntico

También existen los defaultProps, son utilizados para dar valores por defecto a las props que llegan al componente y no arriba en el export.

el export queda de la siguiente forma

export const PhotoCard = ({id, liked, likes, src})

y nuestros valores por defecto quedan así,

PhotoCard.defaultProps = {
  likes: 0,
  src: DEFAULT_IMAGE
}
{!aporte && (
 <Joke>
    Los que desarrollan en TypeScript son los nuevos veganos.
  </Joke>)
}

.

Tengo un tiempo utilizando TypeScript + React y es super facinante. vallan por ellos compa√Īeros‚Ķ

PhotoCard/index.js

import React from 'react';
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'

import { Article, ImgWrapper, Img} from './styles';
import { FavButton } from '../FavButton';

/* HOOKS */
import { useNearScreen } from '../../Hooks/useNearScreen';

/* CONTAINER */
import { ToggleLikeMutation } from '../../Container/ToggleLikeMutation';

const DEFAULT_IMAGE = 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'

export const PhotoCard = ({id, liked, likes=0, src = DEFAULT_IMAGE})=> {
    
    const [show, ref] = useNearScreen();

    return(
        <Article ref={ref}>
            {
                show &&
                <>
                    <Link to={`/detail/${id}`}>
                        <ImgWrapper>
                            <Img src={src} />
                        </ImgWrapper>
                    </Link>
                    <ToggleLikeMutation>
                    {
                        (toggleLike) => {
                        const handleFavClick = () => {
                            toggleLike({ variables: { input: { id } } })
                        }

                        return (
                                <FavButton
                                    liked={liked}
                                    likes={likes}
                                    onClick={handleFavClick}
                                />
                            )
                        }
                    }
                    </ToggleLikeMutation>
                </>
            }
        </Article>
    )
}

PhotoCard.propTypes = {
    id: PropTypes.string.isRequired,
    liked: PropTypes.bool.isRequired,
    src: PropTypes.string.isRequired,
    likes: function (props, propName, componentName) {
      const propValue = props[propName]
  
      if (propValue === undefined) {
        return new Error(`${propName} value must be defined`)
      }
      if (propValue < 0) {
        return new Error(`${propName} value must be greater than 0`)
      }
    }
  }

SubmitButton/index.js

import React from 'react'
import { Button } from './styles'
import PropTypes from 'prop-types'

export const SubmitButton = ({ children, onClick, disabled }) => {
  return (
    <Button onClick={onClick} disabled={disabled}>
      {children}
    </Button>
  )
}

SubmitButton.propTypes = {
  disabled: PropTypes.bool,
  onClick: PropTypes.func,
  children: PropTypes.node.isRequired
}

ListOfFavs/index.js

import React from 'react';
import PropTypes from 'prop-types';

import { Link, Container, Image } from './styles'

export const ListOfFavs = ({favs = []}) => {
    return ( 
        <>
            <Container>
                {favs.map(fav => (
                <Link to={`/detail/${fav.id}`} key={fav.id}>
                    <Image src={fav.src} alt='fav' />
                </Link>
                ))}
            </Container>
        </>
    )
}

ListOfFavs.propTypes = {
    favs: PropTypes.arrayOf(
        PropTypes.shape({
            id: PropTypes.string.isRequired,
            src: PropTypes.string.isRequired
        })

    )
}

FavButton/index.js

import React from 'react';
import PropTypes from 'prop-types';

import { Link, Container, Image } from './styles'

export const ListOfFavs = ({favs = []}) => {
    return ( 
        <>
            <Container>
                {favs.map(fav => (
                <Link to={`/detail/${fav.id}`} key={fav.id}>
                    <Image src={fav.src} alt='fav' />
                </Link>
                ))}
            </Container>
        </>
    )
}

ListOfFavs.propTypes = {
    favs: PropTypes.arrayOf(
        PropTypes.shape({
            id: PropTypes.string.isRequired,
            src: PropTypes.string.isRequired
        })

    )
}

Genial forma de saber si est√°n funcionando correctamente los props. ūüėÉ

Normalmente yo uso Eslint como Linter y con la StyleGuide de AirBnB y para cuando no defino los PropTypes me exige hacerlo, pero los defino y dice que no es necesario para esos Props que tengo, quedo re loco, jajaja alguien tiene idea y podria ayudarme o explicarme, gracias!

TypeScript definitivamente es mucho mejor que PropTypes, ya que por ejemplo, con PropTypes solo podemos decir si es una funcion o no. Sin embargo, con TS podemos decir si esa funcion recibe parametros (ademas de los tipos de datos de los parametros) y tambien podemos decir cual es el valor que regresa esa funcion.
De esa forma un dev nuevo en el proyecto puede saber de primera mano que esperar de esa funcion y que valores debe ingresar

Dejo mis apuntes de esta clase por si alguien mas le sirven, los pueden duplicar como un template

Por si le pasa a alguien mas.
A mi no me estaba mandando el warning del check de las props porque no estaba corriendo el proyecto en modo desarrollo
Solo toca agregar

--mode 'development'

en el script de dev y funciona

Las PropTypes ser√°n un validador del tipo de datos que estamos recibiendo como props en nuestros componentes, el cual nos permitir√° a que sea exclusivamente ese tipo de datos.

Asegurense de escribir PropTypes correctamente.

Si no les funciona el profiler deben incluir este alias en Webpack:

  resolve: {
    alias: {
      'react-dom$': 'react-dom/profiling',
      'scheduler/tracing': 'scheduler/tracing-profiling',
    }
  }

a