No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de React Router 5 y Redux

Curso de React Router 5 y Redux

Oscar Barajas Tavares

Oscar Barajas Tavares

Componente: Layout

7/29
Recursos

Aportes 45

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥淎pp鈥?

Muy bueno 馃槃

buenisimo

estupendooo

tremenda clase!

uso de Fragments

Yo hab铆a resuelto el header y el footer de registro y login utilizando el React.Fragment y unos componentes que designe como HeaderAuth.jsx y FooterAuth.jsx. De ese modo evitaba el problema de los estilos, pero esta opci贸n tambi茅n est谩 buena.馃憣馃徎馃憣馃徎馃憣馃徎

Pr谩ctica:

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

A alguien m谩s le sali贸 el error de 鈥渃hildren 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 鈥淓ditor 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