https://github.com/jonnathan23/recetas-bebidas

Proyecto de react utilizando react router
https://github.com/jonnathan23/recetas-bebidas

apis react-router zustand

Last synced: 2 days ago
JSON representation

Proyecto de react utilizando react router

• Host: GitHub
• URL: https://github.com/jonnathan23/recetas-bebidas
• Owner: Jonnathan23
• Created: 2024-12-02T21:52:07.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-12-07T05:08:46.000Z (2 months ago)
• Last Synced: 2024-12-20T13:14:33.327Z (about 2 months ago)
• Topics: apis, react-router, zustand
• Language: TypeScript
• Homepage: https://receta-bebidas-js.netlify.app/
• Size: 186 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React + TypeScript + Vite

## Despligue

Cuando ejecutamos ``npm run build`` hace lo que la aplicación completa quede un solo archivo, esto al tener varias páginas es un problema porque la página de inicio se volvería pesada, y cargaría contenido innecesario. Para ello podemos divir nuestra página en pequeños archivos de javascript.

Aplicamos lazy a la página y colocamos un Suspense

```ts

import { lazy, Suspense } from 'react'

const IndexPage = lazy(() => import('./pages/IndexPage'))

const FavoritesPage = lazy(() => import('./pages/FavoritesPage'))

export default function AppRouter() {

    return (

        

            

                }>

                    

                            

                        

                    } index />

                    

                    

                            

                        

                    } />

                

            

        

    )

}

```

## Rutas

Para indicar las rutas que va a tener nuestro programa utilizamos route junto con path para indicar su ruta, e indicamos cuál es la página principal con IndexPage.

Para tener un contenedor el cual almacene los componentes que queramos reutilizar en las páginas como el header utilizamos un layout y de hijos colocamos las páginas

```ts

import { BrowserRouter, Routes, Route } from 'react-router-dom'

import IndexPage from './pages/IndexPage'

import Layout from './layouts/Layout'

import FavoritesPage from './pages/FavoritesPage'

export default function AppRouter() {

    return (

        

            

                }>

                    } index />

                    } />

                

            

        

    )

}

```

## Manejo de contenido en el Layout

Para utilizar indicar que parte del contenido será el que cambie utilizamos "Outlet", de esta forma el outle indicará el contenido de nuestras páginas

```ts

export default function Layout() {

    const { loadFromStorage } = useAppStore()

    useEffect(() => loadFromStorage(), [])

    return (

        <>

            

            

                

            

            

            

        >

    )

}

```