Feature-First Directories en React

Como dijo el profe Juan, hay varias formas de organizar los archivos en React. La documentación de React (legacy) muestra dos de las formas más populares de organizar archivos: Ordenar por funcionalidad/rutas u Ordenar por tipo de archivo.

Peroooooooo, antes de elegir qué forma de organizar utilizaran, tomen en cuenta el tamaño del proyecto y si van a trabajar en equipo.

Pueden leer más en la documentacion de React: https://legacy.reactjs.org/docs/faq-structure.html

Me gusto mucho esta clase, pero yo opte por una pequeña variación de la que usa prode Juan que a mi me gusto mas para separar un poco mas mis archivos. Cree una carpeta llamada Hooks para el customhook y otra Utils donde ocupo una función que elimina acentos y espacios para el buscador de items. 

## Filosofías de organización en React.js * En este caso, vamos a explorar cómo organizar carpetas y archivos en un proyecto de React.js. * Cada desarrollador puede tener su propia opinión sobre la mejor manera de hacerlo. * La estructura que seguiremos aquí es solo una de las muchas posibles. ## Organización por componentes con archivos index.js * Vamos a mover cada componente a su propia carpeta y renombrar los archivos principales a `index.js`. * También moveremos los archivos CSS relacionados a la misma carpeta que el componente correspondiente. * Esto ayuda a mantener todo lo relacionado con un componente en un solo lugar. ## Proceso de reorganización de componentes * **TodoCounter**: * Mover `todoCounter.js` a una carpeta llamada `todoCounter` y renombrarlo a `index.js`. * Mover `todoCounter.css` a la misma carpeta. * **TodoSearch**: * Mover `todoSearch.js` a una carpeta llamada `todoSearch` y renombrarlo a `index.js`. * Mover `todoSearch.css` a la misma carpeta. * **TodoList**: * Mover `todoList.js` a una carpeta llamada `todoList` y renombrarlo a `index.js`. * Mover `todoList.css` a la misma carpeta. ## Consideraciones adicionales durante la reorganización * **Actualizar imports**: * Después de mover los archivos, actualizar los imports en los archivos que dependen de ellos. * Por ejemplo, desde el componente `app`, asegurarse de que los imports apunten a la nueva ubicación. * **Solucionar problemas de importación**: * Si se mueven archivos SVG o CSS, asegurar que los imports se actualicen correctamente. * En el caso de `todoItem`, mover `completeIcon` y `deleteIcon` a la misma carpeta y ajustar los imports. ## Ejemplo de mover un componente complejo * **TodoIcon**: * Crear una carpeta llamada `todoIcon` y mover `todoIcon.js` renombrándolo a `index.js`. * Mover `completeIcon` y `deleteIcon` dentro de la carpeta `todoIcon`. * Mover los archivos `complete.svg` y `delete.svg` dentro de la carpeta `todoIcon`. * Ajustar los imports en los componentes que dependen de `todoIcon`. ## Verificar la aplicación después de reorganizar * **Probar la aplicación**: * Asegurarse de que todos los componentes se cargan correctamente y no hay errores en la consola. * Solucionar cualquier problema de imports que surja debido a la reorganización. * **Mantener la aplicación funcional**: * Confirmar que la funcionalidad de la aplicación no se ve afectada por los cambios en la estructura de archivos. ## Conclusión * Organizar los archivos y carpetas mejora la claridad y la mantenibilidad del proyecto. * La estructura basada en componentes con archivos `index.js` es solo una de las muchas filosofías de organización. * Elegir una estructura que facilite la colaboración y el crecimiento del proyecto es crucial para la experiencia del desarrollador.

tengo un error y nose como solucionarloCompiled with problems:X ERROR \[eslint] src\App.js Line 21:27: 'useLocalStorage' is not defined no-undef Search for the keywords to learn more about each error.```js Compiled with problems:X ERROR [eslint] src\App.js Line 21:27: 'useLocalStorage' is not defined no-undef Search for the keywords to learn more about each error. ```

Organización algo simple pero que ayuda bastante a encontrar fácilmente el archivo que se esta buscando.

En una entrevista laboral para el puesto de React Native Developer me hicieron la pregunta de como estaban estructuradas las carpetas de los proyectos en lo que había trabajo y que beneficio le veía, así que recomiendo le den buena ojeada a este tema. Esta estructura personalmente me gusta mucho 


En mi opinion, nombrar los archivos index en la forma que lo está haciendo aquí, luego es dificil de leer para cuando haces busquedas y todos los archivos se llaman index, muchos elementos de UI le dan prioridad al nombre del archivo y no la ruta completa. se puede ver por ejemplo en las pestañas de la parte superior de Visual Studio Code, si todos se llaman index y el tamaño de la pestaña no es suficiente porque tenemos abiertas muchas, ahora tenemos que hacer hover en cada pestaña o ir clicando todas hasta encontrar la correcta. Recmiendo nombrar a los archivos de forma más especifica cómo la tenía antes, pero sí de acuerdo a separar por carpetas obviamente.

Después de que ordené todos los archivos y carpetas logré solucionar los errores de la app, sin embargo se me desaparecieron todos los ítemes de la lista de to-dos por defecto. En localStorage existe el item 'TODOS\_V1' y tiene los to-dos stringifeados, pero la lista inicial me aparece vacía... acá el código que creo que es relevante: ```js import React from "react"; // Custom hook - must start with prefix USE function useLocalStorage (itemName, initialValue) { // local storage persistency // get item from local storage const localStorageItem = localStorage.getItem('itemName'); // parsed to dos let parsedItem; // if nothing found, then create empty array in local storage AND parsed array if (!localStorageItem) { localStorage.setItem('itemName', JSON.stringify(initialValue)); parsedItem = initialValue; } else { // if found, parse from local storage parsedItem = JSON.parse(localStorageItem); } // Internal state for local storage items const [item, setItem] = React.useState(parsedItem); // Arrow function to save to dos in local storage and // APP state persistenly const saveItem = (newItem) => { localStorage.setItem('itemName', JSON.stringify(newItem)); setItem(newItem); }; // returns the item state and the function to save items to local storage and set item state return [item, saveItem]; } export { useLocalStorage }; ```import React from "react"; // *Custom hook - must start with prefix USE*function useLocalStorage (itemName, initialValue) { // *local storage persistency* // *get item from local storage* const localStorageItem = localStorage.getItem('itemName'); // *parsed to dos* let parsedItem; // *if nothing found, then create empty array in local storage AND parsed array* if (!localStorageItem) { localStorage.setItem('itemName', JSON.stringify(initialValue)); parsedItem = initialValue; } else { // *if found, parse from local storage* parsedItem = JSON.parse(localStorageItem); } // *Internal state for local storage items* const \[item, setItem] = React.useState(parsedItem); // *Arrow function to save to dos in local storage and* // *APP state persistenly* const saveItem = (newItem) => { localStorage.setItem('itemName', JSON.stringify(newItem)); setItem(newItem); }; // *returns the item state and the function to save items to local storage and set item state* return \[item, saveItem]; } export { useLocalStorage };

Qué buen profe 🥲

Hola Juan, tengo el siguiente error y no sé como solucionarlo: Compiled with problems:X ERROR in ./src/App/index.js 27:29-44 Can't import the named export 'useLocalStorage' (imported as 'useLocalStorage') from default-exporting module (only default export is available) ERROR in ./src/App/index.js 88:10-25 Can't import the named export 'useLocalStorage' (imported as 'useLocalStorage') from default-exporting module (only default export is available)

Hola Juan, tengo el siguiente error en mi codigo del proyecto y no logro solucionarlo![](<"C:\Users\alber\OneDrive\Pictures\Capturas de pantalla\Captura de pantalla 2023-11-09 224253.png">)

Mi sistema de organización es similar, pero prefiero organizar por secciones. mas que por funcionalidades, sigo un esquema básico similar al etiquetado de HTML o de componentes definido en app,js que es el principal. Me gusta llamar a este sistema de organización como "árbol de elementos y componentes". En este caso tengo 3 componentes padres que son: * Header * ToDoList * Footer Los cuales solo tienen hijos de primera generación, por lo tanto no es necesario crear subcarpetas en estos padres.  Ah y en la carpeta styles incluyo los css generales, los específicos de cada componente los diferencio porque comienzan en minusula y porque son .css obviamente. **Obviamente cada proyecto y programador es diferente y dependerá de esto como organice sus archivos**

Algo que yo hice para reducir la cantidad de archivos es colocar el css de archivos que tengan pocos estilos dentro del mismo js a tráves de styled components.  <https://styled-components.com>

A lo que sé, los hooks y los componentes, se deben poner globales para que estos sean más accesibles y catalogadas de una mejor manera, alguien sabe si lo que digo está bien o mal? Los hooks se agregan abajo de Src y si los componentes son globales se pueden, aunque también se puede poner global dentro del mismo.