Header en todas las rutas

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.

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

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">[email protected]</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.

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 / …

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.

quedo bonito el “jider” ! @platzi academia de Ingles

@gndx, puedes pasar tu config de vscode por fa

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

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

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

Hola para mayor facilidad agregan el <Header><Header/> al archivo app.jsx. Así, se ahorran la molestia de tener que importar el nav en cada página que hagan. Yo lo dejé debajo de layout pero también lo pueden agregan incluso arriba de browserRouters.

<BrowserRouter>
    <Layout>
   		<Header></Header> 
    <Routes>

Hace falta un menú que dirija a distintas paginas del sitio web como son el Home y Login y otras paginas más.

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

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.

Podemos volver componentes:

• Botones.
• Contenedores .
• Formularios.

Tip al 31/03/2022

Unos clases mas adelante orscar meuve los archivos, recomiendo poner los enlaces de la siguiente manera:

(mi codigo se ve diferente porque lo estoy aplicando a un proyecto real, pero la estructura es la correcta)

import '../App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from '../containers/Layout';
import Header from '../components/Header';
import Inicio from '../pages/Inicio';
import NotFound from '../pages/NotFound';
import Registro from '../pages/Registro'
import IniciarSesion from '../pages/IniciarSesion';
import CorreoEnviado from '../pages/CorreoEnviado';
import RecuperarContrasena from '../pages/RecuperarContraseña';
import NuevaContraseña from '../pages/NuevaContraseña';
import Footer from '../components/Footer'


function App() {
  return (
    <BrowserRouter>      
        <Layout>
          <Header />
          <Routes>
            <Route path='/' element={<Inicio />} />
            <Route path='/Registro' element={<Registro />} />
            <Route path='/IniciarSesion' element={<IniciarSesion />} />
            <Route path='/CorreoEnviado' element={<CorreoEnviado />} />
            <Route path='/RecuperarContrasena' element={<RecuperarContrasena />} />
            <Route path='/NuevaContrasena' element={<NuevaContraseña />} />
            <Route path='*' element={<NotFound />} />
          </Routes>
        </Layout> 
        <Footer />  
    </BrowserRouter>
  );
}

export default App;

vamos a crear nuestro Header lo agregamos a componentes con el siguiente codigo
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">[email protected]</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;

luego agregamos el css que utilizara nuestro componente
Header.scss en la carpeta de Styles

  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 ultimo lo agregamos desntro de nuestro componente Home

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

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

export default Home;