{"id":5794,"date":"2022-04-27T11:54:28","date_gmt":"2022-04-27T09:54:28","guid":{"rendered":"https:\/\/www.ibidem-translations.com\/edu\/?p=5794"},"modified":"2022-06-06T16:38:38","modified_gmt":"2022-06-06T14:38:38","slug":"translate-react-i18next-app","status":"publish","type":"post","link":"https:\/\/www.ibidem-translations.com\/edu\/translate-react-i18next-app\/","title":{"rendered":"C\u00f3mo traducir correctamente una aplicaci\u00f3n React usando i18next"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\" style=\"text-align:center\"><span style=\"color:#0693e3\" class=\"color\"> A free translation by Chema, a Spain-based translator specializing in&nbsp;<\/span><a href=\"https:\/\/www.ibidem-translations.com\/spanish.php\"><span style=\"color:#0693e3\" class=\"color\">English to Spanish translations of software and apps<\/span><\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"text-align:center\"><strong><span style=\"color:#0693e3\" class=\"color\">An original text written by\u00a0Adriano Raiano, originally published in<\/span><\/strong><span style=\"color:#0693e3\" class=\"color\"> <br><\/span><a rel=\"noreferrer noopener\" aria-label=\" https:\/\/locize.com\/blog\/how-to-internationalize-react-i18next\/  (opens in a new tab)\" href=\"https:\/\/locize.com\/blog\/how-to-internationalize-react-i18next\/\" target=\"_blank\"><span style=\"color:#0693e3\" class=\"color\"> https:\/\/locize.com\/blog\/how-to-internationalize-react-i18next\/ <\/span><\/a><span style=\"color:#0693e3\" class=\"color\"> <\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"text-align:center\">* * *<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ayudar a superar la barrera del idioma a los usuarios que utilizan un software es algo muy importante. El ingl\u00e9s ya no es el idioma universal de Internet. En <a href=\"https:\/\/www.internetworldstats.com\/stats7.htm\">marzo de 2020<\/a>, solo el 25,9 % de los usuarios de Internet hablaban ingl\u00e9s. Hay muchas posibilidades de que tus usuarios pasen por alto tu sitio web si no est\u00e1 traducido y localizado. Si no tienes un sitio web multiling\u00fce, est\u00e1s perdiendo una gran parte de tus usuarios o clientes potenciales.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En el ecosistema de JavaScript, hay muchos frameworks de internacionalizaci\u00f3n. <a href=\"https:\/\/medium.com\/@jamuhl\/i18n-frameworks-the-unfair-showdown-8d436cd6f470\">Aqu\u00ed<\/a> puedes encontrar detalles sobre algunos frameworks de JavaScript. En este art\u00edculo, usaremos <a href=\"https:\/\/www.i18next.com\/\">i18next<\/a>&nbsp;para internacionalizar una aplicaci\u00f3n&nbsp;<a href=\"https:\/\/reactjs.org\/\">React.js<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Indice<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Antes que nada: &#8220;\u00bfPor qu\u00e9 i18next?&#8221;<\/li><li>Entramos en materia<ul><li>Requisitos previos<\/li><li>Empezamos<\/li><li>Conmutador de idioma<\/li><li>Interpolaci\u00f3n y Pluralizaci\u00f3n<\/li><li>Formateo<\/li><li>Contexto<\/li><li>Separar las traducciones del c\u00f3digo<\/li><li>Mejor gesti\u00f3n de la traducci\u00f3n<ul><li>\u00a1Con seguridad!<\/li><li>\u00bfC\u00f3mo se ve esto?<\/li><li>Guardar traducciones faltantes<\/li><li>\ud83d\udc40 Aun hay m\u00e1s&#8230;<\/li><li>\ud83d\udce6 Preparaci\u00f3n para producci\u00f3n \ud83d\ude80<\/li><li>\ud83c\udf89\ud83e\udd73 Felicidades \ud83c\udf8a\ud83c\udf81<\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Antes que nada: &#8220;\u00bfPor qu\u00e9 i18next?&#8221;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Cuando se trata de la localizaci\u00f3n de React, uno de los frameworks m\u00e1s populares es <a href=\"https:\/\/www.i18next.com\/\">i18next<\/a> con su extensi\u00f3n <a href=\"https:\/\/react.i18next.com\/\">react-i18next<\/a>, y con raz\u00f3n!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>i18next se cre\u00f3 a fines de 2011. Es m\u00e1s antigua que la mayor\u00eda de las bibliotecas que usas hoy en d\u00eda, incluido react, vue, etc.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u27a1\ufe0f sostenible<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Dado el tiempo que i18next ya est\u00e1 disponible en c\u00f3digo abierto, no hay un caso real de i18n que no pueda resolverse con i18next.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u27a1\ufe0f maduro<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>i18next se puede usar en cualquier entorno javascript (y algunos que no son javascript: .net, elm, iOS, android, ruby, &#8230;), con cualquier framwork de usuario, con cualquier formato i18n, &#8230; <a href=\"https:\/\/www.i18next.com\/overview\/supported-frameworks\">las posibilidades son infinitas<\/a>&nbsp;.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u27a1\ufe0f extensible<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Con i18next podr\u00e1s usar m\u00e1s funciones que con otros frameworks de internacionalizaci\u00f3n. <\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u27a1\ufe0f potente<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.i18next.com\/overview\/comparison-to-others\">Aqu\u00ed<\/a> puedes encontrar m\u00e1s informaci\u00f3n sobre por qu\u00e9 i18next es tan especial y <a href=\"https:\/\/locize.com\/i18next.html#how-does-i18next-work\">c\u00f3mo funciona<\/a>&nbsp;.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Entramos en materia<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Requisitos previos<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Aseg\u00farate de tener Node.js y npm instalados. Es bueno tener algo de experiencia con HTML , JavaScript y React.js, antes de saltar a <a href=\"https:\/\/react.i18next.com\/\">react-i18next<\/a>&nbsp;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Empezamos<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Usa tu propio proyecto React o crea uno nuevo con <a href=\"https:\/\/create-react-app.dev\/\">create-react-app<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code><span style=\"background-color:#eeeeee\" class=\"background-color\">npx create-react-app my-app<\/span><\/code><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--5uzIEDij--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/behkgqzaft71yt6tqx2b.jpg\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--5uzIEDij--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/behkgqzaft71yt6tqx2b.jpg\" alt=\"\"\/><\/a><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos a adaptar la app para que detecte el idioma seg\u00fan la preferencia del usuario.<br>Y crearemos un conmutador de idioma para que el contenido cambie entre diferentes idiomas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Instalamos algunas dependencias de i18next:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.i18next.com\/\">i18next<\/a><\/li><li><a href=\"https:\/\/react.i18next.com\/\">react-i18next<\/a><\/li><li><a href=\"https:\/\/github.com\/i18next\/i18next-browser-languageDetector\">i18next-browser-languagedetector<\/a><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><code><span style=\"background-color:#eeeeee\" class=\"background-color\">npm install i18next react-i18next i18next-browser-languagedetector<\/span><\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Preparamos un archivo i18n.js:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport LanguageDetector from 'i18next-browser-languagedetector';\n\ni18n\n  \/\/ detect user language\n  \/\/ learn more: https:\/\/github.com\/i18next\/i18next-browser-languageDetector\n  .use(LanguageDetector)\n  \/\/ pass the i18n instance to react-i18next.\n  .use(initReactI18next)\n  \/\/ init i18next\n  \/\/ for all options read: https:\/\/www.i18next.com\/overview\/configuration-options\n  .init({\n    debug: true,\n    fallbackLng: 'en',\n    interpolation: {\n      escapeValue: false, \/\/ not needed for react as it escapes by default\n    },\n    resources: {\n      en: {\n        translation: {\n          \/\/ here we will place our translations...\n        }\n      }\n    }\n  });\n\nexport default i18n;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Importamos ese archivo en alg\u00fan lugar de nuestro archivo index.js:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para React >= 18.0.0 usamos:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport { createRoot } from 'react-dom\/client';\nimport '.\/index.css';\nimport App from '.\/App';\n\n\/\/ import i18n (needs to be bundled ;))\nimport '.\/i18n';\n\nconst root = createRoot(document.getElementById('root'))\nroot.render(\n  &lt;React.StrictMode>\n    &lt;App \/>\n  &lt;\/React.StrictMode>\n);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Para versiones anteriores de React usamos:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport ReactDOM from 'react-dom';\nimport '.\/index.css';\nimport App from '.\/App';\n\n\/\/ import i18n (needs to be bundled ;))\nimport '.\/i18n';\n\nReactDOM.render(\n  &lt;React.StrictMode>\n    &lt;App \/>\n  &lt;\/React.StrictMode>,\n  document.getElementById('root')\n);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora intentemos mover un texto codificado de forma r\u00edgida a las traducciones.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hemos usado el\u00a0<a href=\"https:\/\/react.i18next.com\/latest\/trans-component\">componente Trans<\/a>\u00a0para el primer texto y el\u00a0 <br><a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/react.i18next.com\/latest\/usetranslation-hook\">useTranslation hook<\/a> para el segundo texto:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import logo from '.\/logo.svg';\nimport '.\/App.css';\nimport { useTranslation, Trans } from 'react-i18next';\n\nfunction App() {\n  const { t } = useTranslation();\n\n  return (\n    &lt;div className=\"App\">\n      &lt;header className=\"App-header\">\n        &lt;img src={logo} className=\"App-logo\" alt=\"logo\" \/>\n        &lt;p>\n          &lt;Trans i18nKey=\"description.part1\">\n            Edit &lt;code>src\/App.js&lt;\/code> and save to reload.\n          &lt;\/Trans>\n        &lt;\/p>\n        &lt;a\n          className=\"App-link\"\n          href=\"https:\/\/reactjs.org\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          {t('description.part2')}\n        &lt;\/a>\n      &lt;\/header>\n    &lt;\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Los textos ahora son parte de los recursos de traducci\u00f3n:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport LanguageDetector from 'i18next-browser-languagedetector';\n\ni18n\n  \/\/ detect user language\n  \/\/ learn more: https:\/\/github.com\/i18next\/i18next-browser-languageDetector\n  .use(LanguageDetector)\n  \/\/ pass the i18n instance to react-i18next.\n  .use(initReactI18next)\n  \/\/ init i18next\n  \/\/ for all options read: https:\/\/www.i18next.com\/overview\/configuration-options\n  .init({\n    debug: true,\n    fallbackLng: 'en',\n    interpolation: {\n      escapeValue: false, \/\/ not needed for react as it escapes by default\n    },\n    resources: {\n      en: {\n        translation: {\n          description: {\n            part1: 'Edit &lt;1>src\/App.js&lt;\/1> and save to reload.',\n            part2: 'Learn React'\n          }\n        }\n      }\n    }\n  });\n\nexport default i18n;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Conmutador de idioma<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora definimos un conmutador de idioma:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import logo from '.\/logo.svg';\nimport '.\/App.css';\nimport { useTranslation, Trans } from 'react-i18next';\n\nconst lngs = {\n  en: { nativeName: 'English' },\n  de: { nativeName: 'Deutsch' }\n};\n\nfunction App() {\n  const { t, i18n } = useTranslation();\n\n  return (\n    &lt;div className=\"App\">\n      &lt;header className=\"App-header\">\n        &lt;img src={logo} className=\"App-logo\" alt=\"logo\" \/>\n        &lt;div>\n          {Object.keys(lngs).map((lng) => (\n            &lt;button key={lng} style={{ fontWeight: i18n.resolvedLanguage === lng ? 'bold' : 'normal' }} type=\"submit\" onClick={() => i18n.changeLanguage(lng)}>\n              {lngs[lng].nativeName}\n            &lt;\/button>\n          ))}\n        &lt;\/div>\n        &lt;p>\n          &lt;Trans i18nKey=\"description.part1\">\n            Edit &lt;code>src\/App.js&lt;\/code> and save to reload.\n          &lt;\/Trans>\n        &lt;\/p>\n        &lt;a\n          className=\"App-link\"\n          href=\"https:\/\/reactjs.org\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          {t('description.part2')}\n        &lt;\/a>\n      &lt;\/header>\n    &lt;\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Y tambi\u00e9n agregamos algunas traducciones para el nuevo idioma:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport LanguageDetector from 'i18next-browser-languagedetector';\n\ni18n\n  \/\/ detect user language\n  \/\/ learn more: https:\/\/github.com\/i18next\/i18next-browser-languageDetector\n  .use(LanguageDetector)\n  \/\/ pass the i18n instance to react-i18next.\n  .use(initReactI18next)\n  \/\/ init i18next\n  \/\/ for all options read: https:\/\/www.i18next.com\/overview\/configuration-options\n  .init({\n    debug: true,\n    fallbackLng: 'en',\n    interpolation: {\n      escapeValue: false, \/\/ not needed for react as it escapes by default\n    },\n    resources: {\n      en: {\n        translation: {\n          description: {\n            part1: 'Edit &lt;1>src\/App.js&lt;\/1> and save to reload.',\n            part2: 'Learn React'\n          }\n        }\n      },\n      de: {\n        translation: {\n          description: {\n            part1: '\u00c4ndere &lt;1>src\/App.js&lt;\/1> und speichere um neu zu laden.',\n            part2: 'Lerne React'\n          }\n        }\n      }\n    }\n  });\n\nexport default i18n;\n<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--9-khAqp7--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/nati88kes3cunyloe14u.jpg\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--9-khAqp7--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/nati88kes3cunyloe14u.jpg\" alt=\"\"\/><\/a><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\ud83e\udd73 Genial, \u00a1acabas de crear tu primer conmutador de idiomas!<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gracias a&nbsp;<a href=\"https:\/\/github.com\/i18next\/i18next-browser-languageDetector\">i18next-browser-languagedetector<\/a> ahora intenta detectar el idioma del navegador y autom\u00e1ticamente usa ese idioma si le proporcionaste las traducciones. El idioma seleccionado manualmente en el conmutador de idioma se mantiene en el almacenamiento local; la pr\u00f3xima vez que alguien visite la p\u00e1gina, ese idioma se utilizar\u00e1 como idioma preferido.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Interpolaci\u00f3n y Pluralizaci\u00f3n<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">i18next va m\u00e1s all\u00e1 de proporcionar las caracter\u00edsticas est\u00e1ndar de i18n.<br>Pero seguro que es capaz de manejar&nbsp;<a href=\"https:\/\/www.i18next.com\/translation-function\/plurals\">plurales<\/a>&nbsp;e&nbsp;<a href=\"https:\/\/www.i18next.com\/translation-function\/interpolation\">interpolaciones<\/a>&nbsp;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Contemos cada vez que se cambia el idioma:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import logo from '.\/logo.svg';\nimport '.\/App.css';\nimport { useTranslation, Trans } from 'react-i18next';\nimport { useState } from 'react';\n\nconst lngs = {\n  en: { nativeName: 'English' },\n  de: { nativeName: 'Deutsch' }\n};\n\nfunction App() {\n  const { t, i18n } = useTranslation();\n  const [count, setCounter] = useState(0);\n\n  return (\n    &lt;div className=\"App\">\n      &lt;header className=\"App-header\">\n        &lt;img src={logo} className=\"App-logo\" alt=\"logo\" \/>\n        &lt;div>\n          {Object.keys(lngs).map((lng) => (\n            &lt;button key={lng} style={{ fontWeight: i18n.resolvedLanguage === lng ? 'bold' : 'normal' }} type=\"submit\" onClick={() => {\n              i18n.changeLanguage(lng);\n              setCounter(count + 1);\n            }}>\n              {lngs[lng].nativeName}\n            &lt;\/button>\n          ))}\n        &lt;\/div>\n        &lt;p>\n          &lt;i>{t('counter', { count })}&lt;\/i>\n        &lt;\/p>\n        &lt;p>\n          &lt;Trans i18nKey=\"description.part1\">\n            Edit &lt;code>src\/App.js&lt;\/code> and save to reload.\n          &lt;\/Trans>\n        &lt;\/p>\n        &lt;a\n          className=\"App-link\"\n          href=\"https:\/\/reactjs.org\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          {t('description.part2')}\n        &lt;\/a>\n      &lt;\/header>\n    &lt;\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">&#8230;y ampliando los recursos de traducci\u00f3n:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport LanguageDetector from 'i18next-browser-languagedetector';\n\ni18n\n  \/\/ detect user language\n  \/\/ learn more: https:\/\/github.com\/i18next\/i18next-browser-languageDetector\n  .use(LanguageDetector)\n  \/\/ pass the i18n instance to react-i18next.\n  .use(initReactI18next)\n  \/\/ init i18next\n  \/\/ for all options read: https:\/\/www.i18next.com\/overview\/configuration-options\n  .init({\n    debug: true,\n    fallbackLng: 'en',\n    interpolation: {\n      escapeValue: false, \/\/ not needed for react as it escapes by default\n    },\n    resources: {\n      en: {\n        translation: {\n          description: {\n            part1: 'Edit &lt;1>src\/App.js&lt;\/1> and save to reload.',\n            part2: 'Learn React'\n          },\n          counter_one: 'Changed language just once',\n          counter_other: 'Changed language already {{count}} times'\n        }\n      },\n      de: {\n        translation: {\n          description: {\n            part1: '\u00c4ndere &lt;1>src\/App.js&lt;\/1> und speichere um neu zu laden.',\n            part2: 'Lerne React'\n          },\n          counter_one: 'Die Sprache wurde erst ein mal gewechselt',\n          counter_other: 'Die Sprache wurde {{count}} mal gewechselt'\n        }\n      }\n    }\n  });\n\nexport default i18n;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Seg\u00fan el valor de conteo, i18next elegir\u00e1 la forma plural correcta.<br>+ info sobre <a href=\"https:\/\/www.i18next.com\/translation-function\/plurals\">pluralizaci\u00f3n<\/a> e <a href=\"https:\/\/www.i18next.com\/translation-function\/interpolation\">interpolaci\u00f3n<\/a>&nbsp;en la&nbsp;<a href=\"https:\/\/www.i18next.com\/\">documentaci\u00f3n oficial de i18next<\/a>&nbsp;.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--nP9VNAcL--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/oea8k15w9c6fimylzz0y.jpg\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--nP9VNAcL--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/oea8k15w9c6fimylzz0y.jpg\" alt=\"Texto alternativo\"\/><\/a><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\ud83d\udca1 i18next tambi\u00e9n puede manejar idiomas con m\u00faltiples formas plurales, como el \u00e1rabe:<\/em><br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ translation resources:\n{\n  \"key_0\": \"zero\",\n  \"key_1\": \"singular\",\n  \"key_2\": \"two\",\n  \"key_3\": \"few\",\n  \"key_4\": \"many\",\n  \"key_5\": \"other\"\n}\n\n\/\/ usage:\nt('key', {count: 0}); \/\/ -> \"zero\"\nt('key', {count: 1}); \/\/ -> \"singular\"\nt('key', {count: 2}); \/\/ -> \"two\"\nt('key', {count: 3}); \/\/ -> \"few\"\nt('key', {count: 4}); \/\/ -> \"few\"\nt('key', {count: 5}); \/\/ -> \"few\"\nt('key', {count: 11}); \/\/ -> \"many\"\nt('key', {count: 99}); \/\/ -> \"many\"\nt('key', {count: 100}); \/\/ -> \"other\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Formateo<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora, veamos c\u00f3mo podemos usar diferentes formatos de fecha con la ayuda de&nbsp;<a href=\"https:\/\/www.i18next.com\/\">i18next<\/a>&nbsp;y&nbsp;<a href=\"https:\/\/moment.github.io\/luxon\">Luxon<\/a>&nbsp;para manejar la fecha y la hora.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code><span style=\"background-color:#eeeeee\" class=\"background-color\">npm install luxon<\/span><\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nos gusta tener un pie de p\u00e1gina que muestre la fecha actual:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import '.\/Footer.css';\n\nconst Footer = ({ t }) => (\n  &lt;div className=\"Footer\">\n    &lt;div>{t('footer.date', { date: new Date() })}&lt;\/div>\n  &lt;\/div>\n);\n\nexport default Footer;\n\n\/\/ imported in our App.js and used like this\n\/\/ &lt;Footer t={t} \/>\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Importamos luxon y definimos una funci\u00f3n de formato, como se documenta en la <a href=\"https:\/\/www.i18next.com\/translation-function\/formatting\">documentaci\u00f3n,<\/a> y agregamos la nueva clave de traducci\u00f3n:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport LanguageDetector from 'i18next-browser-languagedetector';\nimport { DateTime } from 'luxon';\n\ni18n\n  \/\/ detect user language\n  \/\/ learn more: https:\/\/github.com\/i18next\/i18next-browser-languageDetector\n  .use(LanguageDetector)\n  \/\/ pass the i18n instance to react-i18next.\n  .use(initReactI18next)\n  \/\/ init i18next\n  \/\/ for all options read: https:\/\/www.i18next.com\/overview\/configuration-options\n  .init({\n    debug: true,\n    fallbackLng: 'en',\n    interpolation: {\n      escapeValue: false, \/\/ not needed for react as it escapes by default\n      \/\/ format: (value, format, lng) => { \/\/ legacy usage\n      \/\/   if (value instanceof Date) {\n      \/\/     return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format])\n      \/\/   }\n      \/\/   return value;\n      \/\/ }\n    },\n    resources: {\n      en: {\n        translation: {\n          description: {\n            part1: 'Edit &lt;1>src\/App.js&lt;\/1> and save to reload.',\n            part2: 'Learn React'\n          },\n          counter_one: 'Changed language just once',\n          counter_other: 'Changed language already {{count}} times',\n          footer: {\n            date: 'Today is {{date, DATE_HUGE}}'\n          }\n        }\n      },\n      de: {\n        translation: {\n          description: {\n            part1: '\u00c4ndere &lt;1>src\/App.js&lt;\/1> und speichere um neu zu laden.',\n            part2: 'Lerne React'\n          },\n          counter_one: 'Die Sprache wurde erst ein mal gewechselt',\n          counter_other: 'Die Sprache wurde {{count}} mal gewechselt',\n          footer: {\n            date: 'Heute ist {{date, DATE_HUGE}}'\n          }\n        }\n      }\n    }\n  });\n\n\/\/ new usage\ni18n.services.formatter.add('DATE_HUGE', (value, lng, options) => {\n  return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime.DATE_HUGE)\n});\n\nexport default i18n;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\ud83d\ude0e Genial, \u00a1ahora tenemos un formato de fecha espec\u00edfico para cada idioma!<\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--p7HvUXb---\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/hygxtoyvd4sq78eyq0d9.jpg\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--p7HvUXb---\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/hygxtoyvd4sq78eyq0d9.jpg\" alt=\"\"\/><\/a><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Ingl\u00e9s:<br><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--1iS_HeOk--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/5ojw60veamph3zryhtmq.jpg\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--1iS_HeOk--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/5ojw60veamph3zryhtmq.jpg\" alt=\"\"\/><\/a><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Alem\u00e1n:<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Contexto<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u00bfQu\u00e9 pasa con un mensaje de saludo espec\u00edfico basado en la hora del d\u00eda actual?\u00a0es decir, ma\u00f1ana, tarde, etc.<br>Esto es posible gracias a la funci\u00f3n <a href=\"https:\/\/www.i18next.com\/translation-function\/context\">context<\/a>\u00a0de i18next.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos a crear una funci\u00f3n getGreetingTime y usar el resultado como informaci\u00f3n de contexto para nuestra traducci\u00f3n de pie de p\u00e1gina:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { DateTime } from 'luxon';\nimport '.\/Footer.css';\n\nconst getGreetingTime = (d = DateTime.now()) => {\n    const split_afternoon = 12; \/\/ 24hr time to split the afternoon\n    const split_evening = 17; \/\/ 24hr time to split the evening\n    const currentHour = parseFloat(d.toFormat('hh'));\n\n    if (currentHour >= split_afternoon &amp;&amp; currentHour &lt;= split_evening) {\n        return 'afternoon';\n    } else if (currentHour >= split_evening) {\n        return 'evening';\n  }\n    return 'morning';\n}\n\nconst Footer = ({ t }) => (\n  &lt;div className=\"Footer\">\n    &lt;div>{t('footer.date', { date: new Date(), context: getGreetingTime() })}&lt;\/div>\n  &lt;\/div>\n);\n\nexport default Footer;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Agregamos algunas claves de traducci\u00f3n espec\u00edficas del contexto:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport LanguageDetector from 'i18next-browser-languagedetector';\nimport Backend from 'i18next-http-backend';\nimport { DateTime } from 'luxon';\n\ni18n\n  \/\/ i18next-http-backend\n  \/\/ loads translations from your server\n  \/\/ https:\/\/github.com\/i18next\/i18next-http-backend\n  .use(Backend)\n  \/\/ detect user language\n  \/\/ learn more: https:\/\/github.com\/i18next\/i18next-browser-languageDetector\n  .use(LanguageDetector)\n  \/\/ pass the i18n instance to react-i18next.\n  .use(initReactI18next)\n  \/\/ init i18next\n  \/\/ for all options read: https:\/\/www.i18next.com\/overview\/configuration-options\n  .init({\n    debug: true,\n    fallbackLng: 'en',\n    interpolation: {\n      escapeValue: false, \/\/ not needed for react as it escapes by default\n      \/\/ format: (value, format, lng) => { \/\/ legacy usage\n      \/\/   if (value instanceof Date) {\n      \/\/     return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format])\n      \/\/   }\n      \/\/   return value;\n      \/\/ }\n    },\n    resources: {\n      en: {\n        translation: {\n          description: {\n            part1: 'Edit &lt;1>src\/App.js&lt;\/1> and save to reload.',\n            part2: 'Learn React'\n          },\n          counter_one: 'Changed language just once',\n          counter_other: 'Changed language already {{count}} times',\n          footer: {\n            date: 'Today is {{date, DATE_HUGE}}',\n            date_morning: 'Good morning! Today is {{date, DATE_HUGE}} | Have a nice day!',\n            date_afternoon: 'Good afternoon! It\\'s {{date, DATE_HUGE}}',\n            date_evening: 'Good evening! Today was the {{date, DATE_HUGE}}'\n          }\n        }\n      },\n      de: {\n        translation: {\n          description: {\n            part1: '\u00c4ndere &lt;1>src\/App.js&lt;\/1> und speichere um neu zu laden.',\n            part2: 'Lerne React'\n          },\n          counter_one: 'Die Sprache wurde erst ein mal gewechselt',\n          counter_other: 'Die Sprache wurde {{count}} mal gewechselt',\n          footer: {\n            date: 'Heute ist {{date, DATE_HUGE}}',\n            date_morning: 'Guten Morgen! Heute ist {{date, DATE_HUGE}} | W\u00fcnsche einen sch\u00f6nen Tag!',\n            date_afternoon: 'Guten Tag! Es ist {{date, DATE_HUGE}}',\n            date_evening: 'Guten Abend! Heute war {{date, DATE_HUGE}}'\n          }\n        }\n      }\n    }\n  });\n\n\/\/ new usage\ni18n.services.formatter.add('DATE_HUGE', (value, lng, options) => {\n  return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime.DATE_HUGE)\n});\n\nexport default i18n;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\ud83d\ude01 \u00a1S\u00ed, funciona!<\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--GKcZAU4f--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/5t3y33huyvgb2bd2523f.jpg\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--GKcZAU4f--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/5t3y33huyvgb2bd2523f.jpg\" alt=\"\"\/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Separar las traducciones del c\u00f3digo<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tener las traducciones en nuestro archivo i18n.js funciona, pero no es adecuado para trabajar con traductores.<br>Es mucho mejor separar las traducciones del c\u00f3digo y colocarlas en archivos json dedicados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Debido a que esta es una aplicaci\u00f3n web,&nbsp;<a href=\"https:\/\/github.com\/i18next\/i18next-http-backend\">i18next-http-backend<\/a>&nbsp;nos ayudar\u00e1 a hacerlo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code><span style=\"background-color:#eeeeee\" class=\"background-color\">npm install i18next-http-backend<\/span><\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Movemos las traducciones a la carpeta p\u00fablica:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--tlk8mUTz--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/b7ypguazy354fj68vt0d.jpg\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--tlk8mUTz--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/b7ypguazy354fj68vt0d.jpg\" alt=\"\"\/><\/a><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Adaptamos el archivo i18n.js para usar el i18next-http-backend:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport LanguageDetector from 'i18next-browser-languagedetector';\nimport Backend from 'i18next-http-backend';\nimport { DateTime } from 'luxon';\n\ni18n\n  \/\/ i18next-http-backend\n  \/\/ loads translations from your server\n  \/\/ https:\/\/github.com\/i18next\/i18next-http-backend\n  .use(Backend)\n  \/\/ detect user language\n  \/\/ learn more: https:\/\/github.com\/i18next\/i18next-browser-languageDetector\n  .use(LanguageDetector)\n  \/\/ pass the i18n instance to react-i18next.\n  .use(initReactI18next)\n  \/\/ init i18next\n  \/\/ for all options read: https:\/\/www.i18next.com\/overview\/configuration-options\n  .init({\n    debug: true,\n    fallbackLng: 'en',\n    interpolation: {\n      escapeValue: false, \/\/ not needed for react as it escapes by default\n      \/\/ format: (value, format, lng) => { \/\/ legacy usage\n      \/\/   if (value instanceof Date) {\n      \/\/     return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format])\n      \/\/   }\n      \/\/   return value;\n      \/\/ }\n    }\n  });\n\n\/\/ new usage\ni18n.services.formatter.add('DATE_HUGE', (value, lng, options) => {\n  return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime.DATE_HUGE)\n});\n\nexport default i18n;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora las traducciones se cargan de forma as\u00edncrona, as\u00ed que aseg\u00farate de envolver tu aplicaci\u00f3n con un componente <a href=\"https:\/\/reactjs.org\/docs\/react-api.html#reactsuspense\">Suspense<\/a>\u00a0para evitar este error:<code><span style=\"background-color:#eeeeee\" class=\"background-color\">Uncaught Error: App suspended while rendering, but no fallback UI was specified.<\/span><\/code><br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Suspense } from 'react';\n\nfunction App() {\n  \/\/ your app's code...\n}\n\n\/\/ here app catches the suspense from page in case translations are not yet loaded\nexport default function WrappedApp() {\n  return (\n    &lt;Suspense fallback=\"...is loading\">\n      &lt;App \/>\n    &lt;\/Suspense>\n  );\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora tu aplicaci\u00f3n se ve igual, pero tus traducciones est\u00e1n separadas.<br>Si deseas adoptar un nuevo idioma, simplemente crea una nueva carpeta y un nuevo archivo json de traducci\u00f3n.<br>Esto te permite enviar las traducciones a traductores externos.<br>O si est\u00e1s trabajando con un sistema de gesti\u00f3n de traducci\u00f3n, simplemente puedes <a href=\"https:\/\/github.com\/locize\/react-tutorial#use-the-locize-cli\">sincronizar los archivos con un cli<\/a>&nbsp;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\ud83d\udca1 por cierto: tambi\u00e9n puedes tener <a href=\"https:\/\/react.i18next.com\/guides\/multiple-translation-files\">varios archivos de traducci\u00f3n<\/a>&nbsp;gracias a la funci\u00f3n de espacios de&nbsp;<a href=\"https:\/\/www.i18next.com\/principles\/namespaces\">nombres<\/a>&nbsp;de i18next<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\ud83e\uddd1\u200d\ud83d\udcbb El c\u00f3digo de esta primera parte se puede encontrar&nbsp;<a href=\"https:\/\/github.com\/locize\/react-i18next-example-app\/tree\/i18next\">aqu\u00ed<\/a>&nbsp;.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mejor gesti\u00f3n de la traducci\u00f3n<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Al enviar las traducciones a algunos traductores o agencias de traducci\u00f3n, tienes m\u00e1s control y un contacto directo con ellos. Pero esto tambi\u00e9n significa m\u00e1s trabajo&#8230;.<br>Esta es la forma tradicional de traducir una App. Pero ten en cuenta que enviar archivos siempre crea una sobrecarga.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>\u00bfExiste una mejor opci\u00f3n?<\/p><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">\u00a1Con seguridad!<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">i18next ayuda a traducir la aplicaci\u00f3n, y esto es genial, pero hay m\u00e1s.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u00bfC\u00f3mo integrar un servicio\/agencia de traducci\u00f3n?<\/li><li>\u00bfC\u00f3mo realizar un seguimiento del contenido nuevo o eliminado?<\/li><li>\u00bfC\u00f3mo gestionar el control de versiones?<\/li><li>\u00bfC\u00f3mo implementar cambios de traducci\u00f3n si la app no est\u00e1 completa?<\/li><li>y mucho m\u00e1s&#8230;<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Buscas algo como esto\u2753<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/docs.locize.com\/integration\/instrumenting-your-code#i-18-next\">F\u00e1cil de integrar<\/a><\/li><li>\u00bfDespliegue continuo?&nbsp;<a href=\"https:\/\/locize.com\/how-it-works.html#continouslocalization\">\u00a1 Localizaci\u00f3n continua<\/a>&nbsp;!<\/li><li>F\u00e1cil administraci\u00f3n de archivos de traducci\u00f3n <\/li><li><a href=\"https:\/\/docs.locize.com\/guides-tips-and-tricks\/working-with-translators\/localistars\">Solicitar traducciones profesionales<\/a><\/li><li>An\u00e1lisis y Estad\u00edsticas<\/li><li><a href=\"https:\/\/docs.locize.com\/whats-inside\/cdn-content-delivery-network\">Benef\u00edciese de nuestra red de entrega de contenido (CDN)<\/a><\/li><li><a href=\"https:\/\/docs.locize.com\/more\/versioning\">Versiones de traducciones<\/a><\/li><li><a href=\"https:\/\/docs.locize.com\/whats-inside\/auto-machine-translation\">Traducci\u00f3n autom\u00e1tica y bajo demanda<\/a><\/li><li><a href=\"https:\/\/docs.locize.com\/more\/general-questions\/how-is-locize-different-from-the-alternatives#service-lock-in\">Sin riesgos: lleva tus datos contigo<\/a><\/li><li><a href=\"https:\/\/locize.com\/pricing.html\">Precios transparentes y justos<\/a><\/li><li>y mucho m\u00e1s&#8230;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--TmXMMrTD--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/4swz621j09hpzxvoaool.jpg\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--TmXMMrTD--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/4swz621j09hpzxvoaool.jpg\" alt=\"\"\/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfC\u00f3mo se ve esto?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Primero debes registrarte en <a href=\"https:\/\/locize.app\/register\">locize<\/a>&nbsp;e&nbsp;<a href=\"https:\/\/docs.locize.com\/integration\/getting-started\/create-a-user-account\">iniciar sesi\u00f3n<\/a>&nbsp;.<br>Luego&nbsp;<a href=\"https:\/\/docs.locize.com\/integration\/getting-started\/add-a-new-project\">crea un nuevo proyecto<\/a> en locize y agrega tus traducciones. Puedes agregar tus traducciones usando la <a href=\"https:\/\/github.com\/locize\/react-tutorial#use-the-locize-cli\">cli<\/a>&nbsp;o&nbsp;<a href=\"https:\/\/docs.locize.com\/more\/general-questions\/how-to-import-translations-from-a-file\">importando los archivos json individuales<\/a>&nbsp;o a trav\u00e9s de la&nbsp;<a href=\"https:\/\/docs.locize.com\/integration\/api#update-remove-translations\">API<\/a>&nbsp;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hecho esto, vamos a reemplazar&nbsp;<a href=\"https:\/\/github.com\/i18next\/i18next-http-backend\">i18next-http-backend<\/a>&nbsp;con&nbsp;<a href=\"https:\/\/github.com\/locize\/i18next-locize-backend\">i18next-locize-backend<\/a>&nbsp;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code><span style=\"background-color:#eeeeee\" class=\"background-color\">npm install i18next-locize-backend<\/span><\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Despu\u00e9s de haber importado las traducciones para localizar, elimina la carpeta locales:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--k9uJCxx4--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/bb1flgntpzob5ox20som.jpg\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--k9uJCxx4--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/bb1flgntpzob5ox20som.jpg\" alt=\"\"\/><\/a><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Adapta el archivo i18n.js para usar i18next-locize-backend y aseg\u00farate de copiar el ID del proyecto y la clave API desde tu proyecto de localizaci\u00f3n:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport LanguageDetector from 'i18next-browser-languagedetector';\nimport Backend from 'i18next-locize-backend';\nimport { DateTime } from 'luxon';\n\nconst locizeOptions = {\n  projectId: '0bbc223a-9aba-4a90-ab93-ab9d7bf7f780',\n  apiKey: 'aaad4141-54ba-4625-ae37-657538fe29e7', \/\/ YOU should not expose your apps API key to production!!!\n  referenceLng: 'en',\n};\n\ni18n\n  \/\/ i18next-locize-backend\n  \/\/ loads translations from your project, saves new keys to it (saveMissing: true)\n  \/\/ https:\/\/github.com\/locize\/i18next-locize-backend\n  .use(Backend)\n  \/\/ detect user language\n  \/\/ learn more: https:\/\/github.com\/i18next\/i18next-browser-languageDetector\n  .use(LanguageDetector)\n  \/\/ pass the i18n instance to react-i18next.\n  .use(initReactI18next)\n  \/\/ init i18next\n  \/\/ for all options read: https:\/\/www.i18next.com\/overview\/configuration-options\n  .init({\n    debug: true,\n    fallbackLng: 'en',\n    interpolation: {\n      escapeValue: false, \/\/ not needed for react as it escapes by default\n      \/\/ format: (value, format, lng) => { \/\/ legacy usage\n      \/\/   if (value instanceof Date) {\n      \/\/     return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format])\n      \/\/   }\n      \/\/   return value;\n      \/\/ }\n    },\n    backend: locizeOptions\n  });\n\n\/\/ new usage\ni18n.services.formatter.add('DATE_HUGE', (value, lng, options) => {\n  return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime.DATE_HUGE)\n});\n\nexport default i18n;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/locize\/i18next-locize-backend\">i18next-locize-backend<\/a>&nbsp;ofrece una funcionalidad para recuperar los idiomas disponibles directamente desde locize, us\u00e9mosla:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import logo from '.\/logo.svg';\nimport '.\/App.css';\nimport { useTranslation, Trans } from 'react-i18next';\nimport { useState, Suspense, useEffect } from 'react';\nimport Footer from '.\/Footer'\n\nfunction App() {\n  const { t, i18n } = useTranslation();\n  const [count, setCounter] = useState(0);\n\n  const [lngs, setLngs] = useState({ en: { nativeName: 'English' }});\n\n  useEffect(() => {\n    i18n.services.backendConnector.backend.getLanguages((err, ret) => {\n      if (err) return \/\/ TODO: handle err...\n      setLngs(ret);\n    });\n  }, []);\n\n  return (\n    &lt;div className=\"App\">\n      &lt;header className=\"App-header\">\n        &lt;img src={logo} className=\"App-logo\" alt=\"logo\" \/>\n        &lt;div>\n          {Object.keys(lngs).map((lng) => (\n            &lt;button key={lng} style={{ fontWeight: i18n.resolvedLanguage === lng ? 'bold' : 'normal' }} type=\"submit\" onClick={() => {\n              i18n.changeLanguage(lng);\n              setCounter(count + 1);\n            }}>\n              {lngs[lng].nativeName}\n            &lt;\/button>\n          ))}\n        &lt;\/div>\n        &lt;p>\n          &lt;i>{t('counter', { count })}&lt;\/i>\n        &lt;\/p>\n        &lt;p>\n          &lt;Trans i18nKey=\"description.part1\">\n            Edit &lt;code>src\/App.js&lt;\/code> and save to reload.\n          &lt;\/Trans>\n        &lt;\/p>\n        &lt;a\n          className=\"App-link\"\n          href=\"https:\/\/reactjs.org\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          {t('description.part2')}\n        &lt;\/a>\n      &lt;\/header>\n      &lt;Footer t={t} \/>\n    &lt;\/div>\n  );\n}\n\n\/\/ here app catches the suspense from page in case translations are not yet loaded\nexport default function WrappedApp() {\n  return (\n    &lt;Suspense fallback=\"...is loading\">\n      &lt;App \/>\n    &lt;\/Suspense>\n  );\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Guardar traducciones faltantes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Gracias al uso de la funcionalidad \u00a0<a href=\"https:\/\/www.i18next.com\/overview\/configuration-options#missing-keys\">saveMissing<\/a>, se agregan nuevas claves para localizar autom\u00e1ticamente, mientras se desarrolla la aplicaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Simplemente pasa <code><span style=\"background-color:#eeeeee\" class=\"background-color\">saveMissing: true<\/span><\/code>en las opciones de i18next:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport LanguageDetector from 'i18next-browser-languagedetector';\nimport Backend from 'i18next-locize-backend';\nimport { DateTime } from 'luxon';\n\nconst locizeOptions = {\n  projectId: '0bbc223a-9aba-4a90-ab93-ab9d7bf7f780',\n  apiKey: 'aaad4141-54ba-4625-ae37-657538fe29e7', \/\/ YOU should not expose your apps API key to production!!!\n  referenceLng: 'en',\n};\n\ni18n\n  \/\/ i18next-locize-backend\n  \/\/ loads translations from your project, saves new keys to it (saveMissing: true)\n  \/\/ https:\/\/github.com\/locize\/i18next-locize-backend\n  .use(Backend)\n  \/\/ detect user language\n  \/\/ learn more: https:\/\/github.com\/i18next\/i18next-browser-languageDetector\n  .use(LanguageDetector)\n  \/\/ pass the i18n instance to react-i18next.\n  .use(initReactI18next)\n  \/\/ init i18next\n  \/\/ for all options read: https:\/\/www.i18next.com\/overview\/configuration-options\n  .init({\n    debug: true,\n    fallbackLng: 'en',\n    interpolation: {\n      escapeValue: false, \/\/ not needed for react as it escapes by default\n      \/\/ format: (value, format, lng) => { \/\/ legacy usage\n      \/\/   if (value instanceof Date) {\n      \/\/     return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format])\n      \/\/   }\n      \/\/   return value;\n      \/\/ }\n    },\n    backend: locizeOptions,\n    saveMissing: true\n  });\n\n\/\/ new usage\ni18n.services.formatter.add('DATE_HUGE', (value, lng, options) => {\n  return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime.DATE_HUGE)\n});\n\nexport default i18n;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Cada vez que se use una nueva clave, se enviar\u00e1 a localizar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es decir:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div>{t('new.key', 'this will be added automatically')}&lt;\/div>\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">dar\u00e1 como resultado una ubicaci\u00f3n como esta:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--hXntABsx--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/mc3wk09plpn70hd6nsi1.jpg\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--hXntABsx--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/mc3wk09plpn70hd6nsi1.jpg\" alt=\"\"\/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udc40 A\u00fan hay m\u00e1s&#8230;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Gracias al complemento\u00a0<a href=\"https:\/\/github.com\/locize\/locize-lastused\">locize-lastused<\/a>, podr\u00e1s\u00a0<a href=\"https:\/\/docs.locize.com\/guides-tips-and-tricks\/unused-translations\">encontrar y filtrar en locize qu\u00e9 teclas se usan o no<\/a>\u00a0.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Con la ayuda del complemento\u00a0<a href=\"https:\/\/github.com\/locize\/locize\">locize<\/a>, podr\u00e1s usar tu aplicaci\u00f3n dentro del editor locize <a href=\"https:\/\/docs.locize.com\/more\/incontext-editor\">InContext<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gracias al <a href=\"https:\/\/docs.locize.com\/whats-inside\/auto-machine-translation\">flujo de trabajo<\/a> de traducci\u00f3n autom\u00e1tica automatizada y la <a href=\"https:\/\/www.i18next.com\/overview\/configuration-options#missing-keys\">funcionalidad saveMissing<\/a>, no solo se agregan nuevas claves para localizar autom\u00e1ticamente mientras se desarrolla la aplicaci\u00f3n, sino que tambi\u00e9n se traducen autom\u00e1ticamente a los idiomas de destino mediante traducci\u00f3n autom\u00e1tica.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\u00a1 Mira este\u00a0<a href=\"https:\/\/youtu.be\/VfxBpSXarlU\">video<\/a> para ver el flujo de trabajo de traducci\u00f3n  autom\u00e1tica automatizada!<\/em><\/p>\n\n\n\n<figure><iframe loading=\"lazy\" width=\"710\" height=\"399\" src=\"https:\/\/www.youtube.com\/embed\/VfxBpSXarlU\" allowfullscreen=\"\"><\/iframe><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><code><span style=\"background-color:#eeeeee\" class=\"background-color\">npm install locize-lastused locize<\/span><\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">util\u00edzalos en i18n.js:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport LanguageDetector from 'i18next-browser-languagedetector';\nimport Backend from 'i18next-locize-backend';\nimport LastUsed from 'locize-lastused';\nimport { locizePlugin } from 'locize';\nimport { DateTime } from 'luxon';\n\nconst locizeOptions = {\n  projectId: '0bbc223a-9aba-4a90-ab93-ab9d7bf7f780',\n  apiKey: 'aaad4141-54ba-4625-ae37-657538fe29e7', \/\/ YOU should not expose your apps API key to production!!!\n  referenceLng: 'en',\n};\n\ni18n\n  \/\/ locize-lastused\n  \/\/ sets a timestamp of last access on every translation segment on locize\n  \/\/ -> safely remove the ones not being touched for weeks\/months\n  \/\/ https:\/\/github.com\/locize\/locize-lastused\n  .use(LastUsed)\n  \/\/ locize-editor\n  \/\/ InContext Editor of locize\n  .use(locizePlugin)\n  \/\/ i18next-locize-backend\n  \/\/ loads translations from your project, saves new keys to it (saveMissing: true)\n  \/\/ https:\/\/github.com\/locize\/i18next-locize-backend\n  .use(Backend)\n  \/\/ detect user language\n  \/\/ learn more: https:\/\/github.com\/i18next\/i18next-browser-languageDetector\n  .use(LanguageDetector)\n  \/\/ pass the i18n instance to react-i18next.\n  .use(initReactI18next)\n  \/\/ init i18next\n  \/\/ for all options read: https:\/\/www.i18next.com\/overview\/configuration-options\n  .init({\n    debug: true,\n    fallbackLng: 'en',\n    interpolation: {\n      escapeValue: false, \/\/ not needed for react as it escapes by default\n      \/\/ format: (value, format, lng) => { \/\/ legacy usage\n      \/\/   if (value instanceof Date) {\n      \/\/     return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format])\n      \/\/   }\n      \/\/   return value;\n      \/\/ }\n    },\n    backend: locizeOptions,\n    locizeLastUsed: locizeOptions,\n    saveMissing: true\n  });\n\n\/\/ new usage\ni18n.services.formatter.add('DATE_HUGE', (value, lng, options) => {\n  return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime.DATE_HUGE)\n});\n\nexport default i18n;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/docs.locize.com\/whats-inside\/auto-machine-translation\">Traducci\u00f3n autom\u00e1tica automatizada<\/a>:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--BFgfL2Go--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/ggk14cqolabfihcsxgyi.jpg\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--BFgfL2Go--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/ggk14cqolabfihcsxgyi.jpg\" alt=\"\"\/><\/a><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/dev.to\/adrai\/(https:\/\/docs.locize.com\/guides-tips-and-tricks\/unused-translations)\">\u00daltimo filtro de traducci\u00f3n utilizado<\/a>&nbsp;:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--pcu4mdAY--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/cn7yj68s5a2x181pwks6.jpg\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--pcu4mdAY--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/cn7yj68s5a2x181pwks6.jpg\" alt=\"\"\/><\/a><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/docs.locize.com\/more\/incontext-editor\">Editor en contexto<\/a>&nbsp;:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--mWig9u7P--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/b85nmyt3idgr4qmsbsz6.jpg\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--mWig9u7P--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/b85nmyt3idgr4qmsbsz6.jpg\" alt=\"\"\/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udce6 Preparaci\u00f3n para producci\u00f3n \ud83d\ude80<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora, preparamos la aplicaci\u00f3n para\u00a0<a href=\"https:\/\/docs.locize.com\/guides-tips-and-tricks\/going-production\">pasar a producci\u00f3n<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Primero en locize, crea una versi\u00f3n dedicada para producci\u00f3n. No habilites la publicaci\u00f3n autom\u00e1tica para esa versi\u00f3n, publ\u00edcala manualmente o a trav\u00e9s de <a href=\"https:\/\/docs.locize.com\/integration\/api#publish-version\">API<\/a>\u00a0o\u00a0<a href=\"https:\/\/github.com\/locize\/locize-cli#publish-version\">CLI<\/a>\u00a0.<br>Por \u00faltimo,\u00a0<a href=\"https:\/\/docs.locize.com\/more\/caching\">habilita Cache-Control max-age<\/a>\u200b para esa versi\u00f3n de producci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hagamos uso de la&nbsp;<a href=\"https:\/\/create-react-app.dev\/docs\/adding-custom-environment-variables\/\">funci\u00f3n de entorno de react-scripts<\/a>&nbsp;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos a crear un archivo de entorno predeterminado y uno para desarrollo y otro para producci\u00f3n:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">.env:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>SKIP_PREFLIGHT_CHECK=true\n\nREACT_APP_VERSION=$npm_package_version\n\n# locize\nREACT_APP_LOCIZE_PROJECTID=0bbc223a-9aba-4a90-ab93-ab9d7bf7f780\nREACT_APP_LOCIZE_REFLNG=en\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">.env.development:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>REACT_APP_LOCIZE_VERSION=latest\nREACT_APP_LOCIZE_APIKEY=aaad4141-54ba-4625-ae37-657538fe29e7\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">.env.production:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>REACT_APP_LOCIZE_VERSION=production\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora adaptemos el archivo i18n.js:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport LanguageDetector from 'i18next-browser-languagedetector';\nimport Backend from 'i18next-locize-backend';\nimport LastUsed from 'locize-lastused';\nimport { locizePlugin } from 'locize';\nimport { DateTime } from 'luxon';\n\nconst isProduction = process.env.NODE_ENV === 'production';\n\nconst locizeOptions = {\n  projectId: process.env.REACT_APP_LOCIZE_PROJECTID,\n  apiKey: process.env.REACT_APP_LOCIZE_APIKEY, \/\/ YOU should not expose your apps API key to production!!!\n  referenceLng: process.env.REACT_APP_LOCIZE_REFLNG,\n  version: process.env.REACT_APP_LOCIZE_VERSION\n};\n\nif (!isProduction) {\n  \/\/ locize-lastused\n  \/\/ sets a timestamp of last access on every translation segment on locize\n  \/\/ -> safely remove the ones not being touched for weeks\/months\n  \/\/ https:\/\/github.com\/locize\/locize-lastused\n  i18n.use(LastUsed);\n}\n\ni18n\n  \/\/ locize-editor\n  \/\/ InContext Editor of locize\n  .use(locizePlugin)\n  \/\/ i18next-locize-backend\n  \/\/ loads translations from your project, saves new keys to it (saveMissing: true)\n  \/\/ https:\/\/github.com\/locize\/i18next-locize-backend\n  .use(Backend)\n  \/\/ detect user language\n  \/\/ learn more: https:\/\/github.com\/i18next\/i18next-browser-languageDetector\n  .use(LanguageDetector)\n  \/\/ pass the i18n instance to react-i18next.\n  .use(initReactI18next)\n  \/\/ init i18next\n  \/\/ for all options read: https:\/\/www.i18next.com\/overview\/configuration-options\n  .init({\n    debug: true,\n    fallbackLng: 'en',\n    interpolation: {\n      escapeValue: false, \/\/ not needed for react as it escapes by default\n      \/\/ format: (value, format, lng) => { \/\/ legacy usage\n      \/\/   if (value instanceof Date) {\n      \/\/     return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format])\n      \/\/   }\n      \/\/   return value;\n      \/\/ }\n    },\n    backend: locizeOptions,\n    locizeLastUsed: locizeOptions,\n    saveMissing: !isProduction \/\/ you should not use saveMissing in production\n  });\n\n\/\/ new usage\ni18n.services.formatter.add('DATE_HUGE', (value, lng, options) => {\n  return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime.DATE_HUGE)\n});\n\nexport default i18n;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora, durante el desarrollo, continuar\u00e1 guardando las claves que faltan y haciendo uso de la \u00faltima funci\u00f3n utilizada. => npm run start <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Y en el entorno de producci\u00f3n, saveMissing y lastused est\u00e1n deshabilitados, y tampoco se expone la clave de API. => npm run build &amp;&amp; npm run serve.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/docs.locize.com\/more\/caching\">Almacenamiento en cach\u00e9<\/a>&nbsp;:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--8_oPfgqJ--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/kinbszgowhcmm1dj3mfk.jpg\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--8_oPfgqJ--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/kinbszgowhcmm1dj3mfk.jpg\" alt=\"\"\/><\/a><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/docs.locize.com\/more\/versioning#merging-versions\">Combinando versiones<\/a>&nbsp;:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--G1n-I9UN--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/y35mdc3v4e8ji6w4h1ke.jpg\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--G1n-I9UN--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/y35mdc3v4e8ji6w4h1ke.jpg\" alt=\"\"\/><\/a><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\ud83e\uddd1\u200d\ud83d\udcbb El c\u00f3digo completo se puede encontrar&nbsp;<a href=\"https:\/\/github.com\/locize\/react-i18next-example-app\">aqu\u00ed<\/a>&nbsp;.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Consulta tambi\u00e9n la <a href=\"https:\/\/www.youtube.com\/watch?v=ds-yEEYP1Ks&amp;t=423s\">parte de integraci\u00f3n del c\u00f3digo<\/a>&nbsp;en este&nbsp;<a href=\"https:\/\/www.youtube.com\/watch?v=ds-yEEYP1Ks\">video de YouTube<\/a>&nbsp;.<\/em><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83c\udf89\ud83e\udd73 Felicidades \ud83c\udf8a\ud83c\udf81<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Espero que hayas aprendido algunas cosas nuevas sobre&nbsp;<a href=\"https:\/\/www.i18next.com\/\">i18next<\/a>,&nbsp;<a href=\"https:\/\/react.i18next.com\/\">la localizaci\u00f3n<\/a>&nbsp;de React.js y&nbsp;<a href=\"https:\/\/locize.com\/\">los flujos de trabajo de localizaci\u00f3n modernos<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si deseas llevar tu proyecto i18n al siguiente nivel, vale la pena probar <a href=\"https:\/\/locize.com\/\">locize<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Los fundadores de\u00a0<a href=\"https:\/\/locize.com\/\">locize<\/a>\u00a0tambi\u00e9n son los creadores de\u00a0<a href=\"https:\/\/www.i18next.com\/\">i18next<\/a> por lo que con el uso de <a href=\"https:\/\/locize.com\/\">locize<\/a>, apoyas directamente el futuro de <a href=\"https:\/\/www.i18next.com\/\">i18next<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-right kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;right&quot;,&quot;id&quot;:&quot;5794&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;Valora este art\u00edculo&quot;,&quot;legend&quot;:&quot;0\\\/5 - (0 votes)&quot;,&quot;size&quot;:&quot;24&quot;,&quot;title&quot;:&quot;C\u00f3mo traducir correctamente una aplicaci\u00f3n React usando i18next&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 0px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 19.2px;\">\n            <span class=\"kksr-muted\">Valora este art\u00edculo<\/span>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"Translation into Spanish of an interesting article by Adriano Raiano, bachelor in computer science, software architect, and founder of locize.com, ","protected":false},"author":8,"featured_media":6076,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[80],"tags":[237,239,232,218],"class_list":["post-5794","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-translations-spanish","tag-app","tag-i18next","tag-react","tag-translation-into-spanish"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.3 - aioseo.com -->\n\t<meta name=\"description\" content=\"Translation into Spanish of an interesting article by Adriano Raiano, bachelor in computer science, software architect, and founder of locize.com,\" \/>\n\t<meta name=\"robots\" content=\"max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n\t<meta name=\"author\" content=\"Mauri\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.ibidem-translations.com\/edu\/translate-react-i18next-app\/\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"IBIDEM TRANSLATIONS EDU |\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"C\u00f3mo traducir correctamente una aplicaci\u00f3n React usando i18next\" \/>\n\t\t<meta property=\"og:description\" content=\"Translation into Spanish of an interesting article by Adriano Raiano, bachelor in computer science, software architect, and founder of locize.com,\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.ibidem-translations.com\/edu\/translate-react-i18next-app\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2022-04-27T09:54:28+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2022-06-06T14:38:38+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"C\u00f3mo traducir correctamente una aplicaci\u00f3n React usando i18next\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Translation into Spanish of an interesting article by Adriano Raiano, bachelor in computer science, software architect, and founder of locize.com,\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/translate-react-i18next-app\\\/#article\",\"name\":\"C\\u00f3mo traducir correctamente una aplicaci\\u00f3n React usando i18next\",\"headline\":\"C\\u00f3mo traducir correctamente una aplicaci\\u00f3n React usando i18next\",\"author\":{\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/author\\\/mau\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/traducir_aplicacion_react-i18next.jpg\",\"width\":1140,\"height\":380,\"caption\":\"Translate react app with i18n\"},\"datePublished\":\"2022-04-27T11:54:28+02:00\",\"dateModified\":\"2022-06-06T16:38:38+02:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/translate-react-i18next-app\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/translate-react-i18next-app\\\/#webpage\"},\"articleSection\":\"Translations into Spanish, APP, i18next, react, translation into spanish\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/translate-react-i18next-app\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/translations-spanish\\\/#listItem\",\"name\":\"Translations into Spanish\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/translations-spanish\\\/#listItem\",\"position\":2,\"name\":\"Translations into Spanish\",\"item\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/translations-spanish\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/translate-react-i18next-app\\\/#listItem\",\"name\":\"C\\u00f3mo traducir correctamente una aplicaci\\u00f3n React usando i18next\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/translate-react-i18next-app\\\/#listItem\",\"position\":3,\"name\":\"C\\u00f3mo traducir correctamente una aplicaci\\u00f3n React usando i18next\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/translations-spanish\\\/#listItem\",\"name\":\"Translations into Spanish\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/#organization\",\"name\":\"IBIDEM TRANSLATIONS EDU\",\"url\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/author\\\/mau\\\/#author\",\"url\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/author\\\/mau\\\/\",\"name\":\"Mauri\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/translate-react-i18next-app\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b7b325afa7a8af8c21ac26bbaac9118b81803ff10d6c403a1b84df7063a874dd?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Mauri\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/translate-react-i18next-app\\\/#webpage\",\"url\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/translate-react-i18next-app\\\/\",\"name\":\"C\\u00f3mo traducir correctamente una aplicaci\\u00f3n React usando i18next\",\"description\":\"Translation into Spanish of an interesting article by Adriano Raiano, bachelor in computer science, software architect, and founder of locize.com,\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/translate-react-i18next-app\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/author\\\/mau\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/author\\\/mau\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/traducir_aplicacion_react-i18next.jpg\",\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/translate-react-i18next-app\\\/#mainImage\",\"width\":1140,\"height\":380,\"caption\":\"Translate react app with i18n\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/translate-react-i18next-app\\\/#mainImage\"},\"datePublished\":\"2022-04-27T11:54:28+02:00\",\"dateModified\":\"2022-06-06T16:38:38+02:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/#website\",\"url\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/\",\"name\":\"IBIDEM TRANSLATIONS EDU\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.ibidem-translations.com\\\/edu\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"C\u00f3mo traducir correctamente una aplicaci\u00f3n React usando i18next","description":"Translation into Spanish of an interesting article by Adriano Raiano, bachelor in computer science, software architect, and founder of locize.com,","canonical_url":"https:\/\/www.ibidem-translations.com\/edu\/translate-react-i18next-app\/","robots":"max-snippet:-1, max-image-preview:large, max-video-preview:-1","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.ibidem-translations.com\/edu\/translate-react-i18next-app\/#article","name":"C\u00f3mo traducir correctamente una aplicaci\u00f3n React usando i18next","headline":"C\u00f3mo traducir correctamente una aplicaci\u00f3n React usando i18next","author":{"@id":"https:\/\/www.ibidem-translations.com\/edu\/author\/mau\/#author"},"publisher":{"@id":"https:\/\/www.ibidem-translations.com\/edu\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/www.ibidem-translations.com\/edu\/wp-content\/uploads\/2022\/04\/traducir_aplicacion_react-i18next.jpg","width":1140,"height":380,"caption":"Translate react app with i18n"},"datePublished":"2022-04-27T11:54:28+02:00","dateModified":"2022-06-06T16:38:38+02:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.ibidem-translations.com\/edu\/translate-react-i18next-app\/#webpage"},"isPartOf":{"@id":"https:\/\/www.ibidem-translations.com\/edu\/translate-react-i18next-app\/#webpage"},"articleSection":"Translations into Spanish, APP, i18next, react, translation into spanish"},{"@type":"BreadcrumbList","@id":"https:\/\/www.ibidem-translations.com\/edu\/translate-react-i18next-app\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.ibidem-translations.com\/edu\/#listItem","position":1,"name":"Home","item":"https:\/\/www.ibidem-translations.com\/edu\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.ibidem-translations.com\/edu\/translations-spanish\/#listItem","name":"Translations into Spanish"}},{"@type":"ListItem","@id":"https:\/\/www.ibidem-translations.com\/edu\/translations-spanish\/#listItem","position":2,"name":"Translations into Spanish","item":"https:\/\/www.ibidem-translations.com\/edu\/translations-spanish\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.ibidem-translations.com\/edu\/translate-react-i18next-app\/#listItem","name":"C\u00f3mo traducir correctamente una aplicaci\u00f3n React usando i18next"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.ibidem-translations.com\/edu\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.ibidem-translations.com\/edu\/translate-react-i18next-app\/#listItem","position":3,"name":"C\u00f3mo traducir correctamente una aplicaci\u00f3n React usando i18next","previousItem":{"@type":"ListItem","@id":"https:\/\/www.ibidem-translations.com\/edu\/translations-spanish\/#listItem","name":"Translations into Spanish"}}]},{"@type":"Organization","@id":"https:\/\/www.ibidem-translations.com\/edu\/#organization","name":"IBIDEM TRANSLATIONS EDU","url":"https:\/\/www.ibidem-translations.com\/edu\/"},{"@type":"Person","@id":"https:\/\/www.ibidem-translations.com\/edu\/author\/mau\/#author","url":"https:\/\/www.ibidem-translations.com\/edu\/author\/mau\/","name":"Mauri","image":{"@type":"ImageObject","@id":"https:\/\/www.ibidem-translations.com\/edu\/translate-react-i18next-app\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/b7b325afa7a8af8c21ac26bbaac9118b81803ff10d6c403a1b84df7063a874dd?s=96&d=mm&r=g","width":96,"height":96,"caption":"Mauri"}},{"@type":"WebPage","@id":"https:\/\/www.ibidem-translations.com\/edu\/translate-react-i18next-app\/#webpage","url":"https:\/\/www.ibidem-translations.com\/edu\/translate-react-i18next-app\/","name":"C\u00f3mo traducir correctamente una aplicaci\u00f3n React usando i18next","description":"Translation into Spanish of an interesting article by Adriano Raiano, bachelor in computer science, software architect, and founder of locize.com,","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.ibidem-translations.com\/edu\/#website"},"breadcrumb":{"@id":"https:\/\/www.ibidem-translations.com\/edu\/translate-react-i18next-app\/#breadcrumblist"},"author":{"@id":"https:\/\/www.ibidem-translations.com\/edu\/author\/mau\/#author"},"creator":{"@id":"https:\/\/www.ibidem-translations.com\/edu\/author\/mau\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/www.ibidem-translations.com\/edu\/wp-content\/uploads\/2022\/04\/traducir_aplicacion_react-i18next.jpg","@id":"https:\/\/www.ibidem-translations.com\/edu\/translate-react-i18next-app\/#mainImage","width":1140,"height":380,"caption":"Translate react app with i18n"},"primaryImageOfPage":{"@id":"https:\/\/www.ibidem-translations.com\/edu\/translate-react-i18next-app\/#mainImage"},"datePublished":"2022-04-27T11:54:28+02:00","dateModified":"2022-06-06T16:38:38+02:00"},{"@type":"WebSite","@id":"https:\/\/www.ibidem-translations.com\/edu\/#website","url":"https:\/\/www.ibidem-translations.com\/edu\/","name":"IBIDEM TRANSLATIONS EDU","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.ibidem-translations.com\/edu\/#organization"}}]},"og:locale":"en_US","og:site_name":"IBIDEM TRANSLATIONS EDU |","og:type":"article","og:title":"C\u00f3mo traducir correctamente una aplicaci\u00f3n React usando i18next","og:description":"Translation into Spanish of an interesting article by Adriano Raiano, bachelor in computer science, software architect, and founder of locize.com,","og:url":"https:\/\/www.ibidem-translations.com\/edu\/translate-react-i18next-app\/","article:published_time":"2022-04-27T09:54:28+00:00","article:modified_time":"2022-06-06T14:38:38+00:00","twitter:card":"summary_large_image","twitter:title":"C\u00f3mo traducir correctamente una aplicaci\u00f3n React usando i18next","twitter:description":"Translation into Spanish of an interesting article by Adriano Raiano, bachelor in computer science, software architect, and founder of locize.com,"},"aioseo_meta_data":{"post_id":"5794","title":null,"description":null,"keywords":null,"keyphrases":null,"focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_image_url":null,"twitter_title":null,"twitter_description":null,"schema_type":"default","schema_type_options":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null,"created":"2026-10-22 21:56:35","updated":"2026-10-22 21:56:35"},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.ibidem-translations.com\/edu\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.ibidem-translations.com\/edu\/translations-spanish\/\" title=\"Translations into Spanish\">Translations into Spanish<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tC\u00f3mo traducir correctamente una aplicaci\u00f3n React usando i18next\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.ibidem-translations.com\/edu\/"},{"label":"Translations into Spanish","link":"https:\/\/www.ibidem-translations.com\/edu\/translations-spanish\/"},{"label":"C\u00f3mo traducir correctamente una aplicaci\u00f3n React usando i18next","link":"https:\/\/www.ibidem-translations.com\/edu\/translate-react-i18next-app\/"}],"_links":{"self":[{"href":"https:\/\/www.ibidem-translations.com\/edu\/wp-json\/wp\/v2\/posts\/5794","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ibidem-translations.com\/edu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ibidem-translations.com\/edu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ibidem-translations.com\/edu\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ibidem-translations.com\/edu\/wp-json\/wp\/v2\/comments?post=5794"}],"version-history":[{"count":23,"href":"https:\/\/www.ibidem-translations.com\/edu\/wp-json\/wp\/v2\/posts\/5794\/revisions"}],"predecessor-version":[{"id":6566,"href":"https:\/\/www.ibidem-translations.com\/edu\/wp-json\/wp\/v2\/posts\/5794\/revisions\/6566"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ibidem-translations.com\/edu\/wp-json\/wp\/v2\/media\/6076"}],"wp:attachment":[{"href":"https:\/\/www.ibidem-translations.com\/edu\/wp-json\/wp\/v2\/media?parent=5794"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ibidem-translations.com\/edu\/wp-json\/wp\/v2\/categories?post=5794"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ibidem-translations.com\/edu\/wp-json\/wp\/v2\/tags?post=5794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}