Componente: Layout

Clase 7 de 29 • Curso de React Router 5 y Redux

Contenido del curso

Bienvenida al curso

1
Todo lo que aprenderás sobre React Router y Redux
01:30 min

¿Qué es React Router? y Aplicarlo en tus proyectos

¿Qué es Redux?

Aplicando Redux a nuestra aplicación

Cierre del curso

29
Cierre del Proyecto
00:39 min

Tomar examen

Comentarios

Cristian Florez

student•

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

Diego Camino Reinoso

student•

jajajajajja, suele pasar

Julio Villa

student•

me pasó lo mismo...tuve que copiar y pegar desde el componente de carousel jajajaja XD

Seba Cardoso

student•

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.

Bernardo Aguayo Ortega

student•

me gusta

Daniel Lopez

student•

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

Henry Caicedo Velasco

student•

totalmente deacuerdo.

César Palma

student•

Oscar es buen profe pero hay todo un equipo atras ademas de años de experiencia dictando cursos de programación en este formato, si se fijan estan sacando contenido del curso de react de richard kaufman pero organizandolo mejor de manera que el contenido te llegue justo cuando lo necesites y no te sobrecarguen de conocimientos un mejor equilibrio teoria/practica

Arantxa Giovanna Rosas Del Valle

student•

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

Iván Darío Sánchez Jiménez

student•

Para evitar que se renderizen componentes que no requieren constante actualización. Si te fijas el header y footer va a ser constante en todo el sitio asi que es como dejarlos fijos.

Miguel Angel Reyes Moreno

student•

¡Buena pregunta y buena respuesta! Gracias a ambos :)

Miguel Angel Reyes Moreno

student•

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).

Santiago Lopera Naranjo

student•

Esto se concidera una SPA, ¿cierto?

Jaime David Burbano Montoya

student•

Saul Felipe Ramirez

student•

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

Oscar Barajas Tavares

Team Platzi•

Puedes crearlos dentro de los containers, todo es cuestión de organizar la estructura de tu proyecto.

Eleonora Lester

student•

Tenes que rutear tu aplicación para que un path vaya a un layout y otro path vaya a otro.

<Router>  
        <Switch>  
          <Route exact path="/">  
            <Redirect to="/layout1" />  
          </Route>  
          <LoginLayoutRoute path="/layout1" component={LoginPage} />  
          <DashboardRoute path="/layout2" component={UserPage} />  
        </Switch>  
      </Router>

Si ingresas a / (solo /) te redirecciona a layout1 pero si ingresas a /layout2 te devuelve un layout distinto (mejor dicho una page distinta).

Me parece útil el concepto de paginas para cuando tenes cosas totalmente distintas entre sí.. LoginPage / UserPage

El ejemplo está tomado de acá https://www.c-sharpcorner.com/article/multiple-layout-in-react-with-react-router-v4/

Nelson Gonzalez Escalante

student•

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.

Raúl Camacho

student•

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>
);

Saul Felipe Ramirez

student•

¿Como usar multiples layouts? Ejm: una es la pagina al publico y la otra es el portal de administración del sitio y es totalmente diferente ya que es un dashboard.

Oscar Barajas Tavares

Team Platzi•

En el curso de Server Side Rendering aprenderás a realizar esta configuración dentro del proyecto, tendremos secciones privadas que solo estarán disponibles cuando conectemos con el backend.

Alexis Alberto Texis Auza

student•

Hola si te refieres a la maquetación,una solución seria manejar tu wraper de layout en cada container o pagina de forma independiente y no de forma global como se esta haciendo. Ejemplo :

//pagina Home
<Layout>
	<Componente1/>
	...
<Layout/>

//page admin
<LayoutAdmin>
	<Componente1/>
	...
<LayoutAdmin/>

Juan Daniel Martínez Navarro

student•

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.

Jose Anibal Garcia Giraldo

student•

Intentaré responderte como yo lo entendí, si te fijas pedimos la prop en medio de los dos componentes por que allí recibiremos otro componente, en el que caso que lo quisiéramos recibir como atributo lo haríamos como en el componente CarouselItem así:

Como vez aquí la prop que se pide se hace como atributo. Para que entiendas un poco mejor puedes ver ejemplo del componente Categories

Aquí pedimos un hijo que serán las cards y por otro lado el nombre que tendrá el title.

Espero haber resuelto tu duda.

Camilo Fernández

student•

Chaildren

Marco Luna

student•

Esto responde mi pregunta hecha en la clase anterior 😁

Tomas Goldenberg

student•

el header see me duplica!

Ernesto Briceño

student•

tienes que borrarlo del home

Kamerr Ezz

student•

ES HERMOSO !!

ANTHONY JEAMPIER RANGEL RODRIGUEZ

student•

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;

Christian Juan Tambo Coaquira

student•

Layout

Se encarga de manejar la persistencia del header y footer.

Jean Carlos Hallak

student•

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

Jimmy Buriticá Londoño

student•

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

Juan Esteban Orozco Botero

student•

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:

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;

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;

Stevenson Grajales

student•

Tarde hora de las RE horas viendo por qué no me funcionaba si lo tenía igual xD akjshdas Pos no me había dado cuenta que las rutas "cabecera" se cierran con la etiqueta por fuera de todas las etiquetas "hijas", horas para ver eso :'v

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;

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;

<Router>  
        <Switch>  
          <Route exact path="/">  
            <Redirect to="/layout1" />  
          </Route>  
          <LoginLayoutRoute path="/layout1" component={LoginPage} />  
          <DashboardRoute path="/layout2" component={UserPage} />  
        </Switch>  
      </Router>  

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>
);

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;

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;

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; 

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;

Componente: Layout

Bienvenida al curso

Todo lo que aprenderás sobre React Router y Redux

¿Qué es React Router? y Aplicarlo en tus proyectos

¿Qué es React Router y cómo instalarlo?

Crear nuestro archivo de Rutas

Container: Login

Container: Register

Container: 404 Not Found