Tips para naming y abstracción de componentes React

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.

Lo he organizado de una manera parecida a como es en Angular.

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 😂

Organizacion del proyecto

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 😄