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

Aprende todo un fin de semana sin pagar una suscripci√≥n ūüĒ•

Aprende todo un fin de semana sin pagar una suscripci√≥n ūüĒ•

Regístrate

Comienza en:

2D
3H
19M
25S
Curso de React Avanzado

Curso de React Avanzado

Miguel √Āngel Dur√°n

Miguel √Āngel Dur√°n

Agregando un NavBar a nuestra app

29/50
Recursos

Aportes 14

Preguntas 2

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Estilos de Nav en NavBar

  align-items: center;
  background: #fcfcfc;
  border-top: 1px solid #e0e0e0;
  bottom: 0;
  display: flex;
  height: 50px;
  justify-content: space-around;
  left: 0;
  margin: 0 auto;
  max-width: 500px;
  position: fixed;
  right: 0;
  width: 100%;
  z-index: 1000;

Cree el componente Layout para los componentes que se miran en toda las p√°ginas de la app como buena pr√°ctica.

Layout.jsx

import React from 'react';

import Logo from '../Logo/index';
import GlobalStyles from '../../styles/GlobalStyles';
import NavBar from '../NavBar/NavBar';

// eslint-disable-next-line react/prop-types
const Layout = ({ children }) => (
  <>
    <GlobalStyles />
    <Logo />
    {children}
    <NavBar />
  </>
);

export default Layout;

Estilos de Link

export const Link = styled(LinkRouter)`
  align-items: center;
  color: #888;
  display: inline-flex;
  height: 100%;
  justify-content: center;
  text-decoration: none;
  width: 100%;
`

Para aumentar el tama√Īo de los iconos, solo le aumente el tama√Īo de fuente:

export const Nav = styled.nav`
    align-items: center;
    background: #fcfcfc;
    border-top: 1px solid #e0e0e0;
    bottom: 0;
    display: flex;
    height: 50px;
    justify-content: space-around;
    left: 0;
    margin: 0 auto;
    position: fixed;
    right: 0;
    width: 100%;
    z-index: 1000;
    font-size: 32px;

Que manera tan sencilla de hacer un navbar
Quedo super bello

Ese focus que se da al momento de presionar los botones en las vistas de Smartphone es posible quitarlos?, estéticamente no lucen bien

Cuando te topas con un Crack de React!

Hola, aquí pueden encontrar mi repositorio hasta ahora hecho en Nextjs:

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

Se puede llevar esta app una app nativa con React Native?

NavBar/index.js

import React from 'react';
import { Nav, Link } from './styles';
import { MdHome, MdFavoriteBorder, MdPersonOutline } from 'react-icons/md'

export const NavBar = () => {
    return ( 
        <Nav>
            <Link to='/'><MdHome/></Link>
            <Link to='/favs'><MdFavoriteBorder /></Link>
            <Link to='/user'><MdPersonOutline /></Link>
        </Nav>
    )
}

NavBar/styles.js

import styled from "styled-components";
import { Link as LinkRouter } from "react-router-dom";

export const Nav = styled.nav` 
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    background: #fcfcfc;
    border-top: 1px solid #e0e0e0;
    height: 50px;
    width: 100%;
    max-width: 500px;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1000;
    font-size: 32px;
`

export const Link = styled(LinkRouter)`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #888;
  height: 100%;
  width: 100%;
  text-decoration: none;
`

Hice lo mismo que el compa√Īero Manuel y separe el header y el nav en un componente que se aplica de manera que aparezca en todas las pantallas que hagamos.

Y así hacemos que se aplique en todas

Nunca pensé que era tan simple hacer un navbar, muchas gracias por esta gran clase

styles.js

import styled from "styled-components";
import { Link as LinkRouter } from "@reach/router";

export const Nav = styled.nav`
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fcfcfc;
  border-top: 1px solid #e0e0e0;
  bottom: 0;
  height: 50px;
  left: 0;
  margin: 0 auto;
  max-width: 500px;
  position: fixed;
  right: 0;
  width: 100%;
  z-index: 1000;
`;

export const Link = styled(LinkRouter)`
  align-items: center;
  color: #888;
  display: inline-flex;
  height: 100%;
  justify-content: center;
  text-decoration: none;
  width: 100%;
`;

Interesantisimoooo gracias!!