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

SVGR: de SVG a componente de ReactJS

12/50
Recursos

En esta clase usaremos maketext.io para crear nuestro logo y descargarlo en SVG. Posteriormente a esto utilizaremos SVGOMG para optimizar nuestro logo y tener una mejor versión para usarla en nuestro proyecto.

Luego para convertir nuestro logo svg en un componente utilizaremos SVGR.

Aportes 73

Preguntas 1

Ordenar por:

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

Practicando con styled components! Súper interesante! 🔝👌🏻

Definitivamente empezaré a usar CSS in JS y styled components en mis proyectos

Aqui trabajando con la UI

Así van mis avances.

Una forma util de usar SVG en react es importandolos como componentes cuando tenemos los assets .svg

Por ejemplo:
import { ReactComponent as DogIcon} from '../assets/dog.svg';

Seleccioné ese logo que se me hizo genial, y acorde a lo que vemos en las clases decidí darle unos espacios más a los elementos

Excelente Curso!!!

La de herramientas que acabo de descubrir… gracias Midu!

No se porque pero me gusta full este curso! complementa demasiado lo visto ya en el curso de react esencial.

Lo estoy haciendo asi pero me queda unas dudas como si este mismo proyecto puede ser usado de otra manera como una red solcial de plomeros.
![Petgram](

Una forma mas comun de usar los svg y para evitar la ultima web donde convierte el logo como componente de react, es guardar las imagenes svg generalemente dentro de la carpeta assets y luego simplemente importarlas dentro de nuestro proyecto, asi queda mas limpio el proyecto. Aqui el paso a paso…

Quise usar un gradiente en el border pero no se como. Apreciaría si me pueden guiar un poco en ese aspecto

Se podia importar también como ReactComponent desde archivo directamente también.

import {ReactComponente as Logo} from './../assets/logo.svg';
Por ejemplo.

Super clase!

Muy buena combinación de herramientas para crear y optimizar los svg del logo.

test-petgram

https://petgram-5p73l7xmh.now.sh/

les comparto mi page esto esta que mola !! jaja

Petygram:

Excelente!

definitivamente usare mas css in jsx, su estetica se ve impecable

Buen curso !

Excelente curso. Demo

Excelente curso !! así va mi avance 😁

Me gusto ese tipo de logo, los colores y los puntos que tiene de fondo

Logo/styles.js

import styled from "styled-components";

export const Svg = styled.svg ` 
    width: 220px;
    margin-top: -30px;
    margin-left: -10px;
`

App.js

import React from "react";

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

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

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

Me gusta la versatilidad con la que el profe usa toda una variedad de recursos 😄

💚

Genial

Mi lista de enlaces destacados se ha alimentado enormemente con esta clase

Petgram the next best Social Media 😄
)

![](

Hola, este es mi resultado:

Es mi primer proyecto con styled components y no lo conocia pero me agrada

Gracias por los recursos para crear SVG’s, esto agiliza mucho el trabajo en demos 😃

Excelente curso!, ahi va el mío 😄

Así va quedando XD

Maravilloso :3

¡Hola!
Les comparto una captura de mi avance. 😃

Excelente curso, he aprendido un montón y no va ni la mitad del curso!!!

¡Este curso está genial!

Excelente convertir SVG a SVGR

Ahi va!

Hola asi la llevo muy buenas paginas para crear y trnaformar los svg…

Muchas gracias por las páginas, estan buenisimas 🚀…

-Así va el proyecto
https://petgram-umber.now.sh/

Aqui va el mio 🕺🏻🕺🏻

Mi avance:

Eh maso meno

Les comparto mi avance:

Así vamos:

Vamos con todo!!

Asi vamos:

loooo ameeeeeeeeee

Así va el mío, centre el título, le agregue las imágenes y likes guardados en el archivo db.json

Así va el mio

Por aqui dejo mi avance con React.js …!!

avanzando

Hola Devs:
-Aqui esta mi solucion, por cierto muy creativos el de todos ustedes:

Recuerden, #NuncaParesDeAprender 💚

<code>
import styled from 'styled-components'

export const Svg = styled.svg`
  width: 220px;
  margin-left: -10px;
  margin-top: -30px;
`

Excelente herramientas las que nos acaba de enseñar el profesor

Hola, les dejo el repositorio de mi proyecto en Next.js:

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

hasta el momento he hecho todos los códigos correctos, pero en vez de cargarme la pagina me carga esto:

Alguien puede ayudarme… Gracias!!!