No tienes acceso a esta clase

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

An谩lisis de rutas y componentes en React

3/31
Recursos

Aportes 17

Preguntas 5

Ordenar por:

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

o inicia sesi贸n.

En Visual Studio Code, puedes utilizar una extensi贸n de Reactjs code snippets para generar componentes de React utilizando la abreviatura 鈥渞fce鈥

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