Componente: Layout

pase cuatro horas buscando por que no no me pintaba y me doy cuenta que escribi Childrem con m es es children con n

Yo moví esta línea de Home a Layout

import '../assets/styles/App.scss'

Funciona de cualquier manera. Solo por lectura me parece mas práctico.

Lo que mas me llama la atension es la presicion con la que explica este profesor. Es bastante breve y conciso.

¿Por qué layout es un component y no un container?

Layout es un component y no un container para evitar que se renderizen componentes que no requieren constante actualización.
Como el header y footer van a ser constantes en todo el sitio, como dejarlos fijos.

Creamos Layout.jsx:

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

const Layout = ({ children }) => (
  <div className='App'>
    <Header />
    { children }
    <Footer />
  </div>
);

export default Layout;

Envolvemos el Switch en el Layout:

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from '../containers/Home';
import Login from '../containers/Login';
import Register from '../containers/Register';
import NotFound from '../containers/NotFound';
import Layout from '../components/Layout';

const App = () => (
  <BrowserRouter>
    <Layout>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/login' component={Login} />
        <Route exact path='/register' component={Register} />
        <Route component={NotFound} />
      </Switch>
    </Layout>
  </BrowserRouter>
);

export default App;

Y en Home.jsx eliminamos las etiquetas de Home y Footer, además de envolver todo en picoparéntesis (o React Fragments).

Esto se concidera una SPA, ¿cierto?

¿Como puedo crear multiples Layouts? por ejemplo, este para el sitio web y otro layout para el administrador del portal.

Para que la aplicación maneje el encabezado y pie de página cada vez que nos movemos dentro de una ruta que ya establecimos, debemos crear un nuevo componente de diseño que se encargará de la persistencia del encabezado y pie de página, y así cada vez que nos movamos dentro de una ruta hagamos el renderizado del componente que necesitamos.

Otra forma de hacer esto es simplemente en el Router (App.js donde están las rutas), hacer algo así, tiene el mismo funcionamiento.

const App = () => (
	<Router>
		<Header /> ------> Aquí
		<Switch>
			<Route exact path="/login" component={Login} />
			<Route exact path="/register" component={Register} />
			<Route exact path="/" component={Home} />
			<Route component={NotFound} />
		</Switch>
		<Footer /> ------> Aquí
	</Router>
);

Que buena clase, hasta el momento no me ha fallado nada. Sólamente quiero comprender como es que al poner la etiqueta Layout no le tuvimos que especificar el children como normalmente lo hacíamos cuando recibía parámetros el componente, algo así:

<Layout children={component}>
</Layout>

Estaría agradecido si me pudieran explicar como es que tan solo poniendo lo del Switch dentro de Layout esto funciona perfectamente.

Chaildren

Esto responde mi pregunta hecha en la clase anterior 😁

el header see me duplica!

ES HERMOSO !!

Les comparto mi codigo

components/Layout.jsx

import React from "react";
import Header from "../components/Header";
import Footer from "../components/Footer";
const Layout = ({ children }) => {
	return (
		<div className="App">
			<Header />
			{children}
			<Footer />
		</div>
	);
};

export default Layout;

routes/App.js

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Home from "../containers/Home";
import Login from "../containers/Login";
import Register from "../containers/Register";
import NotFound from "../containers/NotFound";
import Layout from "../components/Layout";
const App = () => {
	return (
		<BrowserRouter>
			<Layout>
				<Switch>
					<Route exact path="/" component={Home} />
					<Route exact path="/login" component={Login} />
					<Route exact path="/register" component={Register} />
					<Route component={NotFound} />
				</Switch>
			</Layout>
		</BrowserRouter>
	);
};

export default App;

Layout

Se encarga de manejar la persistencia del header y footer.

yo ya habia agregado el header y el footer a todo manual mente lol… bueno sirvió de practica

Persistencia: siempre tener el mismo Header y Footer en todas las páginas.

En la v6 de React Router ya no se coloca children, si no que en el component Layout.jsx se coloca un Outlet y en la route App.js se crea la etiqueta Route con Layout, pero no se cierra:

1. Layout.jsx

import React from 'react';
import Header from './Header';
import Footer from './Footer';
import {Outlet} from "react-router-dom";

import '../assets/styles/components/Register.scss'

const Layout = () => (
<div className='App'>
    <Header/>
    <Outlet />
    <Footer/>
</div>
)

export default Layout; 

1. App.js (route)

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "../containers/Home.jsx";
import Login from "../containers/Login.jsx";
import Register from "../containers/Register.jsx";
import NotFound from "../containers/NotFound.jsx";
import Layout from "../components/Layout.jsx";

const App = () => {
    return (
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<Layout/>} >
                        <Route index element={<Home/>} />
                        <Route path="/login" element={<Login/>} />
                        <Route path="/register" element={<Register/>}/>
                        <Route path="*" element={<NotFound/>}/>
                    </Route>
                </Routes>
            </BrowserRouter>
    )
};

export default App;

exclenet curso muy importante

import React from 'react' el pan de cada día 😅

![](

App.js

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from '../containers/Home';
import Login from '../containers/Login';
import Register from '../containers/Register';
import NotFound from '../containers/NotFound';
import Layout from '../components/Layout';

const App = () => (
  <BrowserRouter>
    <Layout>
      <Switch>

        <Route exact path='/' component={Home} />
        <Route exact path='/login' component={Login} />
        <Route exact path='/register' component={Register} />

        {/* Componente 404 */}
        <Route component={NotFound} />

      </Switch>
    </Layout>
  </BrowserRouter>
);

export default App;

Layout -> Se encargará controlar la persistencia del header y footer

simple y funcional, buena.

hola profe queria agradecerle por los cursos me gusta la forma en que explica un tema, nuevamente gracias

El componente:Layout El cual se va a encargar de manejar la persistencia de Header y Footer y así cada que nos movamos dentro de una ruta, va a hacer Render del componente que necesitamos.

que buena esa opcion de layout por hace ahorrar linea de código

Me gusta como está quedando la App…
Es una buena forma de aprender, creando un proyecto aplicable a la vida real

Buenísimo. Esto viendo siendo el equivalente al Site.Master.

Todo el curso de React y el inicio de este me habia estado preguntando como hariamos esto ! Muy interesante.

¿Por que el div del layout tiene la clase de “App”?

Muy bueno 😄

buenisimo

estupendooo

tremenda clase!

uso de Fragments

Práctica:

Layout: se encarga de manejar la persistencia del header y footer.

A alguien más le salió el error de “children is not defined”?. Lo hice de la siguiente forma y me funcionó.

import React from 'react'
import Header from './Header'
import Footer from './Footer'

const Layout = (props) => {
  return (
    <React.Fragment>
      <Header />
      {props.children}
      <Footer />
    </React.Fragment>
  )
}

export default Layout

NO sería mejor hacer diferentes tipos de layouts¿?

Para que nuestra aplicacion maneje el Header y el Fouter neceistamos crear un componente que maneje la persistencia de estos y asi cada que nos movamos de una ruta, solo hacer render del componente que necesitamos.

Crearemos el componente de nombre Layout de tipo presencial. Donde importaremos estos elementos que seran persistentes y en nuestro componente dentro de un Div pondremos estos elementos y dentro pondremos un Children que seran los elementos que estemos cambiando que no seran persistentes

Donde Layout nos quedaria algo asi:

import React from 'react'
import Footer from './Footer'
import Header from './Header'

const Layout = ({children}) => (
    <div className="App">
        <Header />
            {children}
        <Footer />
    </div>
);

export default Layout;

Y Nuestro Router asi:

const App = () => (
    <BrowserRouter>
    <Layout>
    <Switch >
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Registro} />
        <Route component={NoutFound} />
    </Switch>
    </Layout>
    </BrowserRouter>
);

tengo este problema?:

Si en esta parte del curso y a este tiempo (año 2021) ESLint les esta presentado problema en el “Editor de Código” les recomiendo modificarlo con las siguientes líneas para el hook:

Nota: recuerden instalarlo desde su terminal:

npm install eslint-plugin-react-hooks --save-dev

Si no les funciona, prueben con el siguiente comando:

npm install --save-dev eslint-plugin-react-hooks

// Tu configuración de ESLint
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
  }
}

Importante: SI desean profundizar en el tema y conocer el porque, los invito que visiten: https://es.reactjs.org/docs/hooks-rules.html