No tienes acceso a esta clase

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

Componente de Layout

6/31
Recursos

Aportes 26

Preguntas 5

Ordenar por:

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

Hola! Para los que les salga el error de:

鈥榗hildren鈥 is missing in props validation

Tienen que instalar PropTypes:

npm i prop-types --save 

Y luego hacer lo siguiente en el archivo index.jsx/Layout

import PropTypes from 'prop-types'

const Layout = ({ children }) => {
  Layout.propTypes = {
    children: PropTypes.node.isRequired,
  }
  
  return (
    <div className='flex flex-col items-center mt-20'>
      {children}
    </div>
  )
} 

Y listo, les dejar谩 de salir ese error 馃槂

Lo hice de esta manera agregando el Layout en el main.jsx de forma global, para no estar repitiendo el mismo componente en todos Pages

Hola!, yo lo hice de la siguiente forma, con la finalidad de solo importar una 煤nica vez layout dentro del App.jsx.

Lo hice de esta manera, importo solo una vez el 鈥淟ayout鈥 para todas las rutas. 鈥淥utlet鈥 es similar a un 鈥淪lot鈥 en otros frameworks de componentes o componentes en Vanilla JS,

Hola comunidad les comparto unos peque帽os apuntes en Notion, espero les sean de utilidad.
Link aqu铆:
https://bg99astro.notion.site/Componente-Layout-75402f8c1a4540c5b7893c3605f4f393

La versi贸n 4.3.2 de Vite sigue generando el archivo .eslintrc.cjs por defecto en proyectos nuevos. La raz贸n de esto es que, aunque Vite utiliza el formato de m贸dulo JavaScript nativo (ES modules) por defecto, la generaci贸n del archivo .eslintrc.cjs es realizada por la plantilla oficial de Vite, no por Vite en s铆 mismo.

La plantilla oficial de Vite incluye el archivo .eslintrc.cjs por defecto, junto con otras configuraciones b谩sicas para ESLint y otras herramientas, para facilitar la configuraci贸n inicial de un nuevo proyecto.

Si prefieres no utilizar el archivo .eslintrc.cjs, puedes eliminarlo manualmente despu茅s de crear tu proyecto con Vite, y luego configurar ESLint seg煤n tus necesidades utilizando otro archivo de configuraci贸n de ESLint, como .eslintrc.json o .eslintrc.js.

Hola, solucione el error 鈥榗hildren鈥 is missing in props validation
de esta manera:

En el fichero .eslintrc.cjs solo agrega esta line谩 de c贸digo en las reglas de esta manera:
鈥渞eact/prop-types鈥: 鈥渙ff鈥

rules: {
    "react/prop-types": "off"
  }

Deber铆a quedarte algo as铆:

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended'
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  settings: { react: { version: '18.2' } },
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    "react/prop-types": "off"
  },
}

Espero sea de ayuda! 馃榿馃憤

Hola! comparto el codigo de Layout para aquellos que decidieros typescrit

import React from 'react'

interface LayoutProps {
  children: React.ReactNode;
}

const Layout: React.FC<LayoutProps> = ({ children }) => {
  return (
    <div className='flex flex-col mt-20 items-center'>
      {children}
    </div>
  )
}

export default Layout

B谩sicamente la funci贸n del layout es conservar ciertos estilos que se van a repetir por lo que me parece m脿s f谩cil crear una componente clase en el archivo base de tailwind para que no sea necesario crea un componente e importarlo cada que se necesite.

@tailwind base;
@tailwind components;
@tailwind utilities;

.layoutBase {
    @apply flex flex-col mt-5 items-center;
}

Y luego se implementa as铆:

export const HomePage = () => {
  return (
    <div className='layoutBase'>
      HomePage
    </div>
  )
}

Para los que les marca error con children por el eslintrc solo agreguen esta configuracion a su archivo .eslintrc.cjs

module.exports = {
  // ... otras configuraciones ...

  rules: {
    // ... otras reglas ...

    // Agrega esta regla para omitir la validaci贸n de "children"
    'react/prop-types': [
      'error',
      {
        ignore: ['children'], // Lista de props que no se validar谩n
      },
    ],
  },
};

As铆 no tendran que validarlo en cada archivo que usen children y no tendran que exportar o instalar el prop-types

鈥榗hildren鈥 is missing in props validation este error se puede solucionar quitandolo del archivo .eslintrc.cjs en la parte de rules: 'react/prop-types':'off'

yo preferi hacer el wrapper a el componente AppRoutes me parece que es mas facil.

 const App = () => {
  return (
    <BrowserRouter>
      <Navbar />
      <Layout>
        <AppRoutes />
      </Layout>
    </BrowserRouter>
  )
}

y este es el resultado.

Para no estar repitiendo el Layout en cada pagina, lo que hice fue lo siguiente `function App() {` ` return (` ` <BrowserRouter>` ` <Navbar />` ` <Layout>` ` <AppRoutes />` ` </Layout>` ` </BrowserRouter>` ` );` `}`

Hola!. Cuando crean un componente nuevo no hace falta que escriban toda la arrow function鈥 si escriben sfc en visual code se les crea todo el componente de react con su export default!

Este tipo de errores deber铆an decir como solucionar en el curso, son cosas que te hacen perder tiempo
El problema que enfrentas con el error "children is missing in props validation" es debido a que no est谩s validando las propiedades que tu componente `Layout` recibe. Para solucionar este problema, puedes usar PropTypes, que es una biblioteca para documentar los tipos de propiedades que un componente espera recibir. En este caso, vamos a validar que el componente `Layout` reciba `children`. A continuaci贸n te muestro c贸mo puedes hacerlo: 1. Instala la biblioteca `prop-types` si a煤n no la tienes instalada: ```js npm install prop-types ``` 1. Importa `PropTypes` y define las validaciones de tus propiedades: ```js import PropTypes from 'prop-types'; const Layout = ({ children }) => { return
{children}
; }; Layout.propTypes = { children: PropTypes.node.isRequired, }; export { Layout }; ``` Aqu铆 estamos especificando que la propiedad `children` es de tipo `node` y es requerida (`isRequired`). Esto deber铆a resolver el error relacionado con la validaci贸n de las propiedades. Informacion tomada en chat gpt
```js import PropTypes from 'prop-types' const Layout = ({ children }) => { Layout.propTypes = { children: PropTypes.node.isRequired, } return (
{children}
) } export default Layout ```import PropTypes from 'prop-types' const Layout = ({ children }) => {聽 聽 Layout.propTypes = {聽 聽 聽 聽 children: PropTypes.node.isRequired,聽 聽 }聽 聽 return (聽 聽 聽 聽 \
聽 聽 聽 聽 聽 聽 {children}聽 聽 聽 聽 \
聽 聽 )} export default Layout
Para tener el nabab pegado arriba debes poner: `absolute top-0`
Lo he dejado as铆 visualmente hasta el momento: ![](https://static.platzi.com/media/user_upload/image-d7d15ea6-6898-49de-961a-779f3b467930.jpg)

Asi vamos

si estas usando typeScript la solucion a los errores que nos arroja el linter
en Layout

import { ReactNode } from 'react';

interface Props {
  children: ReactNode;
}

export const Layout: React.FC<Props> = ({children}) => {
  return (
    <div className='flex flex-col mt-20'>
      {children}
    </div>
  )
}

Asi Vamos

Me fue muy bien en esta clase, aprend铆 cosas nuevas y reforc茅 las que ya tenia馃槑

super divertido la creaci贸n de layout. Simplifica mucho el dise帽o general

Les dejo por ac谩 un peque帽o Shortcut para no pasar por cada elemento y poner el Componente de <Layout> solo en un lugar. Espero les sirva:

// >> src/pages/App/index.jsx

export function App() {

  return (
    <BrowserRouter>
      <Navbar/>
      {/* Este Layout aplica a todos los componentes de `AppRoutes` */}
      <Layout>
        <AppRoutes/>
      </Layout>
    </BrowserRouter>
  )
}
TS: ![](https://static.platzi.com/media/user_upload/carbon%20%283%29-50c69961-6b00-4134-962e-1b571dc97e39.jpg)