Ejemplos de Rutas de Importación

// ES6 Named Imports Examples

// Import named exports from external packages
import { useState, useEffect, useContext } from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import { TextField, Button, Card } from '@mui/material'

// Import named exports with aliases
import {
  useState as useReactState,
  useEffect as useReactEffect
} from 'react'

// Import multiple named exports from local modules
import { utils, helpers, constants } from './utils'
import { User, Product, Order } from './types'
import { formatDate, formatCurrency, formatNumber } from './formatters'

// Combine named and default imports
import React, { Component, PureComponent } from 'react'
import lodash, { map, filter, reduce } from 'lodash'

// Import from nested paths
import { validateEmail } from './utils/validators'
import { API_BASE_URL } from './config/constants'
import { fetchData } from '../api/services'

// Import type definitions (TypeScript)
import type { User as UserType } from './types'
import type { ApiResponse, PaginatedResponse } from '../api/types'

// Import from index files
import { Header, Footer, Sidebar } from './components'
import { useAuth, useTheme } from './hooks'

// ES6 Default Imports Examples

// Import default exports from external packages
import React from 'react'
import Vue from 'vue'
import angular from 'angular'
import $ from 'jquery'
import moment from 'moment'
import lodash from 'lodash'

// Import default exports from local modules
import App from './App'
import HomePage from './pages/HomePage'
import NavBar from './components/NavBar'
import apiClient from './api/client'
import store from './store'

// Combine default and named imports
import React, { useState, useEffect } from 'react'
import Vue, { ref, computed } from 'vue'
import axios, { get, post } from 'axios'
import utils, { formatDate, formatNumber } from './utils'

// Import default with alias
import Component from './components/Component'
import { default as CustomComponent } from './components/MyComponent'

// Import CSS and asset files
import './styles/main.css'
import './styles/theme.scss'
import logo from './assets/logo.png'
import favicon from './assets/favicon.ico'

// Import JSON files
import packageJson from './package.json'
import config from './config.json'
import data from './data/data.json'

// Import from subdirectories
import Logger from './utils/logger'
import Validator from './utils/validator'
import HttpClient from './api/http-client'

// ES6 Namespace Imports Examples

// Import entire module as namespace
import * as React from 'react'
import * as Vue from 'vue'
import * as lodash from 'lodash'
import * as moment from 'moment'

// Use namespace to access exports
React.useState
React.useEffect
React.Component

lodash.map
lodash.filter
lodash.reduce

moment.format
moment.utc
moment.timezone

// Import local modules as namespace
import * as utils from './utils'
import * as constants from './constants'
import * as types from './types'

utils.formatDate()
utils.validateEmail()
constants.API_BASE_URL
types.User

// Import with namespace alias
import * as API from './api'
import * as Helpers from '../helpers'
import * as Services from './services'

API.getData()
API.postData()
Helpers.formatString()
Services.processData()

// Combine namespace with other imports
import React, * as R from 'react'
import lodash, * as _ from 'lodash'

// Namespace from nested paths
import * as Validators from './utils/validators'
import * as Formatters from './utils/formatters'
import * as Config from './config/app'

Validators.validateEmail()
Formatters.formatCurrency()
Config.getSetting()

// Dynamic Import Examples

// Basic dynamic import
import('./utils').then(utils => {
  utils.formatDate()
})

// Dynamic import with async/await
async function loadModule() {
  const utils = await import('./utils')
  utils.formatDate()
}

// Conditional dynamic import
async function loadFeature() {
  if (process.env.NODE_ENV === 'development') {
    const devTools = await import('./dev-tools')
    devTools.initialize()
  }
}

// Lazy load components
const HomePage = lazy(() => import('./pages/HomePage'))
const AboutPage = lazy(() => import('./pages/AboutPage'))
const ContactPage = lazy(() => import('./pages/ContactPage'))

// Dynamic import with error handling
async function loadModule() {
  try {
    const module = await import('./heavy-module')
    return module
  } catch (error) {
    console.error('Failed to load module:', error)
  }
}

// Route-based code splitting
const routes = [
  {
    path: '/dashboard',
    component: lazy(() => import('./pages/Dashboard'))
  },
  {
    path: '/admin',
    component: lazy(() => import('./pages/Admin'))
  },
  {
    path: '/settings',
    component: lazy(() => import('./pages/Settings'))
  }
]

// Dynamic import with variable
async function loadLanguage(lang) {
  const translations = await import(`./locales/${lang}.json`)
  return translations.default
}

// Parallel dynamic imports
async function loadMultipleModules() {
  const [utils, helpers, constants] = await Promise.all([
    import('./utils'),
    import('./helpers'),
    import('./constants')
  ])
  return { utils, helpers, constants }
}

// Dynamic import for polyfills
async function loadPolyfills() {
  if (!window.IntersectionObserver) {
    await import('intersection-observer')
  }
}

// Webpack magic comments for prefetch
const Dashboard = lazy(() =>
  import(/* webpackPrefetch: true */ './pages/Dashboard')
)

// Webpack magic comments for chunk name
const AdminPanel = lazy(() =>
  import(/* webpackChunkName: "admin" */ './pages/AdminPanel')
)

// CommonJS Require Examples

// Require built-in Node.js modules
const fs = require('fs')
const path = require('path')
const http = require('http')
const https = require('https')
const url = require('url')
const util = require('util')
const events = require('events')

// Require npm packages
const express = require('express')
const lodash = require('lodash')
const axios = require('axios')
const moment = require('moment')
const mongoose = require('mongoose')

// Require local files
const utils = require('./utils')
const config = require('./config')
const logger = require('./utils/logger')
const validator = require('./utils/validator')

// Require with destructuring
const { formatDate, formatNumber } = require('./formatters')
const { User, Product } = require('./models')
const { API_BASE_URL, API_KEY } = require('./config')

// Require JSON files
const packageJson = require('./package.json')
const configData = require('./config.json')
const data = require('./data/data.json')

// Conditional require
let devTools
if (process.env.NODE_ENV === 'development') {
  devTools = require('./dev-tools')
}

// Require from subdirectories
const helpers = require('../helpers')
const services = require('./services/api')
const constants = require('./config/constants')

// Require index files
const components = require('./components')
const hooks = require('./hooks')
const utils = require('./utils/index')

// Require with caching
const cachedModule = require('./cached-module')
delete require.cache[require.resolve('./cached-module')]
const freshModule = require('./cached-module')

// Export From Examples

// Re-export named exports
export { ComponentA, ComponentB, ComponentC } from './components'
export { utils, helpers, validators } from './utils'
export { User, Product, Order } from './types'

// Re-export with aliases
export { ComponentA as MyComponent } from './components'
export { formatDate as format } from './formatters'
export { API as RestClient } from './api'

// Re-export default exports
export { default as HomePage } from './pages/HomePage'
export { default as NavBar } from './components/NavBar'
export { default as apiClient } from './api/client'

// Re-export everything
export * from './utils'
export * from './helpers'
export * from './types'

// Combine re-exports in barrel files
// index.js
export * from './components'
export * from './hooks'
export * from './utils'
export * from './services'

// Re-export from subdirectories
export * from './components/common'
export * from './components/forms'
export * from './components/layouts'

// Re-export TypeScript types
export type { User, Product } from './types'
export type { ApiResponse, PaginatedResponse } from './api-types'

// Conditional re-exports
if (process.env.NODE_ENV === 'development') {
  export * from './dev-tools'
}

// Re-export with transformations
export { default as transformed } from './module'

// Nested re-exports
export { default as App } from '../App'
export { Provider } from '../context'
export { connect } from '../redux'

// TypeScript Type-only Import Examples

// Import type declarations
import type { User } from './types'
import type { Product, Order } from './models'
import type { ApiResponse, PaginatedResponse } from './api-types'

// Import type with alias
import type { User as UserType } from './types'
import type { Config as AppConfig } from './config'

// Import multiple types
import type {
  User,
  Product,
  Order,
  Invoice
} from './types'

// Import type from external packages
import type { ReactNode } from 'react'
import type { Router } from 'express'
import type { Request, Response } from 'express'

// Import type and value together
import React, { type ComponentType } from 'react'
import { useState, type Dispatch, type SetStateAction } from 'react'

// Export type declarations
export type { User, Product } from './types'
export type { ApiResponse, ErrorType } from './api-types'

// Export type with alias
export type { User as UserType } from './types'

// Inline type imports
function processUser(user: import('./types').User) {
  return user
}

// Type-only import for interfaces
import type { IUser, IProduct } from './interfaces'

// Import generic types
import type { Dictionary, List } from 'lodash'
import type { Observable, Subject } from 'rxjs'

// Import type from nested paths
import type { Validator } from './utils/validators'
import type { Formatter } from './utils/formatters'

// Combine type and value imports
import utils, { type UtilsConfig } from './utils'
import api, { type ApiClient } from './api'

// Type-only re-export
export type { User } from './types'
export type * from './models'

// Import type for enums
import type { Status, Role } from './enums'

// Import type for type parameters
import type { Model } from 'sequelize'
import type { Document } from 'mongoose'

// Mixed Import Pattern Examples - Real World Applications

// React application with various imports
import React, { useState, useEffect, useContext, type ReactNode } from 'react'
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom'
import { Provider } from 'react-redux'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

// Import UI components
import { Button, Card, TextField, Dialog } from '@mui/material'
import { FiHome, FiUser, FiSettings } from 'react-icons/fi'
import type { IconType } from 'react-icons'

// Import local components
import NavBar from './components/NavBar'
import Sidebar, { type SidebarProps } from './components/Sidebar'
import Footer from './components/Footer'

// Import utilities and helpers
import * as utils from './utils'
import { formatDate, formatCurrency } from './formatters'
import validators from './utils/validators'

// Import types
import type { User, Product, Order } from './types'
import type { ApiResponse } from './api-types'

// Import hooks
import { useAuth } from './hooks/useAuth'
import { useTheme, type ThemeContext } from './hooks/useTheme'

// Import store and Redux
import { store, type RootState, type AppDispatch } from './store'
import { fetchData, type Action } from './store/slices'

// Import services
import * as api from './api'
import { httpClient } from './api/http-client'

// Import configuration
import config from './config'
import { API_BASE_URL, API_KEY } from './config/constants'

// Dynamic imports for code splitting
const Dashboard = React.lazy(() => import('./pages/Dashboard'))
const AdminPanel = React.lazy(() => import('./pages/AdminPanel'))

// CommonJS require (if using Node.js backend)
const express = require('express')
const cors = require('cors')
const helmet = require('helmet')

// Node.js built-in modules
const path = require('path')
const fs = require('fs')
const http = require('http')

// Database imports
const mongoose = require('mongoose')
const { Schema } = mongoose
const { MongoClient } = require('mongodb')

// Authentication libraries
const jwt = require('jsonwebtoken')
const bcrypt = require('bcrypt')
const passport = require('passport')

// Export from barrel files
export * from './components'
export * from './utils'
export * from './services'
export { default as App } from './App'

// TypeScript type exports
export type { AppProps, ComponentProps } from './types'
export type { ApiResponse, ErrorResponse } from './api-types'

// Combined imports with destructuring
import {
  getData,
  postData,
  putData,
  deleteData
} from './api/services'

// Namespace imports for utilities
import * as DateUtils from './utils/date-utils'
import * as StringUtils from './utils/string-utils'
import * as NumberUtils from './utils/number-utils'

// Import CSS and assets
import './styles/globals.css'
import './styles/theme.scss'
import logo from './assets/logo.png'
import favicon from './assets/favicon.ico'

// Import JSON data
import packageJson from '../package.json'
import manifest from './public/manifest.json'

// Webpack-specific imports
import 'regenerator-runtime/runtime'
import 'core-js/stable'
import 'whatwg-fetch'