From 5311ec6d517f1b37c7caba299ecee6275b9b193c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guillem=20Padilla=20Mart=C3=ADn?= Date: Thu, 4 Jul 2019 18:20:54 +0200 Subject: [PATCH] fix(guide): Improve spanish translations (#22661) Fixed big mistakes in titles and descriptions, "Reaccionar" does not make any sense, changed for "React". Fixed more important translation issues. --- guide/spanish/react/index.md | 63 +++++++++++++++++++----------------- 1 file changed, 33 insertions(+), 30 deletions(-) diff --git a/guide/spanish/react/index.md b/guide/spanish/react/index.md index bbcb49f8e0f..2bc179cd4ce 100644 --- a/guide/spanish/react/index.md +++ b/guide/spanish/react/index.md @@ -4,7 +4,7 @@ localeTitle: React --- # React -React es una biblioteca de JavaScript para construir interfaces de usuario. Fue votado como el más querido en la categoría "Marcos, bibliotecas y otras tecnologías" de la Encuesta de desarrolladores 2017 de Stack Overflow. 1 +React es una biblioteca de JavaScript para construir interfaces de usuario. Fue votado como el más querido en la categoría "Marcos de trabajo, bibliotecas y otras tecnologías" de la Encuesta de desarrolladores 2017 de Stack Overflow.1 React es una biblioteca de JavaScript y las aplicaciones React creadas en ella se ejecutan en el navegador, NO en el servidor. Las aplicaciones de este tipo solo se comunican con el servidor cuando es necesario, lo que las hace muy rápidas en comparación con los sitios web tradicionales que obligan al usuario a esperar a que el servidor vuelva a renderizar páginas completas y las envíe al navegador. @@ -12,11 +12,14 @@ React se utiliza para crear interfaces de usuario, lo que el usuario ve en su pa * Es declarativo: React usa un paradigma declarativo que hace que sea más fácil razonar acerca de su aplicación. * Es eficiente: React calcula el conjunto mínimo de cambios necesarios para mantener actualizado su DOM. -* Y es flexible: React trabaja con las bibliotecas y los marcos que ya conoce. +* Y es flexible: React trabaja con las bibliotecas y los marcos de trabajo que ya conoce. ## ¿Por qué aprender React? -1. React implica una composición que es un montón de componentes que envuelven las funcionalidades en un contenedor encapsulado. Muchos sitios web populares utilizan React implementando el patrón arquitectónico MVC. Facebook (Parcialmente), Instagram (Completamente), Khan Academy (Parcialmente), Codecademy (Parcialmente), New York Times (Parcialmente), Yahoo Mail (Completamente), la nueva aplicación de galería de fotos y videos de Dropbox (completamente) son los sitios web populares más conocidos que utilizan React. ¿Cómo se construyen estas grandes aplicaciones utilizando React? La respuesta simple es construir pequeñas aplicaciones o componentes. Ejemplo: +1. React implica algo llamado Composición, que es un montón de componentes que envuelven las funcionalidades en un contenedor encapsulado. Muchos sitios web populares utilizan React implementando el patrón arquitectónico MVC. Facebook (Parcialmente), Instagram (Completamente), Khan Academy (Parcialmente), Codecademy (Parcialmente), New York Times (Parcialmente), Yahoo Mail (Completamente), la nueva aplicación de galería de fotos y videos de Dropbox (completamente) son los sitios web populares conocidos por utilizar React. +¿Cómo se construyen estas grandes aplicaciones utilizando React? +La respuesta simple, es construir pequeñas aplicaciones o componentes. +Ejemplo: ```jsx const Component2 = () => { @@ -55,26 +58,26 @@ Algunas razones para usar React son: 1. Rápido. Las aplicaciones creadas en React pueden manejar actualizaciones complejas y sentirse rápidas y receptivas. 2. Modular. En lugar de escribir archivos de código grandes y densos, puede escribir muchos archivos más pequeños y reutilizables. La modularidad de React puede ser una solución hermosa para los [problemas de mantenimiento](https://en.wikipedia.org/wiki/Spaghetti_code) de JavaScript. -3. Escalable Los programas grandes que muestran una gran cantidad de datos cambiantes es donde React se desempeña mejor. +3. Escalable. Los programas grandes que muestran una gran cantidad de datos cambiantes es donde React se desempeña mejor. 4. Flexible. Puede usar React para proyectos interesantes que no tienen nada que ver con hacer una aplicación web. La gente todavía está descubriendo el potencial de React. [Hay espacio para explorar](https://medium.mybridge.co/22-amazing-open-source-react-projects-cb8230ec719f) . ### DOM virtual La magia de React proviene de su interpretación del DOM y su estrategia para crear interfaces de usuario. -React usa el DOM virtual para representar virtualmente un árbol HTML, y luego, cada vez que cambia un estado y obtenemos un nuevo árbol HTML que debe llevarse al DOM del navegador, en lugar de escribir todo el árbol nuevo, React solo escribirá diferencia entre el nuevo árbol y el árbol anterior (ya que React tiene ambos árboles en la memoria). Este proceso se conoce como reconciliación de árboles. +React usa el DOM virtual para representar virtualmente un árbol HTML, y luego, cada vez que cambia un estado y obtenemos un nuevo árbol HTML que debe llevarse al DOM del navegador, en lugar de escribir todo el árbol nuevo, React solo escribirá las diferencias entre el nuevo árbol y el árbol anterior (ya que React tiene ambos árboles en la memoria). Este proceso se conoce como reconciliación de árboles. ### Reconciliación React tiene un algoritmo de diferencia inteligente que utiliza para regenerar solo en su nodo DOM lo que realmente necesita regenerarse mientras mantiene todo lo demás tal como está. Este proceso de diferenciación es posible debido al DOM virtual de React. -Al usar el DOM virtual, React mantiene la última versión de DOM en la memoria y cuando tiene una nueva versión de DOM para llevar al navegador, esa nueva versión de DOM también estará en la memoria, por lo que React puede calcular la diferencia entre la versión nueva y la antigua. . +Al usar el DOM virtual, React mantiene la última versión de DOM en la memoria y cuando tiene una nueva versión de DOM para llevar al navegador, esa nueva versión de DOM también estará en la memoria, por lo que React puede calcular la diferencia entre la versión nueva y la antigua. React le indicará al navegador que actualice solo la diferencia computada y no todo el nodo DOM. No importa cuántas veces regeneremos nuestra interfaz, React llevará al navegador solo las nuevas actualizaciones "parciales". ## React desde cero -¿Le gustaría comenzar a aprender lo básico de reaccionar sin atascarse creando un entorno de desarrollo? Lo más probable es que si eres nuevo en el desarrollo web, configurar un entorno de desarrollo puede hacer que te sientas un poco intimidado cuando solo estás tratando de aprender React o simplemente aprender sobre Reaccionar por primera vez. +¿Le gustaría comenzar a aprender lo básico de React sin atascarse creando un entorno de desarrollo? Lo más probable es que si eres nuevo en el desarrollo web, configurar un entorno de desarrollo puede hacer que te sientas un poco intimidado cuando solo estás tratando de aprender React o simplemente aprender sobre React por primera vez. En este artículo vamos a ver cómo podemos empezar a utilizar React utilizando solo un editor de texto y un navegador, y nada más. @@ -82,7 +85,7 @@ En este artículo vamos a ver cómo podemos empezar a utilizar React utilizando [### 1 - Configurar el código de la placa de la caldera con Emmet -Comencemos con el paso 1. Comenzaremos con un archivo en nuestro navegador llamado "index.html". Comenzaremos con el código HTML de la placa de la caldera. Para un inicio rápido, recomiendo usar Emmet con cualquier editor de texto que tenga y en la primera línea escribiendo en `html:5` luego presione la tecla Mayús para obtener el código a continuación. O puede seguir adelante y copiar y pegar el código de abajo. +Comencemos con el paso 1. Comenzaremos con un archivo en nuestro navegador llamado "index.html". Utilizaremos un boiler plate code (plantilla de código) con el código HTML. Para un inicio rápido, recomiendo usar Emmet con cualquier editor de texto que tenga y en la primera línea escribiendo en `html:5` luego presione la tecla `TAB` para generar el código. O puede copiar y pegar el código de abajo. ```javascript html:5 @@ -107,11 +110,11 @@ Esto resultará en el siguiente código: Podemos rellenar el título de "¡Hora de React!". -Este contenido no aparecerá en su página web. Cualquier cosa en la sección principal del archivo HTML serán metadatos que nuestro navegador usará para interpretar nuestro código en la sección del cuerpo. Este título será lo que aparece en la pestaña de nuestra página, no en realidad en la página. +Este contenido no aparecerá en su página web. Cualquier cosa en la sección principal del archivo HTML serán metadatos que nuestro navegador usará para interpretar nuestro código en la sección del cuerpo. Este título será lo que aparece en la pestaña de nuestra página, no en el cuerpo de la página. -### 2 - Obtenga etiquetas de script para aprovechar el poder de React y las bibliotecas de Babel +### 2 - Obtenga etiquetas Script para aprovechar el poder de React y las bibliotecas de Babel -Ok, el punto uno está marcado en nuestra lista. Veamos el artículo dos. Vamos a configurar nuestro entorno de desarrollador utilizando etiquetas de script para traer a React y Babel. Este no es un entorno de desarrollador de la vida real. Eso sería una configuración bastante elaborada. También nos dejaría con una gran cantidad de códigos de calderas y bibliotecas que nos sacarían del tema de aprender lo básico de React. El objetivo de esta serie es repasar la sintaxis básica de React y comenzar a codificar. Vamos a utilizar etiquetas ` ... - Time to React! + Hora de React! ``` Usted es libre de usar versiones más actualizadas de estas bibliotecas a medida que salen. No deben crear ningún cambio importante en el contenido que cubrimos. -¿Qué estamos haciendo aquí? El elemento: HTML ` ``` @@ -166,44 +169,44 @@ El primer argumento es el "qué" de React. El segundo argumento es el "dónde" d ```javascript -
React has not rendered yet
+
React no se ha procesado todavía
```](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI) -[El estado](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI) [oficial de los documentos de reacción](https://reactjs.org/docs/introducing-jsx.html) : "Esta sintaxis de etiqueta divertida no es ni una cadena ni HTML. Se llama JSX y es una extensión de sintaxis para JavaScript. Recomendamos usarlo con React para describir cómo debería ser la interfaz de usuario. JSX puede recordarle un lenguaje de plantilla, pero viene con todo el poder de JavaScript. JSX produce "elementos" de React. +[El estado](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI) [oficial de los documentos de React](https://reactjs.org/docs/introducing-jsx.html) : "Esta divertida sintaxis de etiquetas no es ni una cadena ni HTML. Se llama JSX y es una extensión de sintaxis para JavaScript. Recomendamos usarlo con React para describir cómo debería ser la interfaz de usuario. JSX puede recordarle un lenguaje de plantilla, pero viene con todo el poder de JavaScript. JSX produce "elementos" de React. Muchas veces, JSX enloquece a las personas que han sido desarrolladores por un tiempo porque parece HTML. A una edad muy temprana los desarrolladores aprenden a separar las preocupaciones. HTML tiene su lugar, CSS tiene su lugar y JavaScript tiene su lugar. JSX parece desdibujar las líneas. Está utilizando lo que parece HTML, pero como dice Facebook, viene con todo el poder de JavaScript. -Esto puede asustar a los veteranos, así que muchos tutoriales de reacción comienzan sin JSX, lo que puede ser bastante complejo. No haremos eso. Debido a que este curso está dirigido a aquellos que son muy jóvenes en sus carreras, es posible que no traigas esas banderas rojas cuando veas esta sintaxis. +Esto puede asustar a los veteranos, así que muchos tutoriales de React comienzan sin JSX, lo que puede ser bastante complejo. No haremos eso. Debido a que este curso está dirigido a aquellos que son muy jóvenes en sus carreras, es posible que no traigas esas banderas rojas cuando veas esta sintaxis. -Y JSX es realmente muy intuitivo. Probablemente pueda leer este código con bastante facilidad y ver que esta va a ser la etiqueta de encabezado más grande que muestre el texto "Hola mundo". Sin misterio y bastante sencillo. Ahora, veamos cuál sería nuestro segundo argumento. +Y JSX es realmente muy intuitivo. Probablemente pueda leer este código con bastante facilidad y ver que esta va a ser la etiqueta de encabezado más grande que muestre el texto "Hola Mundo". Sin misterio y bastante sencillo. Ahora, veamos cuál sería nuestro segundo argumento. ```javascript -
React has not rendered yet
+
React no se ha procesado todavía
``` -Aquí es donde queremos que nuestro contenido de reacción se rinda al dominio. Probablemente has hecho esto unas cuantas veces en el pasado. Solo escribiremos `document.getElementById()` . Y pasaremos al argumento de la id de la aplicación. Y eso es todo. Ahora nos dirigiremos al div con el id de la aplicación para insertar nuestro contenido de reacción. +Aquí es donde queremos que nuestro contenido de reacción se rinda al dominio. Probablemente has hecho esto unas cuantas veces en el pasado. Solo escribiremos `document.getElementById()` . Y pasaremos al argumento el id "app". Y eso es todo. Ahora nos dirigiremos al div el id "app" para insertar nuestro contenido de React. -Queremos asegurarnos de que nuestro contenido está guardado. Adelante, abre esto en el navegador y deberías ver "Hola mundo". Como probablemente pueda adivinar, usar React no es la forma más rápida ni mejor de crear una aplicación Hello World. Todavía no estamos viendo los beneficios de esto. Pero ahora, sabemos que todo está funcionando. +Queremos asegurarnos de que nuestro contenido está guardado. Adelante, abre esto en el navegador y deberías ver "Hola Mundo". Como probablemente pueda adivinar, usar React no es la forma más rápida ni mejor de crear una aplicación Hola Mundo. Todavía no estamos viendo los beneficios de esto. Pero ahora, sabemos que todo está funcionando. Adelante, abre la consola y mira los "elementos". Puede hacerlo en un mac con el comando + shift + j o en un Windows y Linux: Ctrl + Shift + J -Si hace clic en la etiqueta de cabecera podemos ver nuestras bibliotecas de scripts que incluimos. Entonces podemos bajar al cuerpo de nuestro documento. Vamos a hacer clic en nuestro div con el id de "aplicación". Y cuando lo hacemos, vemos nuestra etiqueta `

` con el contenido "Hello World". +Si hace clic en la etiqueta de cabecera podemos ver nuestras bibliotecas de scripts que incluimos. Entonces podemos bajar al cuerpo de nuestro documento. Vamos a hacer clic en nuestro div con el id "app". Y cuando lo hacemos, vemos nuestra etiqueta `

` con el contenido "Hola Mundo". [Ver el código completo aquí](https://github.com/robgmerrill/hello-react/blob/master/section-one/index.html) @@ -215,7 +218,7 @@ o ### Resumen -Así que vamos a hacer un resumen rápido. En nuestra etiqueta principal, tomamos las etiquetas de secuencia de comandos de React, ReactDOM y Babel. Estas son las herramientas que nuestro navegador necesita en sus metadatos para leer nuestro código React y JSX en forma específica. Luego localizamos la posición dentro del DOM en la que queríamos insertar nuestro React creando un elemento div con el id de "aplicación". A continuación, creamos una etiqueta de script para ingresar nuestro código React. Utilizamos el método ReactDOM.render () que toma dos argumentos. El "qué" del contenido de React, en este caso nuestro JSX, y el segundo argumento es el "dónde" en el que desea insertar el contenido de React en el DOM. En este caso es la ubicación con el id de "app". +Así que vamos a hacer un resumen rápido. En nuestra etiqueta principal, tomamos las etiquetas de secuencia de comandos de React, ReactDOM y Babel. Estas son las herramientas que nuestro navegador necesita en sus metadatos para leer nuestro código React y JSX en forma específica. Luego localizamos la posición dentro del DOM en la que queríamos insertar nuestro React creando un elemento div con el id "app". A continuación, creamos una etiqueta de script para ingresar nuestro código React. Utilizamos el método ReactDOM.render () que toma dos argumentos. El "qué" del contenido de React, en este caso nuestro JSX, y el segundo argumento es el "dónde" en el que desea insertar el contenido de React en el DOM. En este caso es la ubicación con el id "app". ](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI)