No tienes acceso a esta clase

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

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y m谩s a precio especial.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

1 D铆as
22 Hrs
45 Min
6 Seg

Creando las rutas de TODO Machine

19/30
Recursos

Aportes 17

Preguntas 6

Ordenar por:

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

Sienndo creativos, asi quedo mi notFound

Como mi TODOs machine lo hice con la tem谩tica de Naruto, hice un simple not found component, solamente con una imagen y un t铆tulo. as铆 qued贸.

Yo soy revelde y no le hice caso a la junta Directiva y estoy trabajando en react 18 jejejejje muy bueno el reto

Esta es la estructura que yo uso. Me parece bastante c贸moda.

Yo siempre uso alias. Me facilita mucho el trabajo.

Siempre me a gustado mucho esta estructura, carpetas para hooks, componentes y paginas.

mi organizaci贸n:

Para los que quieran usar Alias para hacer imports m谩s limpios y evitar usar Paths extensos y relativos . Tienen que configurar su herramienta build tool.
.
En mi caso uso Vite.js entonces lo modifique de la siguiente manera

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@App': '/src/App',
      '@components': '/src/components',
      '@hooks': '/src/hooks',
      '@pages': '/src/pages',
      // Add more aliases as needed
    }
  }
})

Tambien hice un archivo en el Root del projecto llamado jsconfig.json para ayudarle a VSCode a reconocer estos aliases y poder seguir usando auto-imports e IntelliSense.

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@App/*": ["src/App/*"],
      "@components/*": ["src/components/*"],
      "@hooks/*": ["src/hooks/*"],
      "@pages/*": ["src/pages/*"],
      // Add more aliases as needed
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

.
Una vez hecho esto ya podemos actualizar nuestros imports.

//import sin path Aliases
import SomeComponent from '../../components/SomeComponent';

//import con path aliases
import SomeComponent from '@components/SomeComponent';

Te dan puntos por esto, verdad?

bueno algo sencillo decidi crear un componente y su respectivo css

import React from "react";
import "./notfound.css"; // Importa los estilos CSS

const NotFound = () => {
    return (
        <div className="container">
            <h1 className="heading">隆Oops, Te Perdiste!</h1> 
            <p>Esta p谩gina es tan escurridiza como un unicornio en patines.</p>
            <img
                className="image" 
                src="https://img.freepik.com/vector-gratis/lindo-unicornio-jugando-patinaje-sobre-ruedas-ilustracion_138676-3287.jpg?w=740&t=st=1691293684~exp=1691294284~hmac=b7bffe0c0e9c8be85358879314e1199cbaebdc0378cbaff6d8460804b88d8163"
                alt="Lost Unicorn"
            />
        </div>
    );
};

export {NotFound} ;

css

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: sans-serif;
}

.heading {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.image {
    max-width: 50%; 
    height: auto;
}

En mi estructura tengo una carpeta llamada 鈥淧ages鈥 y una llamada 鈥淐omponents鈥. Creo que tienen nombres bastantes descriptivos jajaja.
.
En mi caso, el componente App lo he introducido como cualquier otro componente dentro de la carpeta 鈥淐omponents鈥 y tengo una carpeta de 鈥淗ooks鈥 donde est谩n los hooks ya creados y si se necesitan nuevos hooks tambi茅n ir谩n ah铆

Como yo uso SASS tengo todos los estilos aparte

En mi caso suelo utilizar el NewPage tambi茅n en el edit, solo que controlo si la ruta tiene alg煤n id con el cual pueda buscar en la base de datos, en el caso de que exista el bot贸n pasa de new a update y se cargan los datos en los campos.

Voy con React@18 y Material UI

Les dejo el c贸digo de mi App. Yo utilizo vite + typescript.
El tema del base y basename son configuraciones necesarias al subir a GitHub Pages y funcione correctamente pues no se trabaja en la ruta raiz.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: '/todo_machine_ts/'
})

import { FC } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { Home } from './pages/Home'
import { NewTodo } from './pages/NewTodo'
import { EditTodo } from './pages/EditTodo'

const App: FC = () => {

  return (
    <BrowserRouter basename='todo_machine_ts'>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/new' element={<NewTodo />} />
        <Route path='/edit/:id' element={<EditTodo />} />
      </Routes>
    </BrowserRouter>
  )
}



export default App