No tienes acceso a esta clase

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

Curso de React.js

Curso de React.js

Juan David Castro Gallego

Juan David Castro Gallego

Tips para naming y abstracci贸n de componentes React

17/34
Recursos

Aportes 42

Preguntas 7

Ordenar por:

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

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.

ylaqueso.js

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 genial poder separar el UI del App!!!

Esta es la organizacion de mis archivos:

Stateless vs Stateful:
Para tener una mejor organizaci贸n de nuestros archivos podemos usar la 鈥渞egla鈥 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)

Juan鈥檚 file organization is actually very good, but I think it is a better practice to store your components within a folder named 鈥渃omponents鈥. 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.

Profesor DC贸mics: Respeto tu opini贸n, pero reafirmo mi autoridad como tu profesor 馃槄

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

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.

Me confunde un poco el tener varios archivos del mismo nombre, as铆 que lo deje con su propio nombre.

En mac, el shortcut para seleccionar multiples lineas e invocar multiples cursores al final de cada una, es el siguiente: option+shift+click en cada linea

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 鈥渉tml鈥 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!!!

Esta fue la organizaci贸n que eleg铆. En los proyectos de React en los que me toc贸 trabajar se manejaban de una manera similar a esta. Adem谩s, en mi computadora personal tengo una extensi贸n para VS que le agrega estilos a las carpetas y me gusta como queda. ![](https://static.platzi.com/media/user_upload/image-69ec5702-7e9e-45f6-bfd0-08d977f58fa9.jpg)
Mi orden de carpetas: ![](https://static.platzi.com/media/user_upload/imagen-67ecc429-e0e5-43fc-a90b-8a894ecdab18.jpg)

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.

Mi organizacion ![](https://static.platzi.com/media/user_upload/image-fcfaca3b-23d2-4adf-a4f0-f3fba06c587e.jpg) ![](https://static.platzi.com/media/user_upload/image-02d33f93-cfaf-4066-b398-bdace439c3f4.jpg) ![](https://static.platzi.com/media/user_upload/image-2853e8fc-5158-45e8-9349-81e082503e1b.jpg) ![](https://static.platzi.com/media/user_upload/image-c18bf2ac-128a-4f35-a55e-77501ae7e610.jpg) ![](https://static.platzi.com/media/user_upload/image-a1c1d6a4-0268-486c-ae59-196e260ea007.jpg) Y el total ![](https://static.platzi.com/media/user_upload/image-9a0ec910-4f92-4c75-b1f0-84477ce7b5d6.jpg) ![](https://static.platzi.com/media/user_upload/image-f4de7f5f-898b-4aa4-ba4c-a493b0565639.jpg)
<https://reboot.studio/blog/es/estructuras-organizar-proyecto-react>
Creo que esta puede ser una buena organizaci贸n para proyectos peque帽os, sin embargo, a medida que este crece y se a帽aden nuevos componentes, esta estructura puede llegar a ser algo tediosa. Escoger una buena estructura para un proyecto puede ser complicado, ya que depende de su tama帽o, de sus funcionalidades, de sus requisitos, de su complejidad, etc. Aqu铆 les dejo un art铆culo muy interesante donde se mencionan distintas formas de organizaci贸n para React.js: <https://reboot.studio/blog/folder-structures-to-organize-react-project> Espero les guste!!
Yo decid铆 crear una carpeta Components para all铆 dejar todos los componentes ya que tengo una 煤nica hoja de estilos CSS y me parec铆a redundante crear una carpeta para cada componente. en fin este es el resultado (insertar铆a la imagen pero la plataforma no me dejo) F en el chat
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-02-05%20121350-f4da468c-c537-435a-9861-0473f7e928d2.jpg)
Buenas gente, les dejo mi forma de organizar las carpetas, a mi me hace feliz jaja. ![](https://static.platzi.com/media/user_upload/image-ace51417-4a80-4fab-933e-777e7e897002.jpg)
en mi caso uso bastante control P para ubicar rapidamente un archivo en vs code por lo que no me gusta mucho tener 11 index.js cuando uso ese atajo, por eso le deje sus nombres originales a los archivos
As铆 organic茅 mi proyecto. ![](https://static.platzi.com/media/user_upload/image-9fbf03de-fb77-4673-8787-66d6c3e86715.jpg)
![]()![]()A mi me gusta usar esta: ![](https://static.platzi.com/media/user_upload/Screenshot%202023-11-03%20at%207.02.30%E2%80%AFp.m.-a6047e31-b1c7-45d6-af6d-60bcea175bd5.jpg)
Yo soy mas de organizar el proyecto como por modulos y que dentro tenga sus componentes, paginas internas, custom hooks que solo se usen ahi y por fuera ese orden pero solo teniendo lo que usamos de manera general en toda la app. Siento que es mas facil como de revisar y ver

me gusto bastante la parte de: valoro tu incorrecta opini贸n 馃槃