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”

Para los que quieran saber un poco más sobre estructura de carpetas les dejo el siguiente enlace How To Structure React Projects From Beginner To Advanced

💚

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.
⭐⭐⭐

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.

Prefiero usar esta estructura:

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

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

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

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

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

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

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

 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'

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

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