{"id":8075,"date":"2021-12-20T18:08:32","date_gmt":"2021-12-20T17:08:32","guid":{"rendered":"https:\/\/www.ibidemgroup.com\/edu\/?p=8075"},"modified":"2024-03-04T12:35:29","modified_gmt":"2024-03-04T11:35:29","slug":"react-traduccion-automatica","status":"publish","type":"post","link":"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/","title":{"rendered":"Tutorial de React &#8211; C\u00f3mo crear una PWA con traducci\u00f3n autom\u00e1tica"},"content":{"rendered":"\n<p class=\"has-text-align-center wp-block-paragraph\"><span style=\"color:#0693e3\" class=\"color\">Jose ha traducido este art\u00edculo mediante <\/span><a href=\"https:\/\/www.ibidemgroup.com\/\"><span style=\"color:#0693e3\" class=\"color\">traducci\u00f3n autom\u00e1tica + revisi\u00f3n humana<\/span><\/a><span style=\"color:#0693e3\" class=\"color\">, dentro del programa de pruebas de Post-Edited Machine Translation de la <\/span><a href=\"https:\/\/www.ibidemgroup.com\/agencia-traduccion.php\"><span style=\"color:#0693e3\" class=\"color\">agencia de traducci\u00f3n<\/span><\/a><span style=\"color:#0693e3\" class=\"color\"> Ibidem Group.<\/span><\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><strong><span style=\"color:#0693e3\" class=\"color\">Texto original escrito por Nishant Kumar y publicado en <\/span><\/strong><span style=\"color:#0693e3\" class=\"color\"> <br><\/span><a rel=\"noreferrer noopener\" href=\"https:\/\/www.freecodecamp.org\/news\/react-tutorial-build-a-text-translation-pwa\/\" target=\"_blank\"><span style=\"color:#0693e3\" class=\"color\">https:\/\/www.freecodecamp.org\/news\/react-tutorial-build-a-text-translation-pwa\/<\/span><\/a><span style=\"color:#0693e3\" class=\"color\"> <\/span><\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">***<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esto es lo\nque vamos a crear:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.freecodecamp.org\/news\/content\/images\/2021\/09\/Screenshot-2021-09-12-123442-1.png\" alt=\"Interfaz de usuario gr\u00e1fica, Aplicaci\u00f3n\n\nDescripci\u00f3n generada autom\u00e1ticamente\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">As\u00ed es como se ver\u00e1 nuestra aplicaci\u00f3n una ver terminada. Tendr\u00e1 2 campos de texto &#8211; en el primero escribiremos el texto original, y en el segundo se mostrar\u00e1 el texto traducido. Tambi\u00e9n tendr\u00e1 un desplegable, donde el usuario podr\u00e1 elegir los idiomas. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Comenzamos!<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">INDICE<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#Como_construir_la_interfaz_de_usuario\" >C\u00f3mo construir la interfaz de usuario<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#Como_crear_los_componentes_de_la_aplicacion\" >C\u00f3mo crear los componentes de la aplicaci\u00f3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#Como_configurar_las_APIs\" >C\u00f3mo configurar las APIs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#Como_instalar_Axios\" >C\u00f3mo instalar Axios<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#Como_llamar_a_la_API_de_deteccion_de_idioma\" >C\u00f3mo llamar a la API de detecci\u00f3n de idioma<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#Como_llamar_a_la_API_para_el_select_de_idiomas\" >C\u00f3mo llamar a la API para el select de idiomas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#Como_obtener_el_codigo_de_idioma_seleccionado\" >C\u00f3mo obtener el c\u00f3digo de idioma seleccionado<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#Como_llamar_a_la_API_de_traduccion_para_traducir_nuestro_texto\" >C\u00f3mo llamar a la API de traducci\u00f3n para traducir nuestro texto<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#Conclusion\" >Conclusi\u00f3n<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_construir_la_interfaz_de_usuario\"><\/span><strong>C\u00f3mo construir la interfaz de usuario<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para crear\nla interfaz sin esfuerzo, utilizaremos una biblioteca de interfaz de usuario\nllamada Semantic UI.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Visita el sitio web de Semantic UI: https:\/\/react.semantic-ui.com\/.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A continuaci\u00f3n, selecciona Empezar en el men\u00fa de la barra lateral:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.freecodecamp.org\/news\/content\/images\/2021\/09\/Screenshot-2021-09-12-112404.png\" alt=\"Interfaz de usuario gr\u00e1fica, Texto, Aplicaci\u00f3n\n\nDescripci\u00f3n generada autom\u00e1ticamente\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Inst\u00e1lalo\nusando uno de los siguientes comandos. Puedes usar yarn add o npm install.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$  yarn add semantic-ui-react semantic-ui-css<br> Or<br>$  npm install semantic-ui-react semantic-ui-css<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Una vez termine la instalaci\u00f3n, tendr\u00e1s que importar el paquete en el archivo index.js de la siguiente manera:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import 'semantic-ui-css\/semantic.min.css'<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora ya puedes utilizar la interfaz de usuario sem\u00e1ntica.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_crear_los_componentes_de_la_aplicacion\"><\/span><strong>C\u00f3mo crear los componentes de la aplicaci\u00f3n<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos a crear un componente llamado <strong>Translate <\/strong>que contendr\u00e1 todos los elementos que necesitamos. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En primer\nlugar, necesitamos un t\u00edtulo para la aplicaci\u00f3n. As\u00ed que, dentro del componente\nTranslate, crea un encabezado como este:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from 'react';<br> export default function Translate() {<br>     return (<br>         <br>                              Texty Translator             <br><br>         <br><br>     )<br> }<\/pre>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Traducir.js<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le a\u00f1adimos un poco de estilo con CSS:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">@import url('https:\/\/fonts.googleapis.com\/css2?family=Azeret+Mono&amp;display=swap');<br> .app-header{<br>   text-align: center;<br>   padding: 20px;<br> }<br> .header{<br>   font-family: 'Azeret Mono', monospace;<br>   font-size: 30px;<br> }<\/pre>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Estilos para App.css<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Estamos utilizando una fuente llamada \u00abAzeret Mono\u00bb de Google Fonts.  Hemos alineado el encabezado y le hemos dado algo de relleno.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As\u00ed es como se ver\u00e1 nuestra cabecera:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.freecodecamp.org\/news\/content\/images\/2021\/09\/Screenshot-2021-09-12-113234.png\" alt=\"Texto\n\nDescripci\u00f3n generada autom\u00e1ticamente\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Necesitaremos otros 4 elementos m\u00e1s. El primero, nuestra \u00e1rea de texto de entrada; el segundo, el desplegable para seleccionar el idioma; el tercero, el campo de texto de salida donde se reflejar\u00e1 nuestro texto traducido, y el \u00faltimo, un bot\u00f3n para traducir nuestro texto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos importar\nlos elementos Form, TextArea, Button e Icon directamente desde Semantic UI as\u00ed:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import {<br>     Form,<br>     TextArea,<br>     Button,<br>     Icon<br> } from 'semantic-ui-react';<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">A continuaci\u00f3n, crearemos otro div despu\u00e9s de <span style=\"background-color:#eeeeee\" class=\"background-color\">app-header<\/span> llamado <span style=\"background-color:#eeeeee\" class=\"background-color\">app-body<\/span> con el siguiente c\u00f3digo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from 'react';<br> import {<br>     Form,<br>     TextArea,<br>     Button,<br>     Icon<br> } from 'semantic-ui-react';<br> export default function Translate() {<br>     return (<br>         <br>                              Texty Translator             <br><br> <code>        &lt;div className='app-body'&gt;             &lt;div&gt;                 &lt;Form&gt;                     &lt;Form.Field                         control={TextArea}                         placeholder='Type Text to Translate..'                     \/&gt;                     &lt;select className=\"language-select\"&gt;                         &lt;option&gt;Please Select Language..&lt;\/option&gt;                     &lt;\/select&gt;                     &lt;Form.Field                         control={TextArea}                         placeholder='Your Result Translation..'                     \/&gt;                     &lt;Button                         color=\"orange\"                         size=\"large\"                     &gt;                         &lt;Icon name='translate' \/&gt;                         Translate&lt;\/Button&gt;                 &lt;\/Form&gt;             &lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt; )<\/code><br> }<\/pre>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Traducir.js<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Y le\na\u00f1adiremos algo de estilo con el siguiente CSS:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">@import url('https:\/\/fonts.googleapis.com\/css2?family=Azeret+Mono&amp;display=swap');<br> .app-header{<br>   text-align: center;<br>   padding: 20px;<br> }<br> .header{<br>   font-family: 'Azeret Mono', monospace;<br>   font-size: 30px;<br> }<br> .app-body{<br>   padding: 20px;<br>   text-align: center;<br> }<br> .language-select{<br>   height: 40px !important;<br>   margin-bottom: 15px;<br>   outline: none !important;<br> }<\/pre>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">App.css<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As\u00ed es como se\nver\u00e1 nuestra aplicaci\u00f3n ahora. Puedes ver que tenemos las \u00e1reas de texto, las\nopciones de selecci\u00f3n y un bot\u00f3n para traducir.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.freecodecamp.org\/news\/content\/images\/2021\/09\/Screenshot-2021-09-12-114039.png\" alt=\"Interfaz de usuario gr\u00e1fica, Aplicaci\u00f3n\n\nDescripci\u00f3n generada autom\u00e1ticamente\"\/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_configurar_las_APIs\"><\/span>C\u00f3mo configurar las APIs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para activar la traducci\u00f3n, utilizaremos la API de <a href=\"https:\/\/libretranslate.de\/docs\">LibreTranslate<\/a>. Por lo tanto, ve a su sitio web para elegir su API.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.freecodecamp.org\/news\/content\/images\/2021\/09\/Screenshot-2021-09-12-114304.png\" alt=\"Aplicaci\u00f3n\n\nDescripci\u00f3n generada autom\u00e1ticamente con confianza media\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Como se puede ver en la imagen superior, tiene 4 APIs. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para\nempezar, tenemos que detectar nuestro idioma de entrada utilizando la API\n\/detect POST. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_instalar_Axios\"><\/span>C\u00f3mo instalar Axios<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de nada, debemos instalar Axios, ya que lo necesitaremos para hacer peticiones a la API. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para instalar Axios, simplemente escribe el siguiente comando:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">yarn add axios<br> OR<br>npm i axios<\/pre>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Instalaci\u00f3n de Axios<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos\nutilizar yarn add axios o npm i axios, dependiendo del gestor de paquetes que\nhayamos instalado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora, vamos\na importarlo en nuestro componente de traducci\u00f3n.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import axios from 'axios';<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Tambi\u00e9n\nnecesitamos los hooks useState y useEffect.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React, { useState, useEffect } from 'react';<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Luego, crea\nun estado llamado inputText.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">const [inputText, setInputText] = useState('');<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Y en el campo del \u00e1rea de texto de entrada, vinculalo a un controlador de eventos onChange.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;Form.Field  <\/code><br><code>control={TextArea} <\/code><br><code> placeholder='Type Text to Translate..' <\/code><br><code> onChange={(e) =&gt; setInputText(e.target.value)}<\/code><br><code> \/&gt;<\/code> <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Si\nintroducimos alg\u00fan texto, se almacenar\u00e1 en el estado inputText.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_llamar_a_la_API_de_deteccion_de_idioma\"><\/span>C\u00f3mo llamar a la API de detecci\u00f3n de idioma<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora, vamos a llamar a la API de detecci\u00f3n de idioma para detectar el idioma del texto original .<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Crea una funci\u00f3n llamada <span style=\"background-color:#eeeeee\" class=\"background-color\">getLanguageSource()<\/span> as\u00ed:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">const getLanguageSource = () =&gt; {<br>         axios.post(<code>https:\/\/libretranslate.de\/detect<\/code>, {<br>             q: inputText<br>         })<br>         .then((response) =&gt; {<br>             console.log(response.data[0].language)<br>         })<br>     }<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Llamamos a la API de detecci\u00f3n, y pasamos el texto original como el cuerpo. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Estamos\nusando axios.post para enviar el texto de entrada como cuerpo, y estamos usando\nq como par\u00e1metro de cabecera.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adem\u00e1s, querremos llamar a esta funci\u00f3n al hacer clic en el bot\u00f3n Traducir, as\u00ed que hay que vincular esta funci\u00f3n al bot\u00f3n Traducir de esta manera:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;Button<\/code><br><code>                             color=\"orange\"<\/code><br><code>                             size=\"large\"<\/code><br><code>                             onClick={getLanguageSource}<\/code><br><code>                         &gt;<\/code><br><code>                             &lt;Icon name='translate' \/&gt;<\/code><br><code>                             Translate&lt;\/Button&gt;<\/code> &lt;Bot\u00f3n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Escribe algo en el primer campo y pulsa el bot\u00f3n Traducir. Ver\u00e1s en la consola el c\u00f3digo del idioma detectado.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.freecodecamp.org\/news\/content\/images\/size\/w1600\/2021\/09\/Screenshot-2021-09-12-115444.png\" alt=\"Interfaz de usuario gr\u00e1fica, Texto, Aplicaci\u00f3n\n\nDescripci\u00f3n generada autom\u00e1ticamente\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora, necesitamos almacenar este c\u00f3digo de idioma, por lo que debemos crear un estado llamado <span style=\"background-color:#eeeeee\" class=\"background-color\">detectLanguageKey.<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A continuaci\u00f3n, establece la respuesta :<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> <br><code>const getLanguageSource = () =&gt; {<\/code><br><code>         axios.post(`https:\/\/libretranslate.de\/detect`, {<\/code><br><code>             q: inputText<\/code><br><code>         })<\/code><br><code>             .then((response) =&gt; {<\/code><br><code>                 setdetectedLanguageKey(response.data[0].language)<\/code><br><code>             })<\/code><br><code>     }<\/code> <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Estamos\nfijando el \u00edndice zeroth de los datos de respuesta, porque ah\u00ed es donde\nempiezan nuestros datos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed est\u00e1\ntodo el c\u00f3digo hasta este punto:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> <br><code>import React, { useState, useEffect } from 'react';<\/code><br><code> import {<\/code><br><code>     Form,<\/code><br><code>     TextArea,<\/code><br><code>     Button,<\/code><br><code>     Icon<\/code><br><code> } from 'semantic-ui-react';<\/code><br><code> import axios from 'axios';<\/code><br><br><code>export default function Translate() {<\/code><br><code>     const [inputText, setInputText] = useState('');<\/code><br><code>     const [detectLanguageKey, setdetectedLanguageKey] = useState('')<\/code><br><code>     const getLanguageSource = () =&gt; {<\/code><br><code>         axios.post(`https:\/\/libretranslate.de\/detect`, {<\/code><br><code>             q: inputText<\/code><br><code>         })<\/code><br><code>             .then((response) =&gt; {<\/code><br><code>                 setdetectedLanguageKey(response.data[0].language)<\/code><br><code>             })<\/code><br><code>     }<\/code><br><code>     return (<\/code><br><code>         &lt;div&gt;<\/code><br><code>             &lt;div className=\"app-header\"&gt;<\/code><br><code>                 &lt;h2 className=\"header\"&gt;Texty Translator&lt;\/h2&gt;<\/code><br><code>             &lt;\/div&gt;<\/code><br><br><code>             &lt;div className='app-body'&gt;<\/code><br><code>                 &lt;div&gt;<\/code><br><code>                     &lt;Form&gt;<\/code><br><code>                         &lt;Form.Field<\/code><br><code>                             control={TextArea}<\/code><br><code>                             placeholder='Type Text to Translate..'<\/code><br><code>                             onChange={(e) =&gt; setInputText(e.target.value)}<\/code><br><code>                         \/&gt;<\/code><br><br><code>                         &lt;select className=\"language-select\"&gt;<\/code><br><code>                             &lt;option&gt;Please Select Language..&lt;\/option&gt;<\/code><br><code>                         &lt;\/select&gt;<\/code><br><code>                         &lt;Form.Field<\/code><br><code>                             control={TextArea}<\/code><br><code>                             placeholder='Your Result Translation..'<\/code><br><code>                         \/&gt;<\/code><br><code>                         &lt;Button<\/code><br><code>                             color=\"orange\"<\/code><br><code>                             size=\"large\"<\/code><br><code>                             onClick={getLanguageSource}<\/code><br><code>                         &gt;<\/code><br><code>                             &lt;Icon name='translate' \/&gt;<\/code><br><code>                             Translate&lt;\/Button&gt;<\/code><br><code>                     &lt;\/Form&gt;<\/code><br><code>                 &lt;\/div&gt;<\/code><br><code>             &lt;\/div&gt;<\/code><br><code>         &lt;\/div&gt;<\/code><br><code>     )<\/code><br><code>}<\/code> <\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_llamar_a_la_API_para_el_select_de_idiomas\"><\/span>C\u00f3mo llamar a la API para el select de idiomas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora, la segunda API obtiene el listado idiomas soportados. Utilizaremos esta lista en nuestro desplegable de selecci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Debemos crear un hook useEffect para llamar a nuestra API de lenguajes soportados. useEffect es una funci\u00f3n que se ejecutar\u00e1 cada vez que nuestro componente se renderice o cargue.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">useEffect(() =&gt; {<br>         axios.get(<code>https:\/\/libretranslate.de\/languages<\/code>)<br>             .then((response) =&gt; {<br>                 console.log(response.data)<br>             })<br>     }, [])<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed  llamamos a la API para conseguir el listado de idiomas soportados, usando el m\u00e9todo axios.get. Luego comprobamos la respuesta en la consola.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Abre la consola para comprobar la lista de idiomas. Deber\u00edas ver algo as\u00ed:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.freecodecamp.org\/news\/content\/images\/2021\/09\/Screenshot-2021-09-12-120348.png\" alt=\"Interfaz de usuario gr\u00e1fica, Texto, Aplicaci\u00f3n\n\nDescripci\u00f3n generada autom\u00e1ticamente\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Pongamos estos datos en un estado. Crea un estado llamado languagesList. Ser\u00e1 un array vac\u00edo.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">const [languagesList, setLanguagesList] = useState([])<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">useEffect(() =&gt; {<br>         axios.get(<code>https:\/\/libretranslate.de\/languages<\/code>)<br>             .then((response) =&gt; {<br>                 setLanguagesList(response.data)<br>             })<br>     }, [])<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Luego, en useEffect, necesitamos establecer la lista de idiomas usando setLanguagesList.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Necesitamos mostrar esta lista de idiomas en el select. Por lo tanto, vamos a mapear el desplegable de selecci\u00f3n utilizando languagesList as\u00ed:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;select className=\"language-select\"&gt;<\/code><br><code>                             &lt;option&gt;Please Select Language..&lt;\/option&gt;<\/code><br><code>                             {languagesList.map((language) =&gt; {<\/code><br><code>                                 return (<\/code><br><code>                                     &lt;option value={language.code}&gt;<\/code><br><code>                                         {language.name}<\/code><br><code>                                     &lt;\/option&gt;<\/code><br><code>                                 )<\/code><br><code>                             })}<\/code><br><code>                         &lt;\/select&gt;<\/code> <\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.freecodecamp.org\/news\/content\/images\/size\/w1600\/2021\/09\/Screenshot--605-.png\" alt=\"Interfaz de usuario gr\u00e1fica, Texto, Aplicaci\u00f3n\n\nDescripci\u00f3n generada autom\u00e1ticamente\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Ya podemos seleccionar idioma en el desplegable.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_obtener_el_codigo_de_idioma_seleccionado\"><\/span>C\u00f3mo obtener el c\u00f3digo de idioma seleccionado<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora, si seleccionamos un idioma &#8211; por ejemplo Espa\u00f1ol &#8211; necesitamos obtener el c\u00f3digo de idioma, ya que necesitamos ese c\u00f3digo de idioma en nuestra API Translate.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Crea una funci\u00f3n llamada languageKey() as\u00ed:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">const languageKey = () =&gt; {<br><br> }<br><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Y en la opci\u00f3n de selecci\u00f3n, vincula esta funci\u00f3n utilizando onChange:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> <br><code>&lt;select className=\"language-select\" onChange={languageKey}&gt;<\/code><br><code>                             &lt;option&gt;Please Select Language..&lt;\/option&gt;<\/code><br><code>                             {languagesList.map((language) =&gt; {<\/code><br><code>                                 return (<\/code><br><code>                                     &lt;option value={language.code}&gt;<\/code><br><code>                                         {language.name}<\/code><br><code>                                     &lt;\/option&gt;<\/code><br><code>                                 )<\/code><br><code>                             })}<\/code><br><code>                         &lt;\/select&gt;<\/code> <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Adem\u00e1s,\nnecesitamos almacenar el c\u00f3digo del idioma en un estado, as\u00ed que vamos a\ncrearlo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Crea un estado llamado selectedLanguageKey, que contendr\u00e1 laclave de idioma seleccionada desde el select.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">const [selectedLanguageKey, setLanguageKey] = useState('')<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esta funci\u00f3n\nlanguageKey aceptar\u00e1 un par\u00e1metro llamado selectedLanguage. Y\nalmacenaremos estos datos en el estado selectedLanguageKey, que\nestamos obteniendo de la opci\u00f3n select.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">const languageKey = (selectedLanguage) =&gt; {<br>         setLanguageKey(selectedLanguage.target.value)<br> }<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora, si miras la documentaci\u00f3n de LibreTranslate, necesitamos 3 entradas de datos: <\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>El texto a traducir.<\/li><li>El c\u00f3digo del idioma<\/li><li>El c\u00f3digo del idioma de destino.<\/li><\/ol>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.freecodecamp.org\/news\/content\/images\/2021\/09\/Screenshot-2021-09-12-120659.png\" alt=\"Interfaz de usuario gr\u00e1fica, Aplicaci\u00f3n\n\nDescripci\u00f3n generada autom\u00e1ticamente\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">No\nnecesitamos la clave API porque este servicio es gratuito.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tenemos las 3 entradas que necesitamos enviar en el cuerpo contenido en estos estados de abajo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">const [inputText, setInputText] = useState('');<br>const [detectLanguageKey, setdetectedLanguageKey] = useState('');<br>const [selectedLanguageKey, setLanguageKey] = useState('')<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora, vamos\na llamar a nuestra API final, que es \/translate.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_llamar_a_la_API_de_traduccion_para_traducir_nuestro_texto\"><\/span>C\u00f3mo llamar a la API de traducci\u00f3n para traducir nuestro texto<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Crea un estado final llamado resultText. Este estado contendr\u00e1 el texto traducido.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> const [resultText, setResultText] = useState(''); <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Crea una\nfunci\u00f3n que llame a la API de traducci\u00f3n:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>const translateText = () =&gt; {<\/code><br><code>        getLanguageSource();<\/code><br><code>         let data = {<\/code><br><code>             q : inputText,<\/code><br><code>             source: detectLanguageKey,<\/code><br><code>             target: selectedLanguageKey<\/code><br><code>         }<\/code><br><code>         axios.post(`https:\/\/libretranslate.de\/translate`, data)<\/code><br><code>         .then((response) =&gt; {<\/code><br><code>             setResultText(response.data.translatedText)<\/code><br><code>         })<\/code><br><code>     }<\/code> <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Como puedes ver, estamos estableciendo inputText en el estado resultText, y estamos llamando a la funci\u00f3n getLanguageSource dentro de la funci\u00f3n translateText. As\u00ed, cada vez que esta funci\u00f3n se ejecute, getLanguageSource la activar\u00e1 autom\u00e1ticamente para obtener el idioma de origen. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En otras palabras, onClick de esta funci\u00f3n a trav\u00e9s del bot\u00f3n Traducir, establecer\u00e1 el idioma de origen a trav\u00e9s de getLanguageSource(), luego llamar\u00e1 a la API de traducci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As\u00ed que, en\nel bot\u00f3n de traducci\u00f3n, enlaza esta funci\u00f3n:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;Button<\/code><br><code>                             color=\"orange\"<\/code><br><code>                             size=\"large\"<\/code><br><code>                             onClick={translateText}<\/code><br><code>                         &gt;<\/code><br><code>                             &lt;Icon name='translate' \/&gt;<\/code><br><code>                             Translate&lt;\/Button&gt;<\/code> <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">A\ncontinuaci\u00f3n vamos a crear un objeto llamado data. Dentro de \u00e9l enviaremos\ntodos los datos que obtuvimos anteriormente, como inputText, detectLanguageKey,\ny la clave selectedLanguage como q, source, y el target respectivamente.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>let data = {<\/code><br><code>             q : inputText,<\/code><br><code>             source: detectLanguageKey,<\/code><br><code>             target: selectedLanguageKey<\/code><br><code>         }<\/code> <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Luego,\nllamamos a la API de traducci\u00f3n utilizando axios.post y enviamos el objeto de\ndatos como par\u00e1metro del cuerpo.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>let data = {<\/code><br><code>             q : inputText,<\/code><br><code>             source: detectLanguageKey,<\/code><br><code>             target: selectedLanguageKey<\/code><br><code>         }<\/code><br><code>         axios.post(`https:\/\/libretranslate.de\/translate`, data)<\/code> <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Por \u00faltimo,\nestablecemos los datos de respuesta entrantes en el estado resultText.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>.then((response) =&gt; {<\/code><br><code>             setResultText(response.data.translatedText)<\/code><br><code>         })<\/code> <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora escribe algo en el campo de entrada, selecciona el idioma y haz clic en Traducir. Obtendr\u00e1s tu texto traducido.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed est\u00e1 todo el c\u00f3digo hasta este punto:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>import React, { useState, useEffect } from 'react';<\/code><br><code> import {<\/code><br><code>     Form,<\/code><br><code>     TextArea,<\/code><br><code>     Button,<\/code><br><code>     Icon<\/code><br><code> } from 'semantic-ui-react';<\/code><br><code> import axios from 'axios';<\/code><br><br><code> export default function Translate() {<\/code><br><code>     const [inputText, setInputText] = useState('');<\/code><br><code>     const [detectLanguageKey, setdetectedLanguageKey] = useState('');<\/code><br><code>     const [selectedLanguageKey, setLanguageKey] = useState('')<\/code><br><code>     const [languagesList, setLanguagesList] = useState([])<\/code><br><code>     const [resultText, setResultText] = useState('');<\/code><br><code>     const getLanguageSource = () =&gt; {<\/code><br><code>         axios.post(`https:\/\/libretranslate.de\/detect`, {<\/code><br><code>             q: inputText<\/code><br><code>         })<\/code><br><code>             .then((response) =&gt; {<\/code><br><code>                 setdetectedLanguageKey(response.data[0].language)<\/code><br><code>             })<\/code><br><code>     }<\/code><br><code>     useEffect(() =&gt; {<\/code><br><code>         axios.get(`https:\/\/libretranslate.de\/languages`)<\/code><br><code>             .then((response) =&gt; {<\/code><br><code>                 setLanguagesList(response.data)<\/code><br><code>             })<\/code><br><code>     }, [])<\/code><br><br><code>     const languageKey = (selectedLanguage) =&gt; {<\/code><br><code>         setLanguageKey(selectedLanguage.target.value)<\/code><br><code>     }<\/code><br><br><code>     const translateText = () =&gt; {<\/code><br><code>         getLanguageSource();<\/code><br><code>         let data = {<\/code><br><code>             q : inputText,<\/code><br><code>             source: detectLanguageKey,<\/code><br><code>             target: selectedLanguageKey<\/code><br><code>         }<\/code><br><code>         axios.post(`https:\/\/libretranslate.de\/translate`, data)<\/code><br><code>         .then((response) =&gt; {<\/code><br><code>             setResultText(response.data.translatedText)<\/code><br><code>         })<\/code><br><code>     }<\/code><br><code>     return (<\/code><br><code>         &lt;div&gt;<\/code><br><code>             &lt;div className=\"app-header\"&gt;<\/code><br><code>                 &lt;h2 className=\"header\"&gt;Texty Translator&lt;\/h2&gt;<\/code><br><code>             &lt;\/div&gt;<\/code><br><code>             &lt;div className='app-body'&gt;<\/code><br><code>                 &lt;div&gt;<\/code><br><code>                     &lt;Form&gt;<\/code><br><code>                         &lt;Form.Field<\/code><br><code>                             control={TextArea}<\/code><br><code>                             placeholder='Type Text to Translate..'<\/code><br><code>                             onChange={(e) =&gt;<\/code><br><code> setInputText(e.target.value)}<\/code><br><code>                        \/&gt;<\/code><br><code>                         &lt;select className=\"language-select\" onChange={languageKey}&gt;<\/code><br><code>                             &lt;option&gt;Please Select Language..&lt;\/option&gt;<\/code><br><code>                             {languagesList.map((language) =&gt; {<\/code><br><code>                                 return (<\/code><br><code>                                     &lt;option value={language.code}&gt;<\/code><br><code>                                         {language.name}<\/code><br><code>                                     &lt;\/option&gt;<\/code><br><code>                                 )<\/code><br><code>                             })}<\/code><br><code>                         &lt;\/select&gt;<\/code><br><code>                         &lt;Form.Field<\/code><br><code>                             control={TextArea}<\/code><br><code>                             placeholder='Your Result Translation..'<\/code><br><code>                             value={resultText}<\/code><br><code>                         \/&gt;<\/code><br><code>                         &lt;Button<\/code><br><code>                             color=\"orange\"<\/code><br><code>                             size=\"large\"<\/code><br><code>                             onClick={translateText}<\/code><br><code>                         &gt;<\/code><br><code>                             &lt;Icon name='translate' \/&gt;<\/code><br><code>                             Translate&lt;\/Button&gt;<\/code><br><code>                     &lt;\/Form&gt;<\/code><br><code>                 &lt;\/div&gt;<\/code><br><code>             &lt;\/div&gt;<\/code><br><code>         &lt;\/div&gt;<\/code><br><code>     ) }<\/code> <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora, el\n\u00faltimo paso. En el gancho useEffect, llama a la funci\u00f3n getLanguageSource(), y establece inputText en el array de dependencia.\nEsto significa que cada vez que nuestro texto inputText cambie, o este estado\nse actualice, la funci\u00f3n useEffect se ejecutar\u00e1, y llamar\u00e1 a getLanguageSource() cada vez que se ejecute.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">useEffect(() =&gt; {<br>        axios.get(<code>https:\/\/libretranslate.de\/languages<\/code>)<br>        .then((response) =&gt; {<br>         setLanguagesList(response.data)<br>        })<br> <code>   getLanguageSource() }, [inputText])<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora, vamos a comprobar el resultado:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.freecodecamp.org\/news\/content\/images\/2021\/09\/Screenshot-2021-09-12-123442.png\" alt=\"Interfaz de usuario gr\u00e1fica, Aplicaci\u00f3n\n\nDescripci\u00f3n generada autom\u00e1ticamente\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Escribe un texto a traducir y selecciona el idioma. Pulsa Traducir, y ver\u00e1s la traducci\u00f3n en el campo correspondiente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusi\u00f3n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora ya sabes c\u00f3mo construir un traductor autom\u00e1tico de texto usando React. Puedes crear tu propia UI si lo deseas. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">De aqu\u00ed adelante, construye y experimenta con \u00e9l. Hay toneladas de cosas que puedes hacer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Puedes ver mi v\u00eddeo <a href=\"https:\/\/www.youtube.com\/watch?v=R_I5t8r5qsA&amp;t=5s&amp;ab_channel=Cybernatico\">Construyamos una aplicaci\u00f3n de traducci\u00f3n de textos usando React<\/a>, que est\u00e1 en mi canal de YouTube.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Puedes descargar el c\u00f3digo aqu\u00ed: <a href=\"https:\/\/github.com\/nishant-666\/Sanjeet-s-Translator\">https:\/\/github.com\/nishant-666\/Sanjeet-s-Translator<\/a>. No te preocupes por el nombre.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Feliz aprendizaje!<\/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;8075&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;Rate this post&quot;,&quot;legend&quot;:&quot;0\\\/5 - (0 votos)&quot;,&quot;size&quot;:&quot;24&quot;,&quot;title&quot;:&quot;Tutorial de React - C\u00f3mo crear una PWA con traducci\u00f3n autom\u00e1tica&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\">Rate this post<\/span>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"Traducci\u00f3n de un interesant\u00edsimo art\u00edculo de Nishant Kumar, un programador de la India que se declara tambi\u00e9n amante de escribir poes\u00eda, tocar el piano o cocinar comidas deliciosas.  En este art\u00edculo, nos muestra c\u00f3mo construir una aplicaci\u00f3n de traducci\u00f3n autom\u00e1tica de texto, usando React. ","protected":false},"author":8,"featured_media":8396,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[619],"tags":[419,430,151],"class_list":["post-8075","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-traduccion-automatica","tag-pwa","tag-react","tag-traduccion-automatica"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.3 - aioseo.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 Fernandez\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" \/>\n\t\t<meta property=\"og:locale\" content=\"es_ES\" \/>\n\t\t<meta property=\"og:site_name\" content=\"IBIDEM EDU |\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Tutorial de React \u2013 C\u00f3mo crear una PWA con traducci\u00f3n autom\u00e1tica\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2021-12-20T17:08:32+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2024-03-04T11:35:29+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Tutorial de React \u2013 C\u00f3mo crear una PWA con traducci\u00f3n autom\u00e1tica\" \/>\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.ibidemgroup.com\\\/edu\\\/react-traduccion-automatica\\\/#article\",\"name\":\"Tutorial de React \\u2013 C\\u00f3mo crear una PWA con traducci\\u00f3n autom\\u00e1tica\",\"headline\":\"Tutorial de React &#8211; C\\u00f3mo crear una PWA con traducci\\u00f3n autom\\u00e1tica\",\"author\":{\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/author\\\/mauri\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/app_traducir_textos_react.jpg\",\"width\":1140,\"height\":380,\"caption\":\"Traducci\\u00f3n Autom\\u00e1tica React\"},\"datePublished\":\"2021-12-20T18:08:32+01:00\",\"dateModified\":\"2024-03-04T12:35:29+01:00\",\"inLanguage\":\"es-ES\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/react-traduccion-automatica\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/react-traduccion-automatica\\\/#webpage\"},\"articleSection\":\"Traduccion Automatica, PWA, react, traducci\\u00f3n autom\\u00e1tica\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/react-traduccion-automatica\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/#listItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/traduccion-automatica\\\/#listItem\",\"name\":\"Traduccion Automatica\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/traduccion-automatica\\\/#listItem\",\"position\":2,\"name\":\"Traduccion Automatica\",\"item\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/traduccion-automatica\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/react-traduccion-automatica\\\/#listItem\",\"name\":\"Tutorial de React &#8211; C\\u00f3mo crear una PWA con traducci\\u00f3n autom\\u00e1tica\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/#listItem\",\"name\":\"Inicio\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/react-traduccion-automatica\\\/#listItem\",\"position\":3,\"name\":\"Tutorial de React &#8211; C\\u00f3mo crear una PWA con traducci\\u00f3n autom\\u00e1tica\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/traduccion-automatica\\\/#listItem\",\"name\":\"Traduccion Automatica\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/#organization\",\"name\":\"IBIDEM EDU\",\"url\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/author\\\/mauri\\\/#author\",\"url\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/author\\\/mauri\\\/\",\"name\":\"Mauri Fernandez\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/react-traduccion-automatica\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b7b325afa7a8af8c21ac26bbaac9118b81803ff10d6c403a1b84df7063a874dd?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Mauri Fernandez\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/react-traduccion-automatica\\\/#webpage\",\"url\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/react-traduccion-automatica\\\/\",\"name\":\"Tutorial de React \\u2013 C\\u00f3mo crear una PWA con traducci\\u00f3n autom\\u00e1tica\",\"inLanguage\":\"es-ES\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/react-traduccion-automatica\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/author\\\/mauri\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/author\\\/mauri\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/app_traducir_textos_react.jpg\",\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/react-traduccion-automatica\\\/#mainImage\",\"width\":1140,\"height\":380,\"caption\":\"Traducci\\u00f3n Autom\\u00e1tica React\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/react-traduccion-automatica\\\/#mainImage\"},\"datePublished\":\"2021-12-20T18:08:32+01:00\",\"dateModified\":\"2024-03-04T12:35:29+01:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/#website\",\"url\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/\",\"name\":\"IBIDEM EDU\",\"inLanguage\":\"es-ES\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.ibidemgroup.com\\\/edu\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Tutorial de React \u2013 C\u00f3mo crear una PWA con traducci\u00f3n autom\u00e1tica","description":"","canonical_url":"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/","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.ibidemgroup.com\/edu\/react-traduccion-automatica\/#article","name":"Tutorial de React \u2013 C\u00f3mo crear una PWA con traducci\u00f3n autom\u00e1tica","headline":"Tutorial de React &#8211; C\u00f3mo crear una PWA con traducci\u00f3n autom\u00e1tica","author":{"@id":"https:\/\/www.ibidemgroup.com\/edu\/author\/mauri\/#author"},"publisher":{"@id":"https:\/\/www.ibidemgroup.com\/edu\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/www.ibidemgroup.com\/edu\/wp-content\/uploads\/2021\/12\/app_traducir_textos_react.jpg","width":1140,"height":380,"caption":"Traducci\u00f3n Autom\u00e1tica React"},"datePublished":"2021-12-20T18:08:32+01:00","dateModified":"2024-03-04T12:35:29+01:00","inLanguage":"es-ES","mainEntityOfPage":{"@id":"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#webpage"},"isPartOf":{"@id":"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#webpage"},"articleSection":"Traduccion Automatica, PWA, react, traducci\u00f3n autom\u00e1tica"},{"@type":"BreadcrumbList","@id":"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.ibidemgroup.com\/edu\/#listItem","position":1,"name":"Inicio","item":"https:\/\/www.ibidemgroup.com\/edu\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.ibidemgroup.com\/edu\/traduccion-automatica\/#listItem","name":"Traduccion Automatica"}},{"@type":"ListItem","@id":"https:\/\/www.ibidemgroup.com\/edu\/traduccion-automatica\/#listItem","position":2,"name":"Traduccion Automatica","item":"https:\/\/www.ibidemgroup.com\/edu\/traduccion-automatica\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#listItem","name":"Tutorial de React &#8211; C\u00f3mo crear una PWA con traducci\u00f3n autom\u00e1tica"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.ibidemgroup.com\/edu\/#listItem","name":"Inicio"}},{"@type":"ListItem","@id":"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#listItem","position":3,"name":"Tutorial de React &#8211; C\u00f3mo crear una PWA con traducci\u00f3n autom\u00e1tica","previousItem":{"@type":"ListItem","@id":"https:\/\/www.ibidemgroup.com\/edu\/traduccion-automatica\/#listItem","name":"Traduccion Automatica"}}]},{"@type":"Organization","@id":"https:\/\/www.ibidemgroup.com\/edu\/#organization","name":"IBIDEM EDU","url":"https:\/\/www.ibidemgroup.com\/edu\/"},{"@type":"Person","@id":"https:\/\/www.ibidemgroup.com\/edu\/author\/mauri\/#author","url":"https:\/\/www.ibidemgroup.com\/edu\/author\/mauri\/","name":"Mauri Fernandez","image":{"@type":"ImageObject","@id":"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/b7b325afa7a8af8c21ac26bbaac9118b81803ff10d6c403a1b84df7063a874dd?s=96&d=mm&r=g","width":96,"height":96,"caption":"Mauri Fernandez"}},{"@type":"WebPage","@id":"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#webpage","url":"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/","name":"Tutorial de React \u2013 C\u00f3mo crear una PWA con traducci\u00f3n autom\u00e1tica","inLanguage":"es-ES","isPartOf":{"@id":"https:\/\/www.ibidemgroup.com\/edu\/#website"},"breadcrumb":{"@id":"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#breadcrumblist"},"author":{"@id":"https:\/\/www.ibidemgroup.com\/edu\/author\/mauri\/#author"},"creator":{"@id":"https:\/\/www.ibidemgroup.com\/edu\/author\/mauri\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/www.ibidemgroup.com\/edu\/wp-content\/uploads\/2021\/12\/app_traducir_textos_react.jpg","@id":"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#mainImage","width":1140,"height":380,"caption":"Traducci\u00f3n Autom\u00e1tica React"},"primaryImageOfPage":{"@id":"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/#mainImage"},"datePublished":"2021-12-20T18:08:32+01:00","dateModified":"2024-03-04T12:35:29+01:00"},{"@type":"WebSite","@id":"https:\/\/www.ibidemgroup.com\/edu\/#website","url":"https:\/\/www.ibidemgroup.com\/edu\/","name":"IBIDEM EDU","inLanguage":"es-ES","publisher":{"@id":"https:\/\/www.ibidemgroup.com\/edu\/#organization"}}]},"og:locale":"es_ES","og:site_name":"IBIDEM EDU |","og:type":"article","og:title":"Tutorial de React \u2013 C\u00f3mo crear una PWA con traducci\u00f3n autom\u00e1tica","og:url":"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/","article:published_time":"2021-12-20T17:08:32+00:00","article:modified_time":"2024-03-04T11:35:29+00:00","twitter:card":"summary_large_image","twitter:title":"Tutorial de React \u2013 C\u00f3mo crear una PWA con traducci\u00f3n autom\u00e1tica"},"aioseo_meta_data":{"post_id":"8075","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":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_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"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,"created":"2023-09-12 16:26:37","updated":"2026-11-02 15:01:27","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.ibidemgroup.com\/edu\/\" title=\"Inicio\">Inicio<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.ibidemgroup.com\/edu\/traduccion-automatica\/\" title=\"Traduccion Automatica\">Traduccion Automatica<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tTutorial de React \u2013 C\u00f3mo crear una PWA con traducci\u00f3n autom\u00e1tica\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Inicio","link":"https:\/\/www.ibidemgroup.com\/edu\/"},{"label":"Traduccion Automatica","link":"https:\/\/www.ibidemgroup.com\/edu\/traduccion-automatica\/"},{"label":"Tutorial de React &#8211; C\u00f3mo crear una PWA con traducci\u00f3n autom\u00e1tica","link":"https:\/\/www.ibidemgroup.com\/edu\/react-traduccion-automatica\/"}],"_links":{"self":[{"href":"https:\/\/www.ibidemgroup.com\/edu\/wp-json\/wp\/v2\/posts\/8075","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ibidemgroup.com\/edu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ibidemgroup.com\/edu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ibidemgroup.com\/edu\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ibidemgroup.com\/edu\/wp-json\/wp\/v2\/comments?post=8075"}],"version-history":[{"count":37,"href":"https:\/\/www.ibidemgroup.com\/edu\/wp-json\/wp\/v2\/posts\/8075\/revisions"}],"predecessor-version":[{"id":10374,"href":"https:\/\/www.ibidemgroup.com\/edu\/wp-json\/wp\/v2\/posts\/8075\/revisions\/10374"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ibidemgroup.com\/edu\/wp-json\/wp\/v2\/media\/8396"}],"wp:attachment":[{"href":"https:\/\/www.ibidemgroup.com\/edu\/wp-json\/wp\/v2\/media?parent=8075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ibidemgroup.com\/edu\/wp-json\/wp\/v2\/categories?post=8075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ibidemgroup.com\/edu\/wp-json\/wp\/v2\/tags?post=8075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}