Introducción al curso avanzado de React
Qué necesitas para este curso y qué aprenderás sobre React.js
Proyecto y tecnologías que usaremos
Preparando el entorno de desarrollo
Clonando el repositorio e instalando Webpack
Instalación de React y Babel
Zeit es ahora Vercel
Linter, extensiones y deploy con Now
Creando la interfaz con styled-components
¿Qué es CSS-in-JS?
Creando nuestro primer componente: Category
Creando ListOfCategories y estilos globales
Usar información real de las categorías
Creando PhotoCard y usando react-icon
SVGR: de SVG a componente de ReactJS
Creando animaciones con keyframes
Hooks
¿Qué son los Hooks?
useEffect: limpiando eventos
useCategoriesData
Usando Intersection Observer
Uso de polyfill de Intersection Observer e imports dinámicos
Usando el localStorage para guardar los likes
Custom Hooks: useNearScreen y useLocalStorage
GraphQL y React Apollo
¿Qué es GraphQL y React Apollo? Inicializando React Apollo Client y primer HoC
Parámetros para un query con GraphQL
Usar render Props para recuperar una foto
Refactorizando y usando variables de loading y error
Usando las mutaciones con los likes
Reach Router
¿Qué es Reach Router? Creando la ruta Home
Usando Link para evitar recargar la página
Creando la página Detail
Agregando un NavBar a nuestra app
Estilando las páginas activas
Rutas protegidas
Gestión del usuario
Introducción a React.Context
Creación del componente UserForm; y Hook useInputValue
Estilando el formulario
Mutaciones para registro
Controlar estado de carga y error al registrar un usuario
Mutaciones para iniciar sesión
Persistiendo datos en Session Storage
Hacer like como usuario registrado
Mostrar favoritos y solucionar fetch policy
Cerrar sesión
Mejores prácticas, SEO y recomendaciones
Últimos retoques a las rutas de nuestra aplicación
React Helmet
Midiendo el performance de nuestra app y usando React.memo()
React.lazy() y componente Suspense
Usando PropTypes para validar las props
PWA: generando el manifest
PWA: soporte offline
Testing con Cypress
Conclusiones
¡Felicidades!
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 14
Preguntas 2
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:
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;
`
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!!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.