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

Feature-First Directories en React

16/34
Recursos

Aportes 19

Preguntas 3

Ordenar por:

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

o inicia sesi贸n.

Un completemento para esta gran clase. Otras formas para organizar los proyectos nuestros proyectos en react:

Organizar proyectos en react

En ocasiones es muy 鈥渆ngorroso鈥 tener que actualizar los imports en toda la aplicaci贸n, hay editores de c贸digo que ayudan y hacen esos cambios en autom谩tico, no estoy seguro si VSCode tiene esa opci贸n, en mi caso utilizo ya desde hace tiempo WebStorm y lo hace casi en autom谩tico al hacer los movimientos, solo pregunta si lo quiero refactorizar y listo. (Es de paga pero si tienes forma de acreditar que estas estudiando, con un correo electr贸nico de alguna instituci贸n educativa que cuente con carreras afines te dan la licencia gratuita)
Evidentemente la forma m谩s sencilla ser铆a (creo yo) planificar la estructura de carpetas desde el comienzo, aunque es perfectamente entendible que al inicio de este curso no se haya realizado por fines educativos, aunque a veces en el d铆a a d铆a laboral hay ocasiones que tienes que ir moviendo las carpetas para mejorar la experiencia de desarrollo.

Feature First
En este enfoque cada componente de nuestra app sea una carpeta.
A veces suceder谩 que tenemos un archivo y no sabemos donde ponerlo porque no funciona exactamente igual o veces no tendremos tan claro como se conecta este componente con este otro. Tendremos que darle un vistazo para entender como entra el componente en nuestra aplicaci贸n.
con este tendremos muchas carpetas pero con pocos archivos pero cada carpeta va a funcionar independientemente desde el principio y hacer lo que debe dentro de ella. Cada carpeta debe seguir un mismo patr贸n, saber que nos encontraremos en cada carpeta y tendrems flexibilidad.
Si en una carpeta necesitamos cierta nomeclatura o trabajar de manera diferente al resto de componentes podemos.

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

Te puse pausa y te gan茅鈥 jaja 馃榿

![](https://static.platzi.com/media/user_upload/20240110151422879-e18a3474-f58c-45af-aaac-b046d9c7188b.jpg)

Me gusta Atomic Design

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. ```

Al final prefer铆 coger los temas del curso y pedirle a chatgpt que me explique. Este curso de como hacer un clon de react que dura 7 horas es una p茅rdida de tiempo si realmente quieres aprender a hacer react, mas all谩 de una app de todos.

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

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. ![](https://soyduque.com/resources/Captura2.png) 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://static.platzi.com/media/user_upload/image-16d7081c-d111-433e-96ab-bb349fa2c1ae.jpg) <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.