Componente de Layout

Hola! Para los que les salga el error de:

‘children’ 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 “Layout” para todas las rutas. “Outlet” es similar a un “Slot” 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

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

Hola, solucione el error ‘children’ 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:
“react/prop-types”: “off”

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! 😁👍

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.

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

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.

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!

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

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