Header en todas las rutas

Clase 12 de 30 • Curso de React 17 con Webpack 5 y Sass

Tan Zuñiga

student•

Creo que elementos como botones o inputs deben ser componentes, para que los containers puedan reutilizarlos al máximo. Además de que así solo escribiremos sus estilos una vez.

Nicolás Chamorro Girón

student•

Eso es correcto

Luis Esteban Ruiz Gallego

student•

Viejo, muy bacano tu aporte, de hecho hay una implementación de react, que es muy buena y hace esto mucho más sencillo, y además de ayudar a crear documentación, se llama storybook.js.

Misael Valdez

student•

Ya sé que no es una clase de inglés, pero no es / jider / la pronunciación correcta de "Header" sino más bien / jeder / porque "Header" viene de "Head" que se pronuncia / jed / ...

Andrea Paola Sierra Mendoza

student•

Así es jejeje

Andrés Muñoz

student•

pequeño detalle a mi también me molesto

Braulio Rivas Abad

student•

Header para todas nuestras páginas

Primero, seleccionemos el html del proyecto anterior y construyamos un componente.

// Header.jsx
import React from 'react';
import '../styles/Header.scss'

const Header = () => {
    return (
        <nav>
            <img src="./icons/icon_menu.svg" alt="menu" className="menu" />
            <div className="navbar-left">
                <img src="./logos/logo_yard_sale.svg" alt="logo" className="logo" />
                <ul>
                    <li>
                        <a href="/">All</a>
                    </li>
                    <li>
                        <a href="/">Clothes</a>
                    </li>
                    <li>
                        <a href="/">Electronics</a>
                    </li>
                    <li>
                        <a href="/">Furnitures</a>
                    </li>
                    <li>
                        <a href="/">Toys</a>
                    </li>
                    <li>
                        <a href="/">Others</a>
                    </li>
                </ul>
            </div>
            <div className="navbar-right">
                <ul>
                    <li className="navbar-email">platzi@example.com</li>
                    <li className="navbar-shopping-cart">
                        <img src="./icons/icon_shopping_cart.svg" alt="shopping cart" />
                        <div>2</div>
                    </li>
                </ul>
            </div>
        </nav>
    );
}

export default Header;

Recordemos que debemos cambiar class del html por className, para evitar problemas.

Segundo, traigamos el css, y creamos el archivo scss.

// Header.scss
nav {
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid var(--very-light-pink);
}
.menu {
    display: none;
}
.logo {
    width: 100px;
}
.navbar-left ul,
.navbar-right ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    height: 60px;
}
.navbar-left {
    display: flex;
}
.navbar-left ul {
    margin-left: 12px;
}
.navbar-left ul li a,
.navbar-right ul li a {
    text-decoration: none;
    color: var(--very-light-pink);
    border: 1px solid var(--white);
    padding: 8px;
    border-radius: 8px;
}
.navbar-left ul li a:hover,
.navbar-right ul li a:hover {
    border: 1px solid var(--hospital-green);
    color: var(--hospital-green);
}
.navbar-email {
    color: var(--very-light-pink);
    font-size: var(--sm);
    margin-right: 12px;
}
.navbar-shopping-cart {
    position: relative;
}
.navbar-shopping-cart div {
    width: 16px;
    height: 16px;
    background-color: var(--hospital-green);
    border-radius: 50%;
    font-size: var(--sm);
    font-weight: bold;
    position: absolute;
    top: -6px;
    right: -3px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 640px) {
    .menu {
    display: block;
    }
    .navbar-left ul {
    display: none;
    }
    .navbar-email {
    display: none;
    }
}

Por último, incorporemos dicho header en el home del proyecto.

// Home.jsx
import React from 'react';
import Header from '../components/Header';

const Home = () => {
    return (
        <Header />
    );
}

export default Home;

Y listo, ya tenemos nuestro header en la página Home.

Reto: analizar todos los componentes, containers y páginas del proyecto para terminar toda la estructura final. Es importante que aprendamos a diferenciar cada uno, pues nuestro objetivo siempre será crear el código más reutlizable y fácil de mantener.

Max Andy Diaz Neyra

student•

Muchas gracias!! Ayuda mucho acelerar el aprendizaje

Jimer Samuel Espinoza

student•

muchisimas gracias por esos apuntes, ayudan mucho

Patrick Cairoli

student•

quedo bonito el "jider" ! @platzi academia de Ingles

Rigoberto Maldonado

student•

es la cura campeon! jajaja

Asly Nabil Lamas Corrales

student•

Usando crtl + f2 (chage all Ocurrences) también cambias todas las palabras al mismo tiempo.

David Muñoz Sáez

student•

Bastaba con Ctrl+H para usar el Reemplazar Todo tradicional...

German Cavani

student•

Si algunos tienen problema con los estilos de la página luego de esta clase no se preocupen. Más adelante se soluciona este problema. Algunas clases entran en conflicto con otras por tener el mismo nombre.

Ramon Pocón

student•

muchas gracias por el dato , estaba preocupado que me aparecían mal los estilos.

Reinaldo Mendoza

student•

El profe dice que el código debe ser entendible para los demás, pero, funciona para nosotros mismo, si pasa un mes sin que veas tu código luego va a dar lo mismo que lo halla escrito otra persona o tu, hazle un favor a tu yo del futuro

Ezequiel Maximiliano Silvestre

student•

Algunas personas sugerían tener el NavBar dentro del Layout para que se incorpore automáticamente en todas las páginas. El problema con esto es que puede mostrarse incluso en las que no deseamos. Para prevenir esto podemos hacer lo siguiente:

const App = () => {
    return (
        <BrowserRouter>
            <CleanLayout>
                <Routes>
                    <Route path='/login' element={<Login />} />
                    <Route path='/password-recovery' element={<PasswordRecovery />} />
                </Routes>
            </CleanLayout>
            <NavLayout>
                <Routes>
                    <Route path='/' element={<Home />} />
                    <Route path='*' element={<NotFound />} />
                </Routes>
            </NavLayout>
        </BrowserRouter>
    );
}

CleanLayout es el Layout tal cual nos mostró Oscar en las clases anteriores. NavLayout es lo mismo, pero este sí incorpora el NavBar, quedando así:

const NavLayout = ({children}) => {
    return (
        <div className='Layout'>
            <NavBar />
            {children}
        </div>
    );
}

De esta forma podemos seleccionar qué páginas deseamos que tengan la navegación y cuales no.

Juan Camilo Muñoz Bedoya

student•

super práctica la solución que propones, muchas gracias por el aporte!

Oscar Stevens Cuartas Bejarano

student•

recomiendo utilizar este enlace https://reactrouter.com/docs/en/v6/getting-started/tutorial definitivamente seguir este curso para las rutas ya no es viable, van a tener muchisimos errores, olviden la estructura organizacional de Oscar en este curso y hagan ese pequeño tutorial oficial, me siento tirando mi dinero a la basura con platzi

Lucas Aristizábal

student•

x2, por eso yo instalé las mismas versiones que el profesor porque sé que errores como esos pueden pasar

Darwin Salinas

student•

Yo lo que hice en mi caso fue hacer un proyecto con la versión mas reciente de React usando:

npx create-react-app react-shop

Y luego instalé la versión mas reciente de React Router, seguí la guía e hice las implementaciones según la documentación.

Si te quieres ahorrar el dolor de los errores, es mejor seguir el curso al pie de la letra; usando las mismas versiones que usa el profesor.

Juan Carlos Valencia López

student•

@gndx, puedes pasar tu config de vscode por fa

Santiago Lopera Naranjo

student•

De lo que sé puedo decirte que: La fuente que usa se llama Fira Code. Creo que el color del VSCode es synthwave y la terminal es windows terminal usando zsh

Romina Ingallina P

student•

si te sirve aqui explica cada una de sus extensiones

fidel agustin fuentes

student•

gente linda a ninguno se le desarma los estilos cuando lo llevan a react? saben que puede estar ocacionando esto?

Carolina Hernández Viveros

student•

Hola, a mi tambien me paso lo mismo y aun no entiendo porque... =/

Fernando Cordero

student•

Tienen algun formater instalado en el vscode?

German Cavani

student•

Por alguna razón cuando le doy format document con prettier, a los elementos html que tienen mas de un atributo me los pone en varias filas y el “/>” de cierre me lo pone en la siguiente línea. Alguién sabe como configurar esto?

Leda Michelle Huerta Recinas

student•

Es que es la forma correcta de leerlo. Es una buena práctica formatear el documento de ésta manera para que sea más legible.

Andrés Muñoz

student•

el "/>" el la siguiente linea es para que el código quede listo para solo con un enter poder agregar props

Reinaldo Mendoza

student•

Para formatear el código pueden usar PRETTIER y con un click ya arregla la indentation y otros detalles mas

Lucas Aristizábal

student•

poner ctrl+shift+i es el atajo para activar prettier

Edward Mejias Brito

student•

Hola. Cómo saber que debo ubicar en page, components o en containers? No me queda claro

Leda Michelle Huerta Recinas

student•

Quizá este artículo te ayude a comprenderlo mejor: React Clean Architecture

Julián Alexander España Riobamba

student•

El libro Los innovadores que está detrás, es bueno para saber un poco más sobre la historia de la tecnología 😉🚀

Mauricio Rojas Nova

student•

Podemos volver componentes:

Botones.
Contenedores .
Formularios.

Martha Liliana Dominguez Gonzalez

student•

No sería mejor agregar el Header al Layout dado que se repetirá en todas las pages?

Juan Hernández

student•

En principio no, porque el menu no debe aparecer en la Login page

Mariajosé Juanta

student•

Como funciona scss, tiene la misma sintaxis que css, estaba leyendo que es como sass pero con css, me imagino que al compilar el proyecto si están en archivos scss se comprimen los estilos, es correcto?

Joalin Pineda

student•

Hola! SCSS tiene una sintaxis muy similar a CSS, solo que le agrega "superpoderes", incluso algunos dicen que es CSS con asteroides :D, ya que te permite hacer funciones, útil por ejemplo cuando necesitar hacer un cálculo en función de un determinado valor, tienes variables y mixins que te ayudan mucho para que tu proceso de desarrollo sea más productivo. Te recomiendo darte una vuelta por el Curso de Preprocesadores de CSS donde aprendes los 3 preprocesadores más demandados que son SASS, LESS y Stylus.

Orlando Daniel Montes Antonio

student•

No comprendo muy bien lo de componentes, contenedores. Lo que he leido es que hay contenedores Smart Components (con logica) y Dumb Components (solo estructura).

Pero hasta este punto del curso no hemos usado un Smart Component.

Entonces los componentes tambien son contenedores? o los contenedores pueden ser dos tipos de componentes (smart-dumb).

Estoy seguro que es mas como un juego de palabras que algo taaan dificil de entender

¿Alguien me puede aclarar un poco más?

Juan Daniel Zuluaga Serna

student•

Tambien tengo esa misma duda de componentes y contenedores

Leda Michelle Huerta Recinas

student•

@Juan Daniel Zuluaga Serna Quizá este artículo te ayude a comprenderlo mejor: React Clean Architecture Respecto a los Dumb Components y Smart Components: Smart o Stateful: Tienen lógica y manejan estados o data. Dumb o Stateless: No tienen lógica, su función es meramente "pintar" algo en la pantalla. Ve este vídeo para que te quede más claro. (Puedes activar los subtítulos si no dominas el inglés aún) Respecto a los containers: En realidad tu puedes hacer que cualquier elemento (modal, container, input, button, nav, etc) sea un componente, tan solo con el hecho de crearlo en un archivo independiente, qué tanto hay que modularizar (crear estos componentes) depende de tu proyecto y de si vas a reutilizar ese componente en varias secciones de tu proyecto, lo que te permitirá que tu código sea más limpio y escalable. Por ejemplo, tienes ya tu prototipo te das cuenta de que usarás un container que tiene los mismos estilos para tus modales y para tus cards, fondo blanco, bordes redondeados y sombra, lo conveniente sería crear un componente que llamaremos Container el cuál tendrá esos estilos y recibira un child.

const Container = ({ children }) => {
  return <div className="container ">{children}</div>;
};

Al hacer esto puedes llamarlo en cualquier lugar de tu aplicación, por ejemplo, supongamos que en tuu page Home, tendrás varias cards, entonces creas un componente nuevo que se llamara Card. Card llamará a Container y dentro de Container puedes meter más componentes o simple jsx.

const Card = () => {
    return (
     <Container>
            	<Title/>
            	<Content/>
            	<button className='button'>Go</button>
     </Container>
    )
}

Supongamos que en otra page llamada Login y tendrás un form, el cual decides no será un componente, porque no lo utilizarás en ningún otro lado. Este, tendrá los mismo estilos de "fondo" que la card, así que reutilizas el componente Container.

const Login= () => {
    return (
    <Container>
      		<Title />
      		<input id="name" className="inputs" type="text" placeholder="Nombre" />
      		<input id="mail" className="inputs" type="mail" placeholder="Correo" />
      		<input
        		id="password"
        		className="inputs"
        		type="password"
        		placeholder="Contraseña"
      		/>
      		<button className="button">Log in</button>
    </Container>
    )
}

Espero que te ayude, saludos 😄🚀

Juan Murga

student•

Cual es la diferencia de poner un componente en la carpeta components y otra en containers o pages??

Daniel Schmidt

student•

Ninguna en cuanto al funcionamiento, podríamos tener todo junto en una misma carpeta, pero es un tipo de estructura que nos ayuda organizar nuestras aplicaciones. El próximo video es sobre la explicación del concepto Atomic Design y el porqué de esa estructura Saludos!

// Header.jsx
import React from 'react';
import '../styles/Header.scss'

const Header = () => {
    return (
        <nav>
            <img src="./icons/icon_menu.svg" alt="menu" className="menu" />
            <div className="navbar-left">
                <img src="./logos/logo_yard_sale.svg" alt="logo" className="logo" />
                <ul>
                    <li>
                        <a href="/">All</a>
                    </li>
                    <li>
                        <a href="/">Clothes</a>
                    </li>
                    <li>
                        <a href="/">Electronics</a>
                    </li>
                    <li>
                        <a href="/">Furnitures</a>
                    </li>
                    <li>
                        <a href="/">Toys</a>
                    </li>
                    <li>
                        <a href="/">Others</a>
                    </li>
                </ul>
            </div>
            <div className="navbar-right">
                <ul>
                    <li className="navbar-email">platzi@example.com</li>
                    <li className="navbar-shopping-cart">
                        <img src="./icons/icon_shopping_cart.svg" alt="shopping cart" />
                        <div>2</div>
                    </li>
                </ul>
            </div>
        </nav>
    );
}

export default Header;

// Header.scss
nav {
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid var(--very-light-pink);
}
.menu {
    display: none;
}
.logo {
    width: 100px;
}
.navbar-left ul,
.navbar-right ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    height: 60px;
}
.navbar-left {
    display: flex;
}
.navbar-left ul {
    margin-left: 12px;
}
.navbar-left ul li a,
.navbar-right ul li a {
    text-decoration: none;
    color: var(--very-light-pink);
    border: 1px solid var(--white);
    padding: 8px;
    border-radius: 8px;
}
.navbar-left ul li a:hover,
.navbar-right ul li a:hover {
    border: 1px solid var(--hospital-green);
    color: var(--hospital-green);
}
.navbar-email {
    color: var(--very-light-pink);
    font-size: var(--sm);
    margin-right: 12px;
}
.navbar-shopping-cart {
    position: relative;
}
.navbar-shopping-cart div {
    width: 16px;
    height: 16px;
    background-color: var(--hospital-green);
    border-radius: 50%;
    font-size: var(--sm);
    font-weight: bold;
    position: absolute;
    top: -6px;
    right: -3px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 640px) {
    .menu {
    display: block;
    }
    .navbar-left ul {
    display: none;
    }
    .navbar-email {
    display: none;
    }
}

const App = () => {
    return (
        <BrowserRouter>
            <CleanLayout>
                <Routes>
                    <Route path='/login' element={<Login />} />
                    <Route path='/password-recovery' element={<PasswordRecovery />} />
                </Routes>
            </CleanLayout>
            <NavLayout>
                <Routes>
                    <Route path='/' element={<Home />} />
                    <Route path='*' element={<NotFound />} />
                </Routes>
            </NavLayout>
        </BrowserRouter>
    );
}

const Login= () => {
    return (
    <Container>
      		<Title />
      		<input id="name" className="inputs" type="text" placeholder="Nombre" />
      		<input id="mail" className="inputs" type="mail" placeholder="Correo" />
      		<input
        		id="password"
        		className="inputs"
        		type="password"
        		placeholder="Contraseña"
      		/>
      		<button className="button">Log in</button>
    </Container>
    )
}

Header en todas las rutas

Introducción a React

¿Qué es React.js?

Conceptos fundamentales de React

Configurando el entorno de desarrollo para React

Análisis de dependencias en proyectos de React

Instalación de React y React DOM

Configuración de Webpack y Babel

Cambios en tiempo real con Webpack

React con CSS y Sass

Maquetación en React

Transformando HTML y CSS en componentes de React

Estilos en los componentes de React

Páginas, rutas y componentes

React Router DOM

Navegación entre rutas

Header en todas las rutas

¿Qué es Atomic Design? Conoce los beneficios

Solución al reto: componentes y rutas de React Shop

Tipos de componentes en React: stateful vs. stateless

Imágenes y alias en Webpack

Lógica con React Hooks

React.useState

Toggle del menú

useEffect y consumo de APIs

Custom Hooks para la tienda

useRef y formularios

React Context

Completando el carrito de compras

Orden de compra

Calculando el precio total

Eliminando productos del carrito

Deploy

Cómo comprar tu dominio y conexión con Cloudflare

Automatizando el despliegue con GitHub Actions

Próximos pasos

Retos de React.js (bug hunters)

Continúa con el Curso Práctico de Next.js