Cómo usar React Intl para internacionalizar sus aplicaciones React

React Intl es una biblioteca popular que proporciona un conjunto de componentes y utilidades para internacionalizar las aplicaciones React. La internacionalización, también conocida como i18n, es el proceso de adaptar una aplicación a diferentes idiomas y culturas.

Puede admitir fácilmente múltiples idiomas y configuraciones regionales en su aplicación React con ReactIntl.

Instalación de React International

Para usar la biblioteca React Intl, primero debe instalarla. Puedes hacer esto con más de un administrador de paquetes: npm, hilo o pnpm.

Para instalarlo con npm, ejecute este comando en su terminal:

npm instalar reaccionar-intl

Para instalarlo usando yarn, ejecuta este comando:

añadir hilo reaccionar-intl

Cómo usar la biblioteca internacional de React

Una vez que haya instalado la biblioteca React Intl, puede usar sus componentes y características en su aplicación. React Intl tiene funciones similares al

API internacional de JavaScript.

Algunos componentes valiosos que ofrece la biblioteca React Intl incluyen el Mensaje formateado y proveedor internacional componentes

El componente FormattedMessage muestra cadenas traducidas en su aplicación, mientras que el componente IntlProvider proporciona las traducciones y la información de formato a su aplicación.

Debe crear un archivo de traducción antes de poder comenzar a usar los componentes FormattedMessage e IntlProvider para traducir su aplicación. Un archivo de traducción contiene todas las traducciones de su aplicación. Puede crear archivos separados para cada idioma y configuración regional o usar un solo archivo para contener todas las traducciones.

Por ejemplo:

exportarconstante mensajesEnFrancés = {
 saludo: "Bonjour {nombre}"
}

exportarconstante mensajesEnItaliano = {
 saludo: "Buongiorno {nombre}"
}

Este archivo de traducción de ejemplo contiene dos objetos de traducción: mensajesEnFrancés y mensajes en italiano. Puede reemplazar el marcador de posición {nombre} en el saludo cadena en tiempo de ejecución con un valor dinámico.

Para usar las traducciones en su aplicación, debe envolver el componente raíz de su aplicación con el proveedor internacional componente. El componente IntlProvider toma tres Reaccionar accesorios: lugar, configuración regional predeterminada, y mensajes.

La configuración regional acepta una cadena que especifica la configuración regional del usuario, mientras que defaultLocale especifica una alternativa si la configuración regional preferida del usuario no está disponible. Por último, la prop de mensajes acepta un objeto de traducción.

Aquí hay un ejemplo que muestra cómo puede usar IntlProvider:

importar Reaccionar de"reaccionar";
importar ReactDOM de"reaccionar-dom/cliente";
importar aplicación de"./Aplicación";
importar { Proveedor internacional } de"reaccionar-intl";
importar { mensajesEnFrancés } de"./traducción";
ReactDOM.createRoot(documento.getElementById("raíz")).prestar(

"fr" mensajes={mensajesEnFrancés} defaultLocale="es">

 </IntlProvider>
 </React.StrictMode>
);

Este ejemplo pasa el es local, el mensajesEnFrancés traducción y un valor predeterminado es local a la proveedor internacional componente.

Puede pasar más de un lugar u objeto de traducción, y el proveedor internacional detectará automáticamente el idioma del navegador del usuario y utilizará las traducciones adecuadas.

Para mostrar cadenas traducidas en su aplicación, use el Mensaje formateado componente. El Mensaje formateado componente toma un identificación prop correspondiente a un ID de mensaje en el objeto de mensajes.

El componente también toma un mensaje por defecto y valores apuntalar. El mensaje por defecto prop especifica un mensaje alternativo si una traducción no está disponible para la configuración regional actual, mientras que el valores prop proporciona valores dinámicos para los marcadores de posición en sus mensajes traducidos.

Por ejemplo:

importar Reaccionar de"reaccionar";
importar { Mensaje formateado } de"reaccionar-intl";
funciónaplicación() {
devolver (




 identificación ="saludo"
 mensajepredeterminado="Buenos días {nombre}"
 valores={{ nombre: 'John'}}
 />
 </p>
 </div>
 );
}
exportarpor defecto aplicación;

En este bloque de código, el identificación apoyo de la Mensaje formateado componente utiliza el saludo clave de la mensajesEnFrancés objeto, y el valores prop reemplaza el {nombre} marcador de posición con el valor "John".

Dar formato a números con el componente FormattedNumber

React Intl también proporciona la Número formateado componente que puede usar para dar formato a los números en función de la configuración regional actual. El componente acepta varios accesorios para personalizar el formato, como estilo, moneda y dígitos de fracción mínimos y máximos.

Aquí hay unos ejemplos:

importar Reaccionar de"reaccionar";
importar { Número formateado } de"reaccionar-intl";
funciónaplicación() {
devolver (




 Decimal: <Número formateadovalor={123.456}estilo="decimal" />
 </p>


 Por ciento: <Número formateadovalor={123.456}estilo="por ciento" />
 </p>
 </div>
 );
}
exportarpor defecto aplicación;

Este ejemplo utiliza el Número formateado componente que acepta un valor prop especificando el número que desea formatear.

Utilizando el estilo prop, puede personalizar la apariencia del número formateado. Puede configurar el estilo apoyar a decimal, por ciento, o divisa.

Cuando configuras el estilo apoyo a la moneda, el Número formateado El componente formatea el número como un valor de moneda usando el código especificado en el divisa apuntalar:

importar Reaccionar de"reaccionar";
importar { Número formateado } de"reaccionar-intl";
funciónaplicación() {
devolver (




 Precio: <Número formateadovalor={123.456}estilo="divisa"divisa="DÓLAR ESTADOUNIDENSE" />
 </p>
 </div>
 );
}
exportarpor defecto aplicación;

El Número formateado El componente formatea el número en el bloque de código de arriba usando el divisa estilo y el Dólar estadounidense código de moneda.

También puede formatear números con un número específico de lugares decimales usando el mínimoFractionDigits y máximoFractionDigits accesorios.

El mínimoFractionDigits prop especifica el número mínimo de dígitos de fracción para mostrar. Por el contrario, el máximoFractionDigits prop especifica el número máximo de dígitos de fracción.

Si un número tiene menos dígitos de fracción que el especificado mínimoFractionDigits, React Intl lo rellenará con ceros. Si el número tiene más dígitos fraccionarios que los especificados máximoFractionDigits, la biblioteca redondeará el número hacia arriba.

Aquí hay un ejemplo que muestra cómo puede usar estos accesorios:

importar Reaccionar de"reaccionar";
importar { Número formateado } de"reaccionar-intl";
funciónaplicación() {
devolver (




 valor={123.4567}
 dígitosfracciónmínimos={2}
 maximoFractionDigits={3}
 />
 </p>
 </div>
 );
}
exportarpor defecto aplicación;

Formateo de fechas con el componente FormattedDate

Puede formatear las fechas de una manera consistente y fácil de leer usando React Intl. El Fecha de formato El componente proporciona una manera simple y efectiva de formatear fechas. Funciona de manera similar a bibliotecas de fecha y hora que dan formato a las fechas, como Moment.js.

El componente FormattedDate requiere muchos accesorios, como valor, día, mes, y año. La propuesta de valor acepta la fecha que desea formatear y las otras propuestas configuran su formato.

Por ejemplo:

importar Reaccionar de"reaccionar";
importar { Fecha de formato } de"reaccionar-intl";
funciónaplicación() {
constante hoy = nuevoFecha();
devolver (




 Hoyla fecha es
 valor={hoy}
 dia="numérico"
 mes="largo"
 año="numérico"
 />
 </p>
 </div>
 );
}
exportarpor defecto aplicación;

En este ejemplo, el valor prop utiliza la fecha actual. También, usando el día, mes, y año props, especifica que desea que el año, el mes y el día se muestren en un formato largo.

Junto con el día, el mes y el año, otros accesorios también dan formato a la apariencia de la fecha. Aquí están los accesorios y los valores que aceptan:

• año: "numérico", "2 dígitos"
• mes: "numérico", "2 dígitos", "estrecho", "corto", "largo"
• día: "numérico", "2 dígitos"
• hora: "numérico", "2 dígitos"
• minuto: "numérico", "2 dígitos"
• segundo: "numérico", "2 dígitos"
• timeZoneName: "corto largo"

También puede utilizar el Fecha de formato componente para formatear y mostrar la hora:

importar Reaccionar de"reaccionar";
importar { Fecha de formato } de"reaccionar-intl";
funciónaplicación() {
constante hoy = nuevoFecha();
devolver (




 La hora es
 valor={hoy}
 hora="numérico"
 minuto="numérico"
 segundo ="numérico"
 />
 </p>
 </div>
 );
}
exportarpor defecto aplicación;

Internacionalice sus aplicaciones React para una audiencia más amplia

Aprendió a instalar y configurar la biblioteca React-Intl en su aplicación React. React-intl facilita el formato de los números, fechas y monedas de su aplicación React. Puede dar formato a los datos en función de la configuración regional del usuario mediante los componentes FormattedMessage, FormattedNumber y FormattedDate.

Los desarrolladores de React a menudo cometen errores que pueden tener graves consecuencias. Por ejemplo, no actualizar el estado correctamente. Es importante ser consciente de estos errores comunes y corregirlos pronto para evitar problemas costosos.