Saltar al contenido principal

Configuración inicial de la aplicación

Introducción​

Esta es una referencia para inicializar una aplicación de Jutro. Puede aprender a crear un archivo de inicialización (convencionalmente llamado startApp.ts o startApp.js), utilizar la función start() para configurar su aplicación y ampliarla con características de inicio adicionales.

Jutro proporciona un sistema avanzado de inicialización de aplicaciones que incluye lo siguiente:

  • Compatibilidad total de internacionalización y localización con carga de mensajes.
  • Integración del sistema de temas con estilos personalizables.
  • Manejo de errores a través de límites de error.
  • Enrutamiento del lado del cliente con historial del explorador.
  • Administración de la configuración regional a través del almacén de globalización.
  • Notificaciones del sistema y administración de modales.
  • Integración de autenticación y autorización.
  • Características de accesibilidad integradas.

Para ayudarlo a navegar por este sistema, esta página incluye lo siguiente:

  • Referencia de API completa para la función start() junto con ejemplos.
  • El patrón del archivo de inicialización startApp y las pautas para estructurarlo.
  • Ejemplos prácticos de inicialización para situaciones frecuentes.
  • Extensión de la inicialización con servicios adicionales, administración de estado y lógica de inicio.
Note: Para saber cómo cargar y acceder a los valores de configuración en todo el tiempo de ejecución de la aplicación, consulte la página Configuración global. Esta página se centra en la configuración durante la fase de inicialización.

La función start()​

La función start() inicializa y renderiza su aplicación de Jutro con todos los proveedores de contexto necesarios para enrutamiento, autenticación, límites de error, internacionalización, entre otros. La función start() requiere dos parámetros:

start(Main, launchProps);
  • Main: El componente de su aplicación que se convierte en el contenido principal de la aplicación.
  • launchProps: Un objeto de propiedades que configura cómo se inicializa y se comporta la aplicación.
start(Jutro, {
  // Launch and initialization settings
  rootId: 'root',
  config: [config],

  // Application structure and behavior
  messageLoader: loadMessages,
  appName: 'Jutro App',
  routerBasename: '/app',
});

Instrucción de importación​

import { start } from '@jutro/app';
Note: start() también se pueden importar desde el paquete @jutro/micro-frontends para aplicaciones de microfrontend. Tiene una propiedad mfeData adicional. Para obtener más información, consulte la documentación sobre microfrontends.

Configuración de inicio de la aplicación​

Estas propiedades controlan el comportamiento de inicio fundamental de la aplicación. Definen dónde se monta la aplicación en el DOM, cargan la configuración, inicializan los servicios y personalizan la experiencia de carga durante el inicio. La función start() procesa directamente esta configuración antes de que se renderice la aplicación.

appDescriptionobligatorio​

Tipo
Descripción

Description of the application. Used for metadata and display purposes, such as in browser titles, accessibility labels, and application information.

rootIdobligatorio​

Tipo
string
Descripción

The ID of the HTML element in public/index.html where the application is mounted. The React app renders within this element.

config​

Tipo
Array<Record<string, unknown>>
Descripción

Configuration array with up to 3 objects passed as arguments to loadConfiguration(config, params, baseConfig). Objects are spread as separate parameters.

disableThemeProvider​

Tipo
boolean
Descripción

Flag to disable the ThemeProvider wrapper. If true, the application renders without theme context.

identifierPrefix​

Tipo
string
Descripción

Prefix for React identifiers passed to ReactDOMClient.createRoot(). Helps avoid conflicts in multi-app setups.

onInit​

Tipo
() => void
Descripción

Callback function triggered immediately during start() initialization, before DOM rendering. Useful for any initialization logic that needs to be performed, for example loading a required service.

onRender​

Tipo
() => void
Descripción

Callback function triggered after the application component is rendered. Executed via useEffect in the render wrapper.

themeConfig​

Tipo
ThemeConfig
Descripción

Initial theme configuration passed to ThemeProvider. Defines colors, fonts, and other visual settings.

themeProviderProps​

Tipo
ThemeProviderProps
Descripción

Additional properties passed to the ThemeProvider component wrapper. Allows customization of theme behavior.

trackingConfig​

Tipo
TrackingConfig
Descripción

Tracking configuration for analytics. Used to initialize Datadog and Google Analytics with whitelist and dictionary settings.

Estructura de la aplicación principal​

Estas propiedades configuran la estructura principal y las características fundamentales de la aplicación. Definen qué componente se va a renderizar como su aplicación principal, proporcionan metadatos esenciales, configuran el manejo de errores para excepciones no detectadas y habilitan proveedores de contexto para la administración de estado y la integración de características.

appNameobligatorio​

Tipo
Descripción

The name of the application. Used for display and internationalization purposes.

errorBoundary​

Tipo
React.ComponentClass<ErrorBoundaryProps>
Descripción

Custom error boundary component for the application. Handles uncaught errors and displays fallback UI. Replaces the default ErrorBoundary from @jutro/components.

Valor predeterminado
`ErrorBoundary` from `@jutro/components`

mfeData​

Tipo
{ scopeName: string }
Descripción

Micro frontend data passed to the application. Contains scope name for micro frontend identification. Only used in micro frontend contexts. You can pass this property to start() function only if it is imported from @jutro/micro-frontends package.

onError​

Tipo
ErrorBoundaryProps['onError']
Descripción

Callback function triggered when an error occurs. Provides error details and error information.

rootHOCs​

Tipo
RootHOCsType
Descripción

Function or array of functions that wrap your application to pass context down into it. These HOCs work differently than traditional React HOCs, because they take a React.ReactNode as input rather than a component class. For additional details see this section.

Configuración de enrutamiento​

Estas propiedades administran el enrutamiento del lado del cliente, el historial de navegación, la configuración del enrutador y el manejo de eventos modales. Controlan cómo la aplicación maneja los cambios de ruta, configura enrutadores personalizados, administra diálogos modales y se integra con el seguimiento analítico de los eventos de navegación.

modalEmitter​

Tipo
ModalNextEmitterType
Descripción

Custom modal emitter instance for managing modal dialogs across the application. Use this when you need to set up event listeners or integrations before the application starts.

Valor predeterminado
`new ModalNextEmitter()`

Router​

Tipo
ComponentType<BrowserRouterProps> | ComponentType<MemoryRouterProps>
Descripción

Custom router component for handling navigation. Must accept the same props as BrowserRouter or MemoryRouter. Use this to override the default router selection, add custom routing behavior (like analytics tracking), or force a specific router type for your environment. If not passed, BrowserRouter is used in browser environments and MemoryRouter is used in test environments.

routerBasename​

Tipo
string
Descripción

Base URL for all locations in the router. Used when serving the app from a subdirectory instead of the root. A properly formatted basename should have a leading slash, but no trailing slash. It overrides the JUTRO_ROUTER_BASENAME environment variable or REACT_APP_JUTRO_ROUTER_BASENAME in the .env file if they are set.

Valor predeterminado
''

routerHistory​

Tipo
RouterProps['history']
Descripción

Custom history object for programmatic navigation and route management. Use this when you need to set up navigation tracking, implement custom navigation guards, perform programmatic navigation before app startup, or integrate with analytics. If not passed, BrowserHistory is used in browser environments and MemoryHistory is used in test environments.

trackingCallback​

Tipo
RouteTrackerProps['track']
Descripción

Callback function for tracking route changes and analytics. Use this when you need to integrate with analytics platforms, track user navigation patterns, monitor page views, or implement custom route-based logging. Called on every route change with location and action parameters.

Globalización​

Estas propiedades configuran los aspectos de globalización (g11n), internacionalización (i18n) y localización (l10n) de la aplicación. Administran la carga de mensajes, las preferencias de idioma, la configuración regional y controlan cómo se renderiza el texto internacionalizado en la aplicación.

coreMessageLoader​

Tipo
LoaderType
Descripción

Function for loading Jutro's built-in core messages for internationalization. Takes a locale string (for example, 'en', 'es') and returns a Record<string, string> with core Jutro component messages and labels. If not provided, defaults to a function that logs warnings and returns an empty object, meaning Jutro components use their built-in English messages. Use this when you need to customize or translate Jutro's built-in component labels (buttons, form validation messages, etc.), load core messages from external sources, or provide enhanced translations for Jutro's default UI text.

g11nStore​

Tipo
G11nStore
Descripción

Store for globalization settings. Includes locale and language preferences.

intlTextComponent​

Tipo
IntlConfig['textComponent']
Descripción

HTML tag to wrap internationalized messages inside of, such as 'span', 'div', or 'p'. Affects how React Intl's <FormattedMessage> and other formatting components render their output. By default, React.Fragment is used, which renders text without any wrapper element. Use this when you need consistent HTML structure for all i18n text across your application, require specific semantic elements for accessibility, or need to integrate with CSS frameworks that expect particular HTML structures.

messageLoader​

Tipo
LoaderType
Descripción

Function for loading application-specific messages for internationalization. Takes a locale string (for example, 'en', 'es') and returns a Record<string, string> with message keys and translated values. If not provided, defaults to a function that logs warnings and returns an empty object, meaning your app won't have internationalized messages. Use this when you want to load messages from different sources (files, APIs, CDNs), implement custom fallback logic for unsupported locales, or organize messages in non-standard file structures.

Configuración de autenticación​

Estas propiedades configuran el comportamiento de autenticación y el manejo de errores de la aplicación. Controlan los proveedores de autenticación personalizados, los componentes de visualización de errores y si la autenticación está habilitada al nivel de la aplicación.

authComponent​

Tipo
React.ComponentType
Descripción

Custom authentication provider component for handling authentication. By default, Jutro uses the built-in AuthProvider from @jutro/auth which provides standard authentication functionality. Use this when you need custom authentication flows, want to integrate with existing authentication infrastructure, or need mock authentication for development/testing.

authErrorComponent​

Tipo
AuthRouteProps['authErrorComponent']
Descripción

Custom error component to display when authentication errors occur. This component receives one prop: error (of type AuthError | undefined) containing the authentication error details. Use this to customize the authentication error display, or integrate error tracking with analytics platforms.

Valor predeterminado
`AuthErrorPage` from `@jutro/app`

disableAuthErrorsHandling​

Tipo
boolean
Descripción

Flag to disable authentication error handling.

disableAuthForApplicationRoot​

Tipo
boolean
Descripción

Flag to disable authentication for the application root. If true, application root will not be wrapped with secure route handlers.

Funciones de la interfaz de usuario y experiencia del usuario​

Estas propiedades configuran las funciones de la interfaz de usuario y los aspectos de presentación de la aplicación. Administran las capacidades esenciales de la interfaz de usuario, como notificaciones, modales, estados de carga y características de accesibilidad que mejoran la experiencia del usuario.

disableModalProvider​

Tipo
boolean
Descripción

Flag to disable the ModalProvider wrapper around the application. By default, Jutro wraps your application with a ModalProvider to manage modal dialogs. Use this when you want to provide your own modal management system or integrate with a third-party modal library.

disableToastProvider​

Tipo
boolean
Descripción

Flag to disable the ToastProvider wrapper around the application. By default, Jutro wraps your application with a ToastProvider to enable toast notifications throughout your app. Use this when you want to provide your own toast notification system or integrate with a third-party notification library.

hideSkipNavigation​

Tipo
boolean
Descripción

Flag to hide the skip navigation link for accessibility. By default, Jutro includes a skip navigation link to help keyboard and screen reader users quickly navigate to main content. Use this when your application implements its own skip navigation mechanism.

loaderComponent​

Tipo
React.ElementType
Descripción

The component for wrapping the main component and presenting a loader UI when the app is loading. Replaces the default loader. Use this when you want to customize the loading experience, implement custom loading animations, or show different loader variants based on application state.

Valor predeterminado
`Loader` from @jutro/components

mainComponentProps​

Tipo
Record<string, unknown>
Descripción

Additional props to pass to the main application component. These props are spread and passed directly to your main component as React component props. Use this when you need to pass custom configuration, event handlers, or data to your main application component without modifying the component itself.

modalFunctions​

Tipo
ModalFunctions
Descripción

Custom modal functions for managing modal behavior. Allows you to provide custom functions for opening, closing, and managing modal dialogs. Use this when you need to customize modal lifecycle behavior, implement modal state persistence, integrate with analytics platforms for modal events, or add custom validation before opening or closing modals.

toastTrigger​

Tipo
ToastTrigger
Descripción

Custom toast trigger function for displaying notifications. By default, Jutro uses the built-in toast trigger from @jutro/components. Use this when you need custom notification behavior, want to integrate with external notification systems, implement custom toast styling or animations, or need to add custom logging or analytics to toast events.

Inicialización de la aplicación​

Para inicializar una aplicación de Jutro, cree un archivo startApp.ts (o startApp.js). Este archivo se importa de forma convencional y se lo llama desde el punto de entrada de Webpack (src/index.ts).

Note: La plantilla de inicio de Jutro viene con este archivo preconfigurado. Si crea una nueva aplicación desde cero, use los ejemplos a continuación como punto de partida.

Ejemplo de inicialización básica​

Esta es la configuración mínima necesaria para inicializar una aplicación de Jutro:

src/startApp.js
import { start } from '@jutro/app';
import { loadConfiguration } from '@jutro/config';

import { Jutro } from './app/App';
import appConfig from './config/config.json';
import messages from './app/App.messages';
import { loadAppMessages, loadCoreMessages } from './messagesLoaders';

// Load configuration before starting the app
loadConfiguration(appConfig);

// Export the startApp function
export const startApp = (): void => {
  // Initialize the application
  start(Jutro, {
    rootId: 'root',
    messageLoader: loadAppMessages,
    coreMessageLoader: loadCoreMessages,
    appName: messages.appName,
    appDescription: messages.appDescription,
  });
};

Inicialización para aplicaciones de microfrontend​

Cuando compile aplicaciones de microfrontend, startApp recibe mfeData que contiene un contexto de shell:

src/startApp.js
import '@jutro/theme';
import './styles/index.scss';

import { MfeData, start } from '@jutro/micro-frontends';
import { loadConfiguration } from '@jutro/config';

import { Jutro } from './app/App';
import appConfig from './config/config.json';
import messages from './app/App.messages';
import { loadAppMessages, loadCoreMessages } from './messagesLoaders';

loadConfiguration(appConfig);

export const startApp = (mfeData?: MfeData): void => {
  start(Jutro, {
    rootId: 'root',
    messageLoader: loadAppMessages,
    coreMessageLoader: loadCoreMessages,
    appName: messages.appName,
    appDescription: messages.appDescription,
    mfeData, // Pass shell context to the app
  });
};

Estrategias de carga de configuración​

Hay dos métodos para cargar la configuración en la aplicación de Jutro: cargarla explícitamente mediante loadConfiguration() antes de llamar a start() o pasar la propiedad config a start(). Cada método tiene diferentes casos de uso y es importante entender cuándo usar cada uno.

Método 1: carga explícita de la configuración​

Llame a loadConfiguration() antes de start(). Este método le da control total sobre la configuración y es ideal cuando necesita realizar una combinación personalizada, configuraciones específicas para el entorno o sustitución de parámetros de plantilla. Consulte más detalles sobre la configuración en la sección Extensión de la inicialización.

import appConfig from './config/config.json';
import featureFlags from './config/featureFlags.json';
import { loadConfiguration } from '@jutro/config';

// Merge multiple config files into a single configuration object
const combinedConfig = {
  ...appConfig,
  ...featureFlags,
  // Add environment-specific overrides
  API_BASE_URL: process.env.REACT_APP_API_BASE_URL || 'http://localhost:3000',
  FEATURE_NEW_DASHBOARD: process.env.REACT_APP_FEATURE_NEW_DASHBOARD === 'true',
};

// Parameters for template substitution (optional)
const templateParams = {
  environment: process.env.NODE_ENV,
  version: process.env.REACT_APP_VERSION || '1.0.0',
};

// Load configuration with optional template parameters
loadConfiguration(combinedConfig, templateParams);

export const startApp = (): void => {
  start(Jutro, {
    rootId: 'root',
    messageLoader: loadAppMessages,
    coreMessageLoader: loadCoreMessages,
    appName: messages.appName,
    appDescription: messages.appDescription,
    // Config prop is not passed here
  });
};

Método 2: configuración con la propiedad de configuración​

Pase la configuración directamente a la función start() a través de la propiedad config. La función start() llamará a loadConfiguration() internamente. Use este método más simple cuando tenga un solo archivo de configuración sin necesidad de procesamiento adicional:

import appConfig from './config/config.json';

export const startApp = (): void => {
  start(Jutro, {
    rootId: 'root',
    config: [appConfig], // Configuration loaded by start()
    messageLoader: loadAppMessages,
    // ... other props
  });
};

Evite mezclar los métodos de configuración​

No llame a loadConfiguration() y pase, a la vez, la propiedad config en la misma función startApp. Si lo hace, se llamará dos veces a loadConfiguration(). Una vez desde su llamada explícita y otra internamente por start(). La segunda llamada sobrescribirá la primera, por ellos, se podrían perder datos importantes de configuración:

Ejemplo de cómo no inicializar la configuración:

loadConfiguration(appConfig); // First call
start(Jutro, {
  config: [appConfig], // Triggers second loadConfiguration() call - overwrites the first!
  // ... other props
});

Extensión de la inicialización​

Más allá de la configuración básica, puede extender el archivo startApp para incluir configuración avanzada, inicialización de servicio y lógica personalizada. En esta sección, se abordan los patrones de expansión comunes.

Importaciones de módulos​

Más allá de las importaciones básicas de temas y hojas de estilo, puede expandir la sección de importaciones de módulos para que incluyan bibliotecas, utilidades y servicios adicionales que requiera su aplicación. Las expansiones comunes incluyen lo siguiente:

  • Bibliotecas de supervisión y análisis. Importe servicios de terceros como Datadog, Google Analytics o utilidades de seguimiento personalizadas.
  • Compatibilidad con componentes heredados. Agregue capas de compatibilidad para componentes de Jutro más antiguos.
  • Personalizaciones de enrutamiento. Importe utilidades del historial como createBrowserHistory para configuraciones personalizadas de enrutador.
  • Utilidades de la aplicación. Cargue funciones de utilidad personalizadas, ayudantes de transformación de datos o herramientas específicas de la aplicación.
  • Metadatos del paquete. Importe package.json para la información de la versión utilizada en la supervisión o la depuración.
Ejemplo de importaciones de módulos expandidos​
import '@jutro/theme';
import './styles/index.scss';
import { start } from '@jutro/app';
import { datadogRum } from '@datadog/browser-rum';
import { configureLegacyComponentMap } from '@jutro/legacy/uiconfig';
import { createBrowserHistory } from 'history';
import packageJson from '../package.json';

El principio clave es importar los módulos en el orden en que se necesitan, con las utilidades de configuración y la inicialización del servicio antes de la llamada a la función start().

Ajustes de la configuración​

Más allá de cargar un solo archivo config.json, puede ampliar los ajustes de la configuración para manejar ajustes complejos de aplicaciones, valores específicos del entorno y la configuración del tiempo de ejecución. Las opciones de expansión de la configuración incluyen lo siguiente:

  • Varios archivos de configuración. Cargue diferentes archivos de configuración para diferentes aspectos (funciones, terminales de la API, configuración de la interfaz de usuario).
  • Configuración específica del entorno. Cargue diferentes configuraciones en función del entorno de implementación.
  • Configuración de tiempo de ejecución. Establezca valores de configuración dinámicamente en función de condiciones o de los datos externos.
  • Indicadores de funciones. Habilite o deshabilite funciones a través de la configuración.
  • Validación de la configuración. Valide los valores de configuración antes de iniciar la aplicación.
Ejemplo de ajustes de configuración ampliados​
import appConfig from './config/config.json';
import featureFlags from './config/featureFlags.json';
import { loadConfiguration } from '@jutro/config';

// Merge multiple config files into a single configuration object
const combinedConfig = {
  ...appConfig,
  ...featureFlags,
  // Add environment-specific overrides
  API_BASE_URL: process.env.REACT_APP_API_BASE_URL || 'http://localhost:3000',
  FEATURE_NEW_DASHBOARD: process.env.REACT_APP_FEATURE_NEW_DASHBOARD === 'true',
};

// Parameters for template substitution (optional)
const templateParams = {
  environment: process.env.NODE_ENV,
  version: process.env.REACT_APP_VERSION || '1.0.0',
};

// Load configuration with optional template parameters
loadConfiguration(combinedConfig, templateParams);

La función loadConfiguration() acepta hasta tres argumentos: el objeto de configuración principal, parámetros de plantilla opcionales para la sustitución de variables utilizando la sintaxis de Mustache y una configuración base opcional.

Note: Evite usar el parámetro baseConfig, ya que está obsoleto. Se recomienda combinar configuraciones manualmente antes de llamar a loadConfiguration(), en lugar de confiar en la lógica de combinación interna de la función.

Inicialización del servicio​

Después de los ajustes de configuración y antes de llamar a start(), se pueden inicializar los servicios externos, las herramientas de supervisión y las utilidades específicas que necesita la aplicación. Las inicializaciones de servicios frecuentes incluyen las siguientes:

  • Supervisión y análisis. Inicialice servicios de seguimiento como Google Analytics, Datadog RUM o soluciones de supervisión personalizadas.
  • Compatibilidad con componentes heredados. Configure capas de compatibilidad para componentes de Jutro más antiguos con configureLegacyComponentMap().
  • Comportamiento del servicio basado en el entorno. Habilite o deshabilite los servicios de forma condicional en función del entorno (por ejemplo, análisis solo en producción, herramientas de depuración solo en desarrollo).
  • Inicialización de servicios de terceros. Configure servicios externos que requieran inicialización de tiempo de ejecución antes de que se inicie la aplicación.
Ejemplo de inicialización de servicio expandido​
import { datadogRum } from '@datadog/browser-rum';
import { configureLegacyComponentMap } from '@jutro/legacy/uiconfig';
import { warning } from '@jutro/logger';
import packageJson from '../package.json';

// Configure legacy component support
configureLegacyComponentMap();

// Environment-specific setup
const deployEnv = process.env.REACT_APP_DEPLOY_ENV || 'development';

// Initialize monitoring (Datadog RUM example)
datadogRum.init({
  applicationId: process.env.REACT_APP_DATADOG_RUM_APPLICATION_ID as string,
  clientToken: process.env.REACT_APP_DATADOG_RUM_CLIENT_TOKEN as string,
  site: 'datadoghq.com',
  service: 'my-jutro-app',
  version: packageJson.version,
  env: deployEnv,
  sessionSampleRate: 100,
  sessionReplaySampleRate: 20,
  trackUserInteractions: true,
  defaultPrivacyLevel: 'mask-user-input',
  trackResources: true,
  trackLongTasks: true,
  // Configure distributed tracing for supported APIs
  allowedTracingUrls: [process.env.REACT_APP_API_BASE_URL].filter(Boolean),
});

// Development-specific warnings
if (process.env.NODE_ENV !== 'production') {
  warning(
    `App running with NODE_ENV=${process.env.NODE_ENV} which may impact performance.`
  );
}
Prácticas recomendadas para la inicialización de servicios​
  • Verificaciones de entorno. Utilice variables de entorno para inicializar servicios condicionalmente (evite inicializar seguimientos en desarrollo).
  • Manejo de errores. Encapsule la inicialización del servicio en bloques try-catch (intento/captura) para evitar errores de inicio.
  • Dependencias de orden. Inicialice los servicios en el orden correcto en función de sus dependencias.
  • Validación de la configuración. Valide las variables de entorno necesarias antes de inicializar los servicios.
  • Reducción del desempeño correcta. Permite que la aplicación se inicie incluso si los servicios no críticos no se inicializan.

Ajuste de la internacionalización​

La inicialización predeterminada proporciona un ajuste completo de la internacionalización, lo que incluye la carga separada de mensajes principales y de la aplicación, la gestión del almacén de globalización y la configuración regional basada en la configuración. Puede extender esto configurando un almacén de globalización o cargadores de mensajes personalizados:

import { createG11nLocalStorageStore } from '@jutro/locale';

const g11nStore = createG11nLocalStorageStore({
  name: 'my-app-g11n-store',
});

export const startApp = (): void => {
  start(MyApp, {
    rootId: 'root',
    messageLoader: loadAppMessages,
    coreMessageLoader: loadCoreMessages,
    g11nStore, // Enable globalization store
    appName: messages.appName,
    appDescription: messages.appDescription,
  });
};

Para revisar las posibilidades de configuración adicionales, consulte la documentación de i18n e Interacción con el almacén de g11n.

Ejemplos de configuración avanzada​

Personalización del componente de carga​

Utilice la propiedad loaderComponent para reemplazar el cargador predeterminado por uno personalizado:

import { Loader } from '@jutro/components';

const CustomLoader = ({ loaded, children }) => {
  if (!loaded) {
    return (
      <div style={{ textAlign: 'center', padding: '2rem' }}>
        <h1>Loading Application...</h1>
        <Loader />
      </div>
    );
  }
  return children;
};

start(MyApp, {
  loaderComponent: CustomLoader,
  // ... other configuration
});

Ejecución de la lógica de inicialización antes del inicio​

Utilice la devolución de llamada onInit para ejecutar el código de configuración antes de que la aplicación renderice:

start(MyApp, {
  onInit: () => {
    // Initialize services before app starts
    // This runs synchronously, before DOM rendering
    initializeCustomAnalytics();
    setupLogger();
    validateEnvironmentConfig();
  },
  // ... other configuration
});

Orden de ejecución:

  1. Se carga la configuración a través de loadConfiguration().
  2. Se llama a onInit().
  3. Validación del elemento de DOM y creación de la raíz de React.
  4. Renderizado y montaje de componentes.
  5. Se llama a onRender() (si estuviera).

Prácticas recomendadas para onInit:

  • Utilice onRender en su lugar si necesita ejecutar código después de la renderización.
  • Cualquier error arrojado evitará que la aplicación se inicie.
  • Utilícelo para la inicialización crítica que debe tener lugar antes de que se renderice la interfaz de usuario.

Ejecución de la lógica después de la renderización​

Utilice la devolución de llamada onRender para ejecutar código después de que se renderice el componente de la aplicación:

start(MyApp, {
  onRender: () => {
    // This runs after React rendering completes
    // Ideal for non-critical initialization, analytics, or tracking
    logApplicationStartTime();
    initializeOptionalFeatures();
  },
  // ... other configuration
});

Cuándo se lo debe utilizar onRender:

  • Inicialización no crítica que no bloquea el inicio.
  • Análisis o telemetría.
  • Evaluación del indicador de función.
  • Inicialización de función opcional.

HOC (componentes de orden superior) raíz​

La propiedad rootHOCs pasada a start() permite encapsular su aplicación con proveedores de contexto adicionales. Acepta una función (o una matriz de funciones) que toma un React.ReactNode como entrada y devuelve una versión encapsulada.

Note: rootHOCs no acepta el patrón tradicional HOC según se define en React. Se limita a tomar un solo argumento de tipo React.ReactNode, en lugar de una clase de componente.

Patrones de rootHOCs válidos​

// Valid: Takes a ReactNode and returns JSX
const withCustomProvider = (node: React.ReactNode) => {
  return <CustomContext.Provider value={config}>{node}</CustomContext.Provider>;
};

start(MyApp, {
  rootHOCs: [withCustomProvider],
  // ... other configuration
});

Patrones de rootHOCs no válidos​

// Invalid: Traditional HOC pattern - wraps components, not nodes
const withDivHOC = (Component: React.ComponentType) => {
  const Wrapper = (props) => (
    <div>
      <Component {...props} />
    </div>
  );
  return Wrapper;
};

// This will not work with rootHOCs
start(MyApp, {
  rootHOCs: [withDivHOC],
});

Patrones de configuración comunes​

Incorporación de la gestión de estado con Redux​

Use la propiedad rootHOCs para encapsular su aplicación con un proveedor de almacén de Redux:

import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({ reducer: yourReducer }); // Your Redux store configuration

start(RatingApp, {
  messageLoader: loadMessages,
  appName: messages.appName,
  // Wrap application with Redux store
  rootHOCs: [(body) => <Provider store={store}>{body}</Provider>],
  // ... other configuration
});