¡Estructura tus proyectos React como un Pro! Tips para lucir como un Senior
TRANSCRIPCIÓN COMPLETA
buenas fronten hoy te enseñaré Cómo
lográ llevar tus proyectos de Ría al
siguiente nivel si deseas que tus
proyectos en ría sean manteni bles sean
escalables y que apliquen las mejores
prácticas en el desarrollo Quédate con
nosotros hasta el final lo primero que
vamos a hacer es crear nuestro proyecto
en ria si quieres saber cómo crear un
proyecto en rí puedes Mirar este video
de acá luego que tenemos nuestro
proyecto creado vamos a levantar el
servidor para ver qué tenemos acá por
defecto tenemos el template oficial de
byte y vamos a empezar con nuestra
estructura lo primero que vamos a estar
viendo es una arquitectura modular qué
cosa es una arquitectura modular una
arquitectura modular no es más que un
enfoque de diseño en el cual el sistema
se divide en partes o módulos más
pequeños y autónomos que pueden
desarrollarse probarse y desplegarse y
mantenerse de manera independiente
porque eh es importante esta
arquitectura mdula bueno gracias a la
arquitectura modular nosotros vamos a
aprovechar las bondades que nos brinda
ria para crear componentes y dividir
nuestra aplicación en en múltiples
componentes dándole la responsabilidad a
cada módulo de que maneje su lo propia
lógica de negocio y su propio modelo de
dominio es decir si nosotros tenemos una
aplicación en la cual manejamos usuarios
manejamos eh roles eh manejamos dígase
productos cada uno de estos elementos
puede ser un módulo donde en cada módulo
Como por ejemplo de producto pudiéramos
estar teniendo varios submódulos como
por ejemplo categoría de productos antes
de empezar a crear nuestras estructuras
de módulos veremos la nomenclatura de
carpetas componentes tipos entre otros y
la estructura general de nuestra
aplicación el naming Convention que
vamos a utilizar para nuestras carpetas
puede variar mucho entre un proyecto y
otro también entre un equipo y otro yo
normalmente utilizo dos variantes la
primera variante es keb Case keb Case no
es más que eh utilizar las palabras en
lower
Case y separarlos por un
gu la otra nomenclatura que yo utilizo
normalmente es pasc Case en este
caso se separa cada cada palabra y se
utiliza la primera palabra en mayúscula
vamos a estar utilizando K Case para el
naming de nuestras carpetas para el caso
de ficheros de tipos de datos por
ejemplo vamos a decir que estamos
utilizando la scrip un Ty el Ty usuario
utilizaremos la convención pasc Case
donde
luces en el caso de
eh ficheros cs funciones útiles
imágenes nombre de imágenes etcétera
utilizaremos la nomenclatura kev
Case luego que tenemos vista esta
convención vamos a pasar a la estructura
general de nuestro
proyecto lo primero que vamos a tener en
nuestro proyecto de Real es una carpeta
que le vamos a llamar Core en esta
carpeta Core vamos a tener toda la todos
los elementos generales que va a ser
eh que van a ser compartidos en nuestra
aplicación desde la definición de los
temas hasta la creación de las rutas la
definición de los tipos globales eh
también vamos a tener eh estilos
globales vamos a tener componentes que
son globales
en esta carpeta tendremos esa definición
Entonces qué Vamos a tener lo primero
que vamos a tener en esta carpeta es una
carpeta
components en la cual vamos a tener
todos los componentes que ya la decía
que son compartidos a través de nuestra
aplicación por ejemplo voy yo voy a
crear un componente
uro y Dentro de este dentro de esta
carpeta siguiendo la nomenclatura que
hablamos vamos a crear un componente
puro
Okay perfecto ya tenemos nuestro
componente burron creado
ahora voy a seguir con el resto de las
carpetas que usualmente en un proyecto
ya sea un proyecto de una de un tamaño
grande o pudiera ser un pequeño un
pequeño proyecto yo utilizo normalmente
tenemos ya la carpeta que que imos
components además tenemos la carpeta
hooks donde va a ser una carpeta donde
vas a almacenar todos los hooks que son
compartidos por el resto de tus módulos
de la aplicación voy a tener también la
carpeta types donde voy a tener los
tipos que también son compartidos en el
resto de la aplicación voy a tener la
carpeta
Services donde básicamente vamos a tener
las llamadas a al backen que son
servicios eh globales de nuestra
aplicación
también tendremos por acá eh dentro de
otras cosas
eh pudiéramos estar teniendo teams para
todo el tema del manejo de los temas en
la aplicación ya sea que utilicemos una
librería o creemos nuestros propios
temas otra de las carpetas que vamos a
estar teniendo acá son las carpetas de
utils donde también tendremos nuestras
funciones utils que nos serán de ayuda
en nuestra aplicación
básicamente estos son los elementos que
tenemos en nuestra carpeta Core y son
muy parecidos a los elementos que
crearemos en nuestros módulos luego
visto vamos a analizar Qué debe tener
nuestros módulos y cuáles son las
condiciones que debe tener cualquier
módulo la estructura de nuestro módulo
Será muy similar a la del Core tendremos
lo siguiente lo primero que vamos a
hacer es crear una carpeta
moduls y dentro de esta carpeta modul
crearemos nuestros mod primero vamos
vamos a tener un módulo user Además
vamos a tener un módulo
prod Y por
último users en inglés en plural y luego
vamos a tener por acá
digamos Ok entonces en nuestra carpeta
users vamos a tener una estructura muy
similar
a lo que tenemos en todos los módulos
van a tener
van a tener
components van a tener
containers ahora hablamos Qué cosas son
containers van a tener
types van a tener
Services van a tener
hs van a tener otros
módulos Entonces qué tenemos bueno en
componentes tenemos los componentes que
son utilizados Dentro de este eh módulo
que está acá dentro de containers no
tendremos el punto de entrada a ese
módulo es decir el componente mediante
el cual tú expones ese módulo para que
sea utilizado en otro lugar También
tenemos hooks que son los hooks que van
a estar siendo utilizados dentro de ese
módulos tenemos otros módulos hijos por
ejemplo acá pudiéramos tener
Rolls digamos tenemos servicios donde
van a estar los servicios las llamadas a
la Api de baken Y tenemos los tipos
nuestros tipos de
tp esta es la estructura que tiene un mó
ahora muy importante y es un concepto
que forma parte de
eh un patrón de diseño que estableció
dan abramov acerca de los de los tipos
de compon d abramov que es el creador de
ria dice que eh existen dos tipos de
deben existir dos tipos de componentes
un tipo de componente es un tipo de
componente que se llama container y otro
tipo de componentes o es un componente
que se llama de presentación los
componentes containers son aquellos
componentes que su responsabilidad es
manejar toda la lógica de la aplicación
y del negocio ellos son los responsables
de hacer la llamada baken son los
responsables de c mutar los estados son
los responsables de el acceso a datos
mientras que Por otra parte tenemos los
componentes de tipo presentación los
componentes de tipo presentación no son
más que el clásico componente de r en el
cual tú tienes componentes y manejas la
lógica de esos propios componentes es
DESBLOQUEAR MÁS
Regístrate gratis para acceder a funciones premium
VISOR INTERACTIVO
Mira el video con subtítulos sincronizados, superposición ajustable y control total de la reproducción.
RESUMEN DE IA
Obtén un resumen instantáneo generado por IA del contenido del video, los puntos clave y las conclusiones.
TRADUCIR
Traduce la transcripción a más de 100 idiomas con un solo clic. Descarga en cualquier formato.
MAPA MENTAL
Visualiza la transcripción como un mapa mental interactivo. Comprende la estructura de un vistazo.
CHATEA CON LA TRANSCRIPCIÓN
Haz preguntas sobre el contenido del video. Obtén respuestas impulsadas por IA directamente desde la transcripción.
SACA MÁS PARTIDO A TUS TRANSCRIPCIONES
Regístrate gratis y desbloquea el visor interactivo, los resúmenes de IA, las traducciones, los mapas mentales y mucho más. No se requiere tarjeta de crédito.