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!

A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Curso de React Avanzado

Curso de React Avanzado

Miguel √Āngel Dur√°n

Miguel √Āngel Dur√°n

Creando PhotoCard y usando react-icon

11/50
Recursos

En esta clase vamos a construir nuestro componente que tendr√° las im√°genes de nuestro timeline llamado .

Usaremos react-icons para darle una propuesta visual mucho más amigable a nuestro proyecto con íconos como Font Awesome, Ionicons, Material Design Icons y mucho más que podremos usar.

Aportes 48

Preguntas 6

Ordenar por:

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

Con esto‚Ķ en 10 clases, uno se cree capaz de hacer instagram s√≥lo‚Ķ ūüėĄ grande @midudev!! Enhorabuena!!

El curso en sí es excelente para lo que se refiere a lo avanzado de React. Sin embargo lo que más positivo le veo es cómo integra todas las tecnologías que vemos en otros cursos de una forma relativamente simple, como en el caso de Webpack y el linter, y así queda un proyecto que desde el inicio ya corre como debe ser.
Respecto a Now, es un plus muy bueno tener la app corriendo ya en internet: con tan solo hacer el npm now-build ya webpack lo prepara para el deploy con el comando now. Sencillamente genial.

import styled from 'styled-components'

export const ImgWrapper = styled.div`
    border-radius: 10px;
    display: block;
    height: 0;
    overflow: hidden;
    padding: 56.25% 0 0 0;
    position: relative;
    width: 100%;
`

export const Img = styled.img`
    box-shadow: 0 10px 14px rgba(0, 0, 0, .2);
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
`

export const Button = styled.button`
    display: flex; 
    align-items: center;
    padding-top: 8px;    
    & svg {
        margin-right: 4px;

    }
`

Así va quedando:

Este curso est√° genial porque est√° utilizando las nuevas y m√°s √ļtiles caracter√≠sticas de React.js

react-icons

import { MdFavoriteBorder } from "react-icons/md";

porr si a alguien le muestra el boton gris con borde negro le dejo este estilo de Button para solucionarlo

export const Button = styled.button`
  display: flex;
  align-items: center;
  padding-top: 8px;
  & svg {
    margin-right: 4px;
  }
  background-color: transparent;
  border: 0px;

Vas a 300 km/h jajajaja tengo que pausar a cada rato. Muy buena clase ūüėĄ

Tengo mucha experiencia en Angular, pero llegar y aprender React es como una vuelta de rosca ūü§™

Se le nota el dominio del profesor sobre diversos temas, no se tranca, ni se detiene, en poco tiempo abarca un caudal de c√≥digo, espero alg√ļn d√≠a adquirir esa habilidad

Buenas expectaticas con el curso ‚úĒ‚úĒ

Hasta ahora todo excelente, solo me gustaría agregar unas buenas prácticas para el css que no están demás…

El orden de las propiedades de css importan, así que para no tener conflictos y tener un código limpio, podemos seguir este orden:

  1. position
  2. Box Model
  3. Typography
  4. Visual
  5. Miscelanea

Ejemplo:

.button {
	position: relative;
  	display: block;
	width: 220px;
	height: 40px;
	text-transform: uppercase;
	background-color: #fff;
	@extend h1;
}

Me encanta el curso, hasta el momento he actualizado mi conocimiento en muchos aspectos nuevos de React

ūüėÄGenial el nombrado de archivos (1) para que la ventana principal de VSC muestre la carpeta a la que pertenece (2)

.

Tal como está el código del vídeo, el border-radius de ImgWrapper no se ve reflejado en la imagen como lo muestra el profe renderizado en el navegador.

Para que se vea la imagen con borde circular tuve que colocar el border-radius en el Img

export const ImgWrapper = styled.div`
  display: block;
  height: 0;
  overgflow: hidden;
  padding: 56.25% 0 0 0;
  position: relative;
  width: 100%;
`

export const Img = styled.img`
  border-radius: 10px;
  box-shadow: 0 10px 14px rgba(0, 0, 0, .2);
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
`

Que sencillo aprender React, este parece un curso para principiantes jajaja

Para usar el mismo icono en la nueva version de react-icons se importa de esta manera:

import { MdFavoriteBorder } from 'react-icons/md'

Con esta extension

Name: styled-components-snippets
Id: jonkwheeler.styled-components-snippets
Description: Styled-Components Snippets for VSCode
Version: 0.6.0
Publisher: Jon Wheeler
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=jonkwheeler.styled-components-snippets

Pueden tener maneras cortas de importar ‚Äústyled components‚ÄĚ

imsc	import styled from 'styled-components';
imscn	import styled from 'styled-components/native';
imscg	import { createGlobalStyle } from 'styled-components';
imsccss	import { css } from 'styled-components';
imsct	import { withTheme } from 'styled-components';

Mucho contenido interesante en esta clase !

Que tema de zsh esta usando?

Hola, en mi lista de categorías aparece una barra de scroll y no me gusta, como se hace para que no aparezca como tienes en tu caso que veo en el minuto 6.30?

Que buen dato que tiro con el & en CSS

PhotoCard/index.js

import React from 'react';

import { PhotoCard } from '../PhotoCard';

export const ListOfPhotoCards = () => {
    return ( 
        <ul>
            {
                [1,2,3,4].map(id => <PhotoCard key={id} />)
            }
        </ul>
    )
}

PhotoCard/styles.js

import styled from "styled-components";

export const ImgWrapper = styled.div` 
    border-radius: 10px;
    display: block;
    height: 0;
    overflow: hidden;
    padding: 56.25% 0 0 0;
    position: relative;
    width: 100%;
`

export const Img = styled.img`
    box-shadow: 0 10px 14px rgba(0, 0, 0, 0.2);
    height: 100%;
    object-fit: cover;  
    position: absolute;
    top: 0;
    width: 100%;
`

export const Button = styled.button ` 
    display: flex;
    align-items: center;
    padding-top: 8px;
    & svg {
        margin-right: 4px;
    }
`

ListOfPhotoCards

import React from 'react';

import { PhotoCard } from '../PhotoCard';

export const ListOfPhotoCards = () => {
    return ( 
        <ul>
            {
                [1,2,3,4].map(id => <PhotoCard key={id} />)
            }
        </ul>
    )
}

Lo hace ver f√°cil!! lo √ļnico que deben hacer es mantener actualizado el curso, de resto todo bien!

Asi vamos excelente explicacion por mas cursos asi…

Gran clase

Pues espero use Redux porque bueno, est√° muy facilito hasta el momento y ataque con una api real porque bueno, algo avanzado seria consumir con un api real y a la vez tenderizer con redux todo y hacer las integraciones avanzadas de entornos de usuarios.

Que curso tan bueno !!!

Pregunta: ¬ŅEs necesario que cada index se llame asi? Es que puede ser un dolor de cabeza tener tantos jaja

Un orden tan pulcro en éste curso, que lo difícil se ve fácil

Este curso esta genial! Estamos integrando todo lo de cursos anteriores y con tips incluidos.

Este curso es genial, Grande Midudev…!!!

muchas cosas nuevas que aprender ūüėÉ

Genial! Consumí la fotos del archivo db.json e hice un deploy con now.

DEPLOY APP

Muy bueno el poder usar sintaxis similar a sass con los styled components!

Alguien sabe cómo cambiar los iconos de las mascotas, los míos se ven muy diferentes a los de Miguel

woow esto va de maravilla

Excelente curso

Hola estimado Miguel Angel, ese valor colocado en el padding para conservar el aspect ratio de la imagen es un calculo en base a la dimensiones de la imagen?, o es un valor constante?. si es un calculo como se realiza?

Muchas gracias.

Para los que quieran agregar la funcionalidad dinámica de cambiar del ícono vacío al relleno cuando el usuario da click a este mismo…

import React, { useState } from 'react';
import {Button, ImgWrapper, Img} from './styles';
import {MdFavoriteBorder, MdFavorite} from 'react-icons/md';

const DEFAULT_IMG = 'https://images.unsplash.com/photo-1518001589401-1743b61d1def?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'

export const PhotoCard = ({id, likes = 0, src = DEFAULT_IMG }) => {

    const [like, setLike] = useState(false)

    return(
        <article>
            <a href={`/details/${id}`}>
                <ImgWrapper>
                    <Img src= {src} />
                </ImgWrapper>
            </a>
           {
               like === false ? (
                    <Button >
                        <MdFavoriteBorder onClick={() => setLike(true)} size= '25'/> {likes} likes!
                    </Button>
               ):(
                    <Button >
                        <MdFavorite size= '25' onClick={() => setLike(false)} /> {likes} likes!
                    </Button>
               )
           }
           
        </article>
    );
}


Grandiosa explicación. Muchas gracias

Todo va bien! excelente curso, es distinto a todas las clases de React que he llevado aquí en platzi pero está entendible!

Que buen uso de css

Esta genial el curso!

Solo 10 clases y ya siento que todo lo que he hecho en React hasta ahora no sirve para nada :’)

ūü§ďGran acierto el uso de la terminal en el editor para ver si la App se compil√≥ antes de ir al navegador

Hola, les dejo mi repositorio. Estoy haciendo la app de este curso en Next.js.

El primer branch ‚Äúphotocard‚ÄĚ es con el resultado al final de este video.

https://github.com/danyel117/petgram-platzi

pr√°ctica: