Análisis de rutas y componentes en React

En Visual Studio Code, puedes utilizar una extensión de Reactjs code snippets para generar componentes de React utilizando la abreviatura “rfce”

Todos, absolutamente todos los cursos deberían tener en alguna parte una clase como esta, una representación de en donde estamos y que es lo que queremos hacer, así tambien nosotros como estudiantes entendemos hacia donde vamos.

Prof. Estefany,

Me gustó mucho la forma didáctica que mostró el web site con su flujo y la introducción a la estructura que se crea en el entorno de desarrollo.
⭐⭐⭐

Prefiero usar esta estructura:

Hola comunidad les comparto unos pequeños apuntes en Notion, espero les sean de utilidad.
Link aquí:

https://bg99astro.notion.site/Estructura-de-archivos-de-la-aplicaci-n-57b9a6c567c149eeb3b240253d4f5dad

Recordatorio Tambien pueden generar carpetas en la terminal para ser mas rapidos de la siguiente manera:
cd src
mkdir Pages
cd Pages
mkdir Home App MyAccount MyOrder MyOrders NotFound SignIn

Recuerden que cambiaron el nombre de App.jsx a index.jsx, tienen que cambiar el nombre a la ruta en main.jsx

 import Home  from '../Home/Index';
 import MyAccount from '../Account/Index';
 import MyOrder from '../MyOrder/Index';
 import MyOrders from '../MyOrders/Index';
 import SingIn from '../SingIn';
 import NotFound from '../NotFound';
 import './App.css'

Pueden utilizar la siguiente forma para que se mas facil la creacion de los componenentes

New File… y escriben el nombre del componente / index.jsx

EJ: MyOrder/index.jsx

 MyOrder/index.jsx

Me parece que el proyecto queda confuso si todos los archivos se llaman index.jsx, ni aunque estén en carpetas separadas

1. Análisis de rutas y componentes en React

Primero analizaremos las vistas, entenderemos las vistas padre o pages, y después se desglosa toda la aplicación, para después crear los componentes padres en nuestro editor de código.

Pair Programming para entender la estructura que utilizaremos en nuestro código:

a. Tenemos una página principal, que es la app donde vivirán las páginas adicionales con distintas páginas. (en la app viven las rutas)
b. va vivir my order, my account, etc (páginas).
c. en las páginas van a vivir nuestros componentes, como card, navbar, formulario, etc. - diferentes elementos que van a conformar a la aplicación.

import Home from '…/Home’
import MyAccount from '…/MyAccount’
import MyOrder from '…/MyOrder’
import MyOrders from '…/MyOrders’
import NotFound from '…/NotFound’
import SignIn from '…/SignIn’
import ‘./App.css’

function App() {


  return (
    <>
      <div className='bg-red-400'>
        <Home/>
        <MyAccount/>
        <MyOrder/>
        <MyOrders/>
        <NotFound/>
        <SignIn/>
      </div>
    </>
  )
}


export default App

Recuerden al igual mover a la carpeta App el archivo App.css o correjir su importacion

excelente la metodologia del analisis del proyecto antes de ponernos a codificar, porque asi tenemos una idea mas clara del proyecto! Felicidades! La felicito

Esta sería la estructura de carpetas que estaría siguiendo.

Si alguien usa los export nombreados -> export { Home }, debe llamarlo diferente en el import del main.jsx import { App }

import Home from '../Home'
import MyAccount from '../MyAccount'
import MyOrder from '../MyOrder'
import MyOrders from '../MyOrders'
import NotFound from '../NotFound'
import SignIn from '../SignIn'
import './App.css'

function App() {

  return (
    <div className="bg-green-200">
      <Home/>
        <MyAccount/>
        <MyOrder/>
        <MyOrders/>
        <NotFound/>
        <SignIn/>
    </div>
  )
}

export default App