Exporto todos los componentes a un archivo index.js. Esto significa que puedo importar componentes a cualquier otro archivo haciendo lo siguiente. Esto es simple y más limpio.
import { RocketCard, Container, Navbar, Button01 } from './Components/index';Así es como se ve mi archivo index.js. Aquí importo y exporto todos los componentes.
import { RocketCard } from "./Cards/RocketCard" import { SmallLabel } from "./SmallLabel" import { StatusLabel } from "./StatusLabel" import { Button01 } from "./Button01" import { List } from "./hoc/List" import { SearchBar } from "./SearchBar" import { Container } from "./Layout/Container" import { Navbar } from "./Layout/Navbar" export { RocketCard } export { SmallLabel } export { StatusLabel } export { Button01 } export { List } export { SearchBar } export { Container } export { Navbar }¿Es esta una mala práctica? ¿Ralentizará mi aplicación de alguna manera?
Gracias.
Es difícil decir cuál es correcto, depende del proyecto y los arreglos en el equipo. Solo digo lo que yo haría y mi opinión.
Creo que no es correcto especificar todo en un archivo, por eso se pierde estructura, en un proyecto grande esto es importante.
Sí, ahora puede importar todo desde un archivo, pero crear una estructura en forma de archivos y carpetas es algo simple pero importante.
Te daré un ejemplo. Cuando importo BOTÓN y veo en la ruta de importación que es de la carpeta compartida, entiendo que este es un botón compartido que se usa en todas partes. Pero también puedo importar BUTTON desde la carpeta HERO-BANNER y entender que este es un botón único para el componente HERO. Algo tan simple como la ruta de importación hace la vida un poco más fácil.
No estoy sugiriendo que abandones esta idea, pero sugiero cambiarla un poco.
Veo que tiene una carpeta 'Tarjetas', genial, cree un index.js dentro y exporte los componentes de la carpeta Tarjetas que se necesitan en otro lugar.
Lo mismo con la carpeta 'HOC'.
Veo que tiene 4 componentes en el mismo archivo que el archivo Index.js actual. Entiendo que estos son componentes comunes. Sugiero crear una carpeta compartida y colocarlos allí y crear un archivo index.js allí con la exportación de estos componentes compartidos.
Haga lo mismo con la carpeta 'diseño', cree allí su propio archivo de exportación de componentes.
En general, la idea es buena, pero necesita un pequeño detalle.)
// Create index.js file inside Cards folder with this content. export { RocketCard } from './RocketCard' // Create index.js file inside HOC folder with this content. export { List } from './List' // Create shared folder and index.js with this content in shared folder export { SearchBar } from './SearchBar' export { SmallLabel } from './SmallLabel' export { StatusLabel } from './StatusLabel' export { Button01 } from './Button01' // Create index.js file inside Layout folder with this content. export { Container } from './Container' export { Navbar } from './Navbar'