Análisis de rutas y componentes en React

Clase 3 de 31 • Curso de React.js con Vite.js y TailwindCSS

Roxsy Velasquez

student•

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

Emmanuel Vivas

student•

Excelente aporte para ahorrar tiempo :D

Diego Fernando Pallares Ramirez

student•

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.

Lehder Harold Hernandez

student•

Esto se llama, falta de experiencia y faldero paciencia...

Sebastián Andrés Sanhueza Tapia

student•

Estoy totalmente de acuerdo contigo

Humberto Asca

student•

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

Josue Tapia Linarez

student•

Prefiero usar esta estructura:

Ariel Ezequiel Biazzo Genua

student•

Es cierto lo que dice Edgar.

Por otro lado, te sera mas fácil diferenciar los componentes uno de otros, pues no es lo mismo un componente el cual actua como enlace a una nueva ruta, que un componente que actua como botón, input, etc.

Son 2 clases de componentes diferentes, al final son lo mismo, pero diferenciarlos como lo hace la profesora es mucho mejor.

Por otro lado, al tener todo en carpetas es una tecnica mas efectiva a la hora de cachear errores y hacer testing!

Bryan Enrique Garay Benavidez

student•

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

Efrain Andrade Quintero

student•

Siempre me ayudas con tus apuntes en varios cursos. Nunca cambies porfa jeje

Fritz Guzmán Santiago

student•

muchas gracias, esta genial

Esteban Augusto Colmenares Blanco

student•

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

JOSE FABIAN BONILLA GUZMAN

student•

en mi caso usaba la tecnica que usaba juanDC que es crear un archivo y si le colocas ejemplo MyOrder/index.jsx crea ambos

Felipe Toro C

student•

La terminal es potente, aveces la olvidamos

Rubén Ernesto Aragón Gil

student•

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

Wil Garcia Mercado

student•

 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'

Oscar Rubio

student•

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

Luis Guillermo Fragoso

student•

Porque pone como Index, el nombre de todos los componentes?, simpre vi que cada componente va con su respectivo nombre; eso no genera conflictos despues?

Luis Antonio Vargas Avila

student•

Meramente es un estilo de ordenamiento de archivos. En donde se ordenan por componentes en lugar de por funcionalidad o por feature, por ello cada carpeta tendrá sus .jsx y sus css.

Si se mantiene el orden no debería de generar conflictos, genera conflictos si todos los index.jsx los tienes en la misma jerarquía o en la misma carpeta.

Juan David Rodriguez Triana

student•

Hola, que extensión de VSC usas para que salga el cuadro con el color al lado izquierdo de la clase? uwu

Bryan Jesus Bizcarra Molina

student•

yo uso "Tailwind CSS IntelliSense" creo que es la que mas se utiliza para Tailwind :)

Samuel Schulz

student•

Julián Alexander España Riobamba

student•

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

David Antonio Garcia Saaib

student•

Si esta un poco confuso, pero es algo que vas a ver a menudo. Que se llame index, hace que se llame por defecto al momento de ser importado.

Sebastian Rodriguez

student•

en el nombre de la pestaña del index.jsx que estes viendo te sale su ruta : ../App, ../Home etc etc, esto te puede ayudar a no confundirte

David Rangel

student•

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

Luis Salazar

student•

Hola a todos, luego de agregar al app. css en la carpeta de App, me sigue apareciendo el mismo error , no sé si alguien le ha pasado lo mismo. Agradezco colaboración al respecto, muchas gracias por la ayuda.!

Cristina Muñiz

student•

Supongo que llego tarde para responder a tu pregunta pero bueno jajaja,

La ruta si dejas el archivo como App.jsx sería en el main.jsx "./Pages/App/App"

Si le cambias el nombre del archivo App.jsx por index.jsx sería "./Pages/App" porque siempre tiende a buscar por defecto el archivo con nombre index

Edgar Oliveros

student•

Hola! Tengo una pregunta, la extension de jsx es igual que los componentes en react o hay algun cambio ?

David Antonio Garcia Saaib

student•

La extension jsx no hace ningun cambio, es solo para identificar de manera visual que es un componente de React.

En caso de que no sea un componente de react y la extension sea jsx, puede que si te de algun error.

Edgar Oliveros

student•

Aaaa muchas gracias !!!

Ivan Camilo Buitrago Buitrago

student•

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

Douglas William Zavala Ordoñez

student•

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

Edwin Gustavo Rozo Gómez

student•

Normalmente y siguiendo un patrón similar en la creación de componentes, creo la carpeta y con el mismo nombre el archivo del componente(no index,jsx) - Hay alguna intención de fondo?

Luis Alejandro Vesga Osorio

student•

el index.jsx es para que al importar solo llames la carpeta que contiene el archivo y asi ahorrar un poco de tiempo entonces si tienes un componente nav y dentro un index.jsx en el import pones import nav y el te lee automaticamente el index.jsx de ese nav

Jeffry Almonte dely

student•

tengo una inquiete de este curso. En el video de presentación Teff no presentó si va a hacer la comprobación de los componentes de My account y Sign out?