From fd29581761c62367401cf2c1b07b1f8b78ee413a Mon Sep 17 00:00:00 2001 From: S Date: Thu, 31 Jan 2019 15:15:49 -0500 Subject: [PATCH 1/4] Translate introducing-jsx to Spanish I start with the spanish translation according to the second task of the pull request. --- content/docs/introducing-jsx.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md index edc5c868c..fdf0e6239 100644 --- a/content/docs/introducing-jsx.md +++ b/content/docs/introducing-jsx.md @@ -6,17 +6,17 @@ prev: hello-world.html next: rendering-elements.html --- -Consider this variable declaration: +Considera la declaración de esta variable: ```js const element =

Hello, world!

; ``` -This funny tag syntax is neither a string nor HTML. +Esta divertida sintaxis de etiquetas no es ni un string ni HTML. -It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. +Esto es llamado JSX, y es una extensión de la sintaxis de JavaScript. Recomendamos usarlo con React para describir cómo debería ser la interfaz de usuario. JSX puede recordarte a un lenguaje de plantillas, pero viene con todo el poder de JavaScript. -JSX produces React "elements". We will explore rendering them to the DOM in the [next section](/docs/rendering-elements.html). Below, you can find the basics of JSX necessary to get you started. +JSX produce "elementos" de React. Exploraremos como renderizarlos en el DOM en la [siguiente sección](/docs/rendering-elements.html). A continuación puedes encontrar lo básico de JSX que será necesario para empezar. ### Why JSX? From 96492ea8634c0bd0fd1b553cfa5bf978afd50d9f Mon Sep 17 00:00:00 2001 From: Carlos Sz Date: Thu, 31 Jan 2019 19:43:37 -0500 Subject: [PATCH 2/4] wip: translating introducing jsx to spanish --- content/docs/introducing-jsx.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md index fdf0e6239..83879c8bd 100644 --- a/content/docs/introducing-jsx.md +++ b/content/docs/introducing-jsx.md @@ -1,6 +1,6 @@ --- id: introducing-jsx -title: Introducing JSX +title: Presentando JSX permalink: docs/introducing-jsx.html prev: hello-world.html next: rendering-elements.html @@ -12,25 +12,25 @@ Considera la declaración de esta variable: const element =

Hello, world!

; ``` -Esta divertida sintaxis de etiquetas no es ni un string ni HTML. +Esta curiosa sintaxis de etiquetas no es ni un string ni HTML. -Esto es llamado JSX, y es una extensión de la sintaxis de JavaScript. Recomendamos usarlo con React para describir cómo debería ser la interfaz de usuario. JSX puede recordarte a un lenguaje de plantillas, pero viene con todo el poder de JavaScript. +Se llama JSX, y es una extensión de la sintaxis de JavaScript. Recomendamos usarlo con React para describir cómo debería ser la interfaz de usuario. JSX puede recordarte a un lenguaje de plantillas, pero viene con todo el poder de JavaScript. JSX produce "elementos" de React. Exploraremos como renderizarlos en el DOM en la [siguiente sección](/docs/rendering-elements.html). A continuación puedes encontrar lo básico de JSX que será necesario para empezar. -### Why JSX? +### Por qué JSX? -React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display. +React acepta el hecho de que la lógica de renderizado está intrínsecamente unida a la lógica de la interfaz de usuario: cómo se manejan los eventos, cómo cambia el estado con el tiempo y cómo se preparan los datos para su visualización. -Instead of artificially separating *technologies* by putting markup and logic in separate files, React [separates *concerns*](https://en.wikipedia.org/wiki/Separation_of_concerns) with loosely coupled units called "components" that contain both. We will come back to components in a [further section](/docs/components-and-props.html), but if you're not yet comfortable putting markup in JS, [this talk](https://www.youtube.com/watch?v=x7cQ3mrcKaY) might convince you otherwise. +En lugar de separar artificialmente *tecnologías* poniendo el maquetado y la lógica en archivos separados, React [separa *intereses*](https://es.wikipedia.org/wiki/Separaci%C3%B3n_de_intereses) con unidades ligeramente acopladas llamadas "componentes" que contienen ambas. Volveremos a los componentes en [otra sección](/docs/components-and-props.html), pero si aún no te sientes cómodo maquetando en JS, [esta charla](https://www.youtube.com/watch?v=x7cQ3mrcKaY) podría convencerte de lo contrario. -React [doesn't require](/docs/react-without-jsx.html) using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages. +React [no requiere](/docs/react-without-jsx.html) usar JSX, pero la mayoría de la gente lo encuentra útil como ayuda visual cuando trabajan con interfaz de usuario dentro del código Javascript. Esto también permite que React muestre mensajes de error o advertencia más útiles. -With that out of the way, let's get started! +Con eso fuera del camino, ¡empecemos! -### Embedding Expressions in JSX +### Insertando expresiones en JSX -In the example below, we declare a variable called `name` and then use it inside JSX by wrapping it in curly braces: +En el ejemplo a continuación, declaramos una variable llamada `name` y luego la usamos dentro del JSX envolviéndola dentro de llaves: ```js{1,2} const name = 'Josh Perez'; @@ -42,9 +42,9 @@ ReactDOM.render( ); ``` -You can put any valid [JavaScript expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) inside the curly braces in JSX. For example, `2 + 2`, `user.firstName`, or `formatName(user)` are all valid JavaScript expressions. +Puedes poner cualquier [expresión de JavaScript](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Expressions_and_Operators) dentro de llaves en JSX. Por ejemplo, `2 + 2`, `user.firstName`, o `formatName(user)` son todas expresiones válidas de Javascript. -In the example below, we embed the result of calling a JavaScript function, `formatName(user)`, into an `

` element. +En el ejemplo a continuación, insertamos el resultado de llamar la función de JavaScript, `formatName(user)`, dentro de un elemento `

`. ```js{12} function formatName(user) { @@ -70,13 +70,13 @@ ReactDOM.render( [](codepen://introducing-jsx) -We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](http://stackoverflow.com/q/2846283). +Dividimos JSX en varias líneas para facilitar la lectura. Aunque no es necesario, cuando hagas esto también te recomendamos envolverlo entre paréntesis para evitar errores por la [inserción automática del punto y coma](http://stackoverflow.com/q/2846283). -### JSX is an Expression Too +### JSX también es una expresión -After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects. +Después de compilarse, las expresiones JSX se convierten en llamadas a funciones JavaScript regulares y se evalúan en objetos JavaScript. -This means that you can use JSX inside of `if` statements and `for` loops, assign it to variables, accept it as arguments, and return it from functions: +Esto significa que puedes usar JSX dentro de declaraciones `if` y bucles `for`, asignarlo a variables, aceptarlo como argumentos, y retornarlo como funciones: ```js{3,5} function getGreeting(user) { From 0878d6f44f5062b86eed98845c9489f905330561 Mon Sep 17 00:00:00 2001 From: Carlos Sz Date: Fri, 1 Feb 2019 13:56:00 -0500 Subject: [PATCH 3/4] finishing introducing-jsx ES --- content/docs/introducing-jsx.md | 42 ++++++++++++++++----------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md index 83879c8bd..c0406487f 100644 --- a/content/docs/introducing-jsx.md +++ b/content/docs/introducing-jsx.md @@ -87,37 +87,37 @@ function getGreeting(user) { } ``` -### Specifying Attributes with JSX +### Especificando atributos con jsx -You may use quotes to specify string literals as attributes: +Puedes utilizar comillas para especificar strings literales como atributos: ```js const element =
; ``` -You may also use curly braces to embed a JavaScript expression in an attribute: +También puedes usar comillas para insertar una expresión JavaScript en un atributo: ```js const element = ; ``` -Don't put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute. +No pongas comillas rodeando llaves cuando insertes una expresión JavaScript en un atributo. Debes utilizar comillas (para los valores de los strings) o llaves (para las expresiones), pero no ambas en el mismo atributo. >**Warning:** > ->Since JSX is closer to JavaScript than to HTML, React DOM uses `camelCase` property naming convention instead of HTML attribute names. +>Dado que JSX está más cercano a JavaScript que a HTML, React DOM usa la convención de nomenclatura `camelCase` en vez de nombres de atributos HTML. > ->For example, `class` becomes [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) in JSX, and `tabindex` becomes [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex). +>Por ejemplo, `class` se vuelve [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) en JSX, y `tabindex` se vuelve [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex). -### Specifying Children with JSX +### Especificando hijos con JSX -If a tag is empty, you may close it immediately with `/>`, like XML: +Si una etiqueta está vacía, puedes cerrarla inmediatamente con `/>`, como en XML: ```js const element = ; ``` -JSX tags may contain children: +Las etiquetas de Javascript pueden contener hijos: ```js const element = ( @@ -128,23 +128,23 @@ const element = ( ); ``` -### JSX Prevents Injection Attacks +### JSX Previene Ataques de Inyección -It is safe to embed user input in JSX: +Es seguro insertar datos ingresados por el usuario en JSX: ```js const title = response.potentiallyMaliciousInput; -// This is safe: +// Esto es seguro: const element =

{title}

; ``` -By default, React DOM [escapes](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks. +Por defecto, React DOM [escapa](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) cualquier valor insertado en JSX antes de renderizarlo. De este modo, se asegura de que nunca se pueda insertar nada que no esté explícitamente escrito en tú aplicación. Todo es convertido en un string antes de ser renderizado. Esto ayuda a prevenir vulnerabilidades [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting). -### JSX Represents Objects +### JSX Representa Objetos -Babel compiles JSX down to `React.createElement()` calls. +Babel compila JSX bajo llamados a `React.createElement()`. -These two examples are identical: +Estos dos ejemplos son identicos: ```js const element = ( @@ -162,10 +162,10 @@ const element = React.createElement( ); ``` -`React.createElement()` performs a few checks to help you write bug-free code but essentially it creates an object like this: +`React.createElement()` realiza algunas comprobaciones para ayudarte a escribir código libre de errores, pero, en esencia crea un objeto como este: ```js -// Note: this structure is simplified +// Nota: Esta estructura está simplificada const element = { type: 'h1', props: { @@ -175,10 +175,10 @@ const element = { }; ``` -These objects are called "React elements". You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date. +Estos objetos son llamados "Elementos de React". Puedes pensar en ellos como descripciones de lo que quieres ver en pantalla. React lee estos objetos y los usa para construir el DOM y mantenerlo actualizado. -We will explore rendering React elements to the DOM in the next section. +Vamos a explorar el renderizado de los elementos de React al DOM en la siguiente sección. >**Tip:** > ->We recommend using the ["Babel" language definition](http://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it. +>Recomendamos usar la [Definición del lenguaje en "Babel"](http://babeljs.io/docs/editors) en tu editor de elección para que tanto el código en ES6 como el código en JSX sea resaltado apropiadamente. Este sitio web utiliza el esquema de color [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/), el cual es compatible con esto. From cee4fcea4802879a73c6ce910fff1eda88169e26 Mon Sep 17 00:00:00 2001 From: Carlos Sz Date: Sun, 3 Feb 2019 17:24:03 -0500 Subject: [PATCH 4/4] fixed language in urls --- content/docs/introducing-jsx.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md index c0406487f..6e5a51a42 100644 --- a/content/docs/introducing-jsx.md +++ b/content/docs/introducing-jsx.md @@ -18,7 +18,7 @@ Se llama JSX, y es una extensión de la sintaxis de JavaScript. Recomendamos usa JSX produce "elementos" de React. Exploraremos como renderizarlos en el DOM en la [siguiente sección](/docs/rendering-elements.html). A continuación puedes encontrar lo básico de JSX que será necesario para empezar. -### Por qué JSX? +### ¿Por qué JSX? React acepta el hecho de que la lógica de renderizado está intrínsecamente unida a la lógica de la interfaz de usuario: cómo se manejan los eventos, cómo cambia el estado con el tiempo y cómo se preparan los datos para su visualización. @@ -95,7 +95,7 @@ Puedes utilizar comillas para especificar strings literales como atributos: const element =
; ``` -También puedes usar comillas para insertar una expresión JavaScript en un atributo: +También puedes usar llaves para insertar una expresión JavaScript en un atributo: ```js const element = ; @@ -107,7 +107,7 @@ No pongas comillas rodeando llaves cuando insertes una expresión JavaScript en > >Dado que JSX está más cercano a JavaScript que a HTML, React DOM usa la convención de nomenclatura `camelCase` en vez de nombres de atributos HTML. > ->Por ejemplo, `class` se vuelve [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) en JSX, y `tabindex` se vuelve [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex). +>Por ejemplo, `class` se vuelve [`className`](https://developer.mozilla.org/es/docs/Web/API/Element/className) en JSX, y `tabindex` se vuelve [`tabIndex`](https://developer.mozilla.org/es/docs/Web/API/HTMLElement/tabIndex). ### Especificando hijos con JSX @@ -138,7 +138,7 @@ const title = response.potentiallyMaliciousInput; const element =

{title}

; ``` -Por defecto, React DOM [escapa](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) cualquier valor insertado en JSX antes de renderizarlo. De este modo, se asegura de que nunca se pueda insertar nada que no esté explícitamente escrito en tú aplicación. Todo es convertido en un string antes de ser renderizado. Esto ayuda a prevenir vulnerabilidades [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting). +Por defecto, React DOM [escapa](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) cualquier valor insertado en JSX antes de renderizarlo. De este modo, se asegura de que nunca se pueda insertar nada que no esté explícitamente escrito en tú aplicación. Todo es convertido en un string antes de ser renderizado. Esto ayuda a prevenir vulnerabilidades [XSS (cross-site-scripting)](https://es.wikipedia.org/wiki/Cross-site_scripting). ### JSX Representa Objetos