Espero les guste mi organización
Creo que se llama por componentes
Es muy sencilla y como uso StyleComponents y MaterialUI no tengo muchos assets.
Introducción y requisitos
¿Qué necesitas para aprender React.js?
Maquetación con React.js
¿Qué es un componente?
Componentes de TODO Machine
¿Cómo se comunican los componentes? Props y atributos
Estilos CSS en React
Interacción con React.js
Eventos en React: onClick, onChange
¿Qué es el estado?
Contando TODOs
Buscando TODOs
Completando y eliminando TODOs
Librería de Iconos Personalizados
Iconos en React: librerías y SVG
Iconos con colores dinámicos
Herramientas avanzadas: escalabilidad, organización y persistencia
Local Storage con React.js
Custom Hooks
Organización de archivos y carpetas
Feature-First Directories en React
Tips para naming y abstracción de componentes React
¿Qué son los efectos en React?
Estados de carga y error
Actualizando estados desde useEffect
Reto: loading skeletons
¿Qué es React Context?
useContext
¿Qué son los React Portals?
Reto: estados para abrir y cerrar un modal
Maquetando formularios en React
Crear TODOs: React Context dentro de React Portals
Deploy
Despliegue de TODO Machine en GitHub Pages
Presentación de proyectos para tu portafolio
Próximos pasos: React #UnderTheHood
Diferencias entre versiones de React.js
¿Cuándo realmente necesitas React.js?
Bonus: creando proyectos en React desde cero
React con Create React App
React con Next.js
React con Vite
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Juan David Castro Gallego
Aportes 56
Preguntas 7
Espero les guste mi organización
Creo que se llama por componentes
Es muy sencilla y como uso StyleComponents y MaterialUI no tengo muchos assets.
En Windows el atajo de VSC que se utiliza en el video consta de lo siguiente:
.
Primero se copia los argumentos de AppUI:
completedTasks,
totalTasks,
searchValue,
setSearchValue,
searchedTasks,
completeTask,
deleteTask,
.
Luego, en el index,js donde retornamos <AppUI />, se puede pegar lo copiado de la siguiente manera:
return (
<AppUI
completedTasks,
totalTasks,
searchValue,
setSearchValue,
searchedTasks,
completeTask,
deleteTask,
/>
);
Lo que sigue es mantener oprimido la tecla alt
y con Click izquierdo vamos poniendo los cursores al final de cada coma ,
(los |
son meramente ilustrativos 😅).
return (
<AppUI
completedTasks,|
totalTasks,|
searchValue,|
setSearchValue,|
searchedTasks,|
completeTask,|
deleteTask,|
/>
);
.
Una vez que tengas posicionado los cursores, eliminas las comas.
.
posteriormente mantienes oprimido Shift
y Ctrl
junto a la tecla de flecha izquierda
. Con eso se tendrán seleccionadas esas partes y lo copiamos.
.
Finalmente, solo se aumenta el ={}
mediante los cursores y pegamos lo copiado dentro de las llaves. En mi caso queda de la siguiente manera:
return (
<AppUI
completedTasks={completedTasks}
totalTasks={totalTasks}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchedTasks={searchedTasks}
completeTask={completeTask}
deleteTask={deleteTask}
/>
);
Esta es la organizacion de mis archivos:
Esta genial poder separar el UI del App!!!
Stateless vs Stateful:
Para tener una mejor organización de nuestros archivos podemos usar la “regla” del stateless vs stateful que consisten en separar nuestros componentes entre los que tienen lógica por dentro y los que renderizan el contenido, haciendo así un poco más agradable a la vista nuestra búsqueda y navegación entre componentes y su contenido.
Esto no es una regla, es más bien una práctica que varios programadores siguen y puedes o no usarla según que tan útil la sientas en tu proyecto y que tan cómoda te parezca.
Mi pequeño aporte:
- Componentes Statefull vs. Componentes Stateless:
Statefull: Componentes que se enfocan en el manejo de estados y la logica de la app (delete, complete, save)
Stateless: Componentes que se encargan de la interfaz (AppUI)
Profesor DCómics: Respeto tu opinión, pero reafirmo mi autoridad como tu profesor 😅
Juan’s file organization is actually very good, but I think it is a better practice to store your components within a folder named “components”. Also there might not be much need of using a separate folder to store each component individually, because if there are a lot ot them, this can be visually a little bit overwhelming. This practice is good if there are some specific components with more information inside them, like for example, if we have a TaskList.jsx component, chances are there will be a TaskItem.jsx nested, and also we can store custom css stylesheet just for that component. In those cases I do see the need of using separate folders for each component but overall it can turn bothersome to the sight
Yo encantado con esta organización, me parece super eficiente y el Vs Code se encarga de hacerlo todo intuitivo. Estaría bueno un comando como para crear los componentes con su index y el css de una vez.
Stateless vs Stateful
En App hay que abstraer la UI en un nuevo componente al cual llamaremos con todas las props que necesitemos desde el componente App general.
Lei que cuando la aplicacion crece tambien es util tener una carpeta componentes para los componentes globales que se reutilizan a traves de la aplicacion y otra llamada views o pages no recuerdo, para las diferentes vistas de la pagina como hompeage, login, etcetera.
Si crece mucho mas decia que se puede organizar por features
Me confunde un poco el tener varios archivos del mismo nombre, así que lo deje con su propio nombre.
Si llegaste hasta acá, vas por la mitad del curso. 😊 ¡No te rindas! 😎
A mí en lo particular, cuando tengo abierto varios archivos que se llaman index.js, a primera vista, me confunden, así sea que visual estudio, le coloca al lado la ruta de cada uno, pero eso me confunde, prefiero que cada archivo lleve su propio nombre.
Hasta ahora mi proyecto va asi un tanto ordenado agradeceria alguna sugerencia para para mejorar el orden de los archivos.
Like si te dan estrés los comentarios en las líneas de juan.
Me encantó la idea de poder separar la lógica del “html” jaja y me causa un poco de gracia como JDC cuida mucho sus términos para los que se ofenden con facilidad. jajaja
con mucho respeto mi organizacion fue igual a la tuya peroooo… no quize que los archivos .js se llamen index.js asi que los deje con el nombre del componente.js… lo demas igual a tu organizacion… perfect!!!
Buenas como van, mi forma de organizar el proyecto la muestro a continuacion:
uso algo similiar a atomic design
Comparto la idea de JuanDC
Así quedó la organización de mis archivos, seguí la recomendación de separar el UI del Js en la carpeta App
Aunque también valoro su incorrecta organización 😂
Hola amigos, esta es una estrucutra de un proyecto que hice hace un tiempo, como pueden ver aquí estan los archivos “.jsx” que es una nomenclatura de react, en la que se hacer saber que estamos trabajando HTML dentro de un archivo JavaScript. Pueden notar que tengo la carpeta assets que a su vez está dividida por dos carpetas más en las cuales divido por iconos que mayormente tienen las extenciones .svg e imagenes que tienen extenciones jpg, jpng y otras más
Así es como más o menos se vería un proyecto en la vida real, si quieren echar un vistazo a este proyecto, les dejo el link aquí debajo también
https://github.com/raycris/store.git
Súper, me gusta la idea propuest apor JuanDC
asi quedo mi codigo organizado
Una vez intente lo de poner el index pero termine bien confundido cuando hice mi proyecto jajaja!, así que opté por la que esta en la imagen. No voy a negar que se puede repetir en los imports.
Así tengo la mía, no sé como se llama, pero creo que es bastante organizada, en los componentes pongo un Index y un archivo con el nombre del componente, el Index me exporta lo del componente, por lo que la ruta no se cambia y no se ve todos con el mismo nombre de index.
me gusto bastante la parte de: valoro tu incorrecta opinión 😄
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?