From 62e0c7ac1621d5a24fb7129a39d6d43076b803e8 Mon Sep 17 00:00:00 2001 From: Ivan Medina Date: Sun, 3 Feb 2019 19:33:36 -0600 Subject: [PATCH 01/27] Translate before we start section --- content/tutorial/nav.yml | 6 +++--- content/tutorial/tutorial.md | 30 +++++++++++++++--------------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml index 8d498ab14..ffcf7ea89 100644 --- a/content/tutorial/nav.yml +++ b/content/tutorial/nav.yml @@ -1,8 +1,8 @@ - title: Tutorial items: - - id: before-we-start-the-tutorial - title: Before We Start the Tutorial - href: /tutorial/tutorial.html#before-we-start-the-tutorial + - id: antes-de-empezar-el-tutorial + title: Antes de empezar el tutorial + href: /tutorial/tutorial.html#antes-de-empezar-el-tutorial forceInternal: true subitems: - id: what-are-we-building diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 3e9065555..c682b7fc0 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -1,6 +1,6 @@ --- id: tutorial -title: "Tutorial: Intro to React" +title: "Tutorial: Intro a React" layout: tutorial sectionid: tutorial permalink: tutorial/tutorial.html @@ -12,26 +12,26 @@ redirect_from: - "docs/tutorial-zh-CN.html" --- -This tutorial doesn't assume any existing React knowledge. +Este tutorial no asume ningún conocimiento previo sobre React. -## Before We Start the Tutorial +## Antes de empezar el tutorial -We will build a small game during this tutorial. **You might be tempted to skip it because you're not building games -- but give it a chance.** The techniques you'll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a deep understanding of React. +Vamos a contruir un pequeño juego durante este tutorial. **Deberás estar tentado a obviarlo porque tú no estás construyendo juegos en el día a día, pero dale una oportunidad.** Las técnicas que aprenderás en el tutorial son fundamentales para construir cualquier aplicación de React, y dominarlo te dará un entendimiento profundo de React. >Tip > ->This tutorial is designed for people who prefer to **learn by doing**. If you prefer learning concepts from the ground up, check out our [step-by-step guide](/docs/hello-world.html). You might find this tutorial and the guide complementary to each other. +>Este tutorial está diseñado para personas que prefieren **aprender haciendo**. Si tu prefieres aprender los conceptos desde el principio, revisa nuestra [guía paso a paso](/docs/hello-world.html). Podrías encontrar este tutorial y la guía, complementarias entre sí. -The tutorial is divided into several sections: +Este tutorial está dividido en varias secciones: -* [Setup for the Tutorial](#setup-for-the-tutorial) will give you **a starting point** to follow the tutorial. -* [Overview](#overview) will teach you **the fundamentals** of React: components, props, and state. -* [Completing the Game](#completing-the-game) will teach you **the most common techniques** in React development. -* [Adding Time Travel](#adding-time-travel) will give you **a deeper insight** into the unique strengths of React. +* [Setup para el tutorial](#setup-para-el-tutorial) te dará un punto de partida para seguir el tutorial. +* [Visión general](#vision-general) te enseñará **los fundamentos** de React: componentes, props y estado. +* [Completando el juego](#completando-el-juego) te enseñará **las técnicas más comunes** en desarrollo de React. +* [Agregando Time Travel](#agregando-time-travel) te dará una **visión más profunda** de las fortalezas únicas de React. -You don't have to complete all of the sections at once to get the value out of this tutorial. Try to get as far as you can -- even if it's one or two sections. +No tienes que completar todas las secciones a la vez para obtener el valor de este tutorial. Prueba llegar tan lejos como puedas, incluso si es una o dos secciones. -It's fine to copy and paste code as you're following along the tutorial, but we recommend to type it by hand. This will help you develop a muscle memory and a stronger understanding. +Está bien copiar y pegar el código mientras sigues el tutorial, pero te recomendamos que lo escribaas a mano. Esto te ayudará a desarrollar una memoria muscular y un entendimiento más sólido. ### What Are We Building? @@ -80,7 +80,7 @@ This setup requires more work but allows you to complete the tutorial using an e npx create-react-app my-app ``` -3. Delete all files in the `src/` folder of the new project +3. Delete all files in the `src/` folder of the new project > Note: **don't delete the entire `src` folder, just the original source files inside it.**. We'll replace the default source files with examples for this project in the next step. @@ -225,7 +225,7 @@ Congratulations! You've just "passed a prop" from a parent Board component to a ### Making an Interactive Component -Let's fill the Square component with an "X" when we click it. +Let's fill the Square component with an "X" when we click it. First, change the button tag that is returned from the Square component's `render()` function to this: ```javascript{4} @@ -1013,7 +1013,7 @@ In JavaScript, arrays have a [`map()` method](https://developer.mozilla.org/en-U ```js const numbers = [1, 2, 3]; const doubled = numbers.map(x => x * 2); // [2, 4, 6] -``` +``` Using the `map` method, we can map our history of moves to React elements representing buttons on the screen, and display a list of buttons to "jump" to past moves. From 74880805e9300d93c954c8ea1da4449ec540e80f Mon Sep 17 00:00:00 2001 From: Ivan Medina Date: Sun, 3 Feb 2019 19:47:35 -0600 Subject: [PATCH 02/27] Translate what we are building section --- content/tutorial/nav.yml | 6 +++--- content/tutorial/tutorial.md | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml index ffcf7ea89..75b16a9c8 100644 --- a/content/tutorial/nav.yml +++ b/content/tutorial/nav.yml @@ -5,9 +5,9 @@ href: /tutorial/tutorial.html#antes-de-empezar-el-tutorial forceInternal: true subitems: - - id: what-are-we-building - title: What Are We Building? - href: /tutorial/tutorial.html#what-are-we-building + - id: que-estamos-construyendo + title: ¿Qué estamos construyendo? + href: /tutorial/tutorial.html#que-estamos-construyendo forceInternal: true - id: prerequisites title: Prerequisites diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index c682b7fc0..63f5b5b68 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -33,15 +33,15 @@ No tienes que completar todas las secciones a la vez para obtener el valor de es Está bien copiar y pegar el código mientras sigues el tutorial, pero te recomendamos que lo escribaas a mano. Esto te ayudará a desarrollar una memoria muscular y un entendimiento más sólido. -### What Are We Building? +### ¿Qué estamos construyendo? -In this tutorial, we'll show how to build an interactive tic-tac-toe game with React. +En este tutorial, te mostraremoscómo construir un juego de tic-tac-toe interactivo con React. -You can see what we'll be building here: **[Final Result](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. If the code doesn't make sense to you, or if you are unfamiliar with the code's syntax, don't worry! The goal of this tutorial is to help you understand React and its syntax. +Puedes ver lo que construiremos aquí: **[Resultado Final](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Si el código no te hace sentido, o si no estás familiarizado con la sintaxis de código, ¡no te preocupes! El objetivo de este tutorial es ayudarte a entender React y su sintaxis. -We recommend that you check out the tic-tac-toe game before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and is updated as the game progresses. +Recomentamos que revises el juego de tic-tac-toe antes de continuar con el tutorial. Una de las características que notarás es que hay una lista enumerada a la derecha del tablero del jugador. Esta lista da una historia de todos los movimientos que han ocurrido en el juego, y se va actualizando conforme el juego progresa. -You can close the tic-tac-toe game once you're familiar with it. We'll be starting from a simpler template in this tutorial. Our next step is to set you up so that you can start building the game. +Puedes cerrar el juego de tic-tac-toe una vez que te familiarizaste con él. Empezaremos desde una plantilla más simple en este tutorial. Nuestro siguiente paso es configurarlo de tal forma que puedas empezar a construir el juego. ### Prerequisites From 8391373c24bce8dabed8c59faae894957a2d350a Mon Sep 17 00:00:00 2001 From: Ivan Medina Date: Sun, 3 Feb 2019 19:58:49 -0600 Subject: [PATCH 03/27] Translate prerequisites section --- content/tutorial/nav.yml | 6 +++--- content/tutorial/tutorial.md | 7 ++++--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml index 75b16a9c8..46b08c3f3 100644 --- a/content/tutorial/nav.yml +++ b/content/tutorial/nav.yml @@ -9,9 +9,9 @@ title: ¿Qué estamos construyendo? href: /tutorial/tutorial.html#que-estamos-construyendo forceInternal: true - - id: prerequisites - title: Prerequisites - href: /tutorial/tutorial.html#prerequisites + - id: prerequisitos + title: Prerequisitos + href: /tutorial/tutorial.html#prerequisitos forceInternal: true - id: setup-for-the-tutorial title: Setup for the Tutorial diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 63f5b5b68..f65cd1687 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -34,6 +34,7 @@ No tienes que completar todas las secciones a la vez para obtener el valor de es Está bien copiar y pegar el código mientras sigues el tutorial, pero te recomendamos que lo escribaas a mano. Esto te ayudará a desarrollar una memoria muscular y un entendimiento más sólido. ### ¿Qué estamos construyendo? + En este tutorial, te mostraremoscómo construir un juego de tic-tac-toe interactivo con React. @@ -43,11 +44,11 @@ Recomentamos que revises el juego de tic-tac-toe antes de continuar con el tutor Puedes cerrar el juego de tic-tac-toe una vez que te familiarizaste con él. Empezaremos desde una plantilla más simple en este tutorial. Nuestro siguiente paso es configurarlo de tal forma que puedas empezar a construir el juego. -### Prerequisites +### Prerequisitos -We'll assume that you have some familiarity with HTML and JavaScript, but you should be able to follow along even if you're coming from a different programming language. We'll also assume that you're familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes. +Asumimos que tienes cierta familiaridad con HTML y JavaScript, pero deberías ser capaz de seguir adelante incluso si vienes de un lenguaje de programación diferente. También suponemos que estás familiarizado con conceptos de programación como funciones, objetos, arrays, y en menor medida, clases. -If you need to review JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6 -- a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel://es5-syntax-example) to check what ES6 code compiles to. +Si necesitas revisar JavaScript, te recomendamos leer [esta guía](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Ten en cuenta que también usamos algunas características de ES6, una versión reciente de JavaScript. En este tutorial, estamos usando [funciones flecha](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [clases](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), sentencias [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) y [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const). Puedes usar el [Babel REPL](babel://es5-syntax-example) para revisar a qué código compila ES6. ## Setup for the Tutorial From ab0390d820c0a46321a19781ff28f62a3e379060 Mon Sep 17 00:00:00 2001 From: Ivan Medina Date: Thu, 7 Feb 2019 08:43:58 -0600 Subject: [PATCH 04/27] Translate setup for the tutorial section --- content/tutorial/tutorial.md | 50 ++++++++++++++++++------------------ 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index f65cd1687..1b96065fd 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -24,7 +24,7 @@ Vamos a contruir un pequeño juego durante este tutorial. **Deberás estar tenta Este tutorial está dividido en varias secciones: -* [Setup para el tutorial](#setup-para-el-tutorial) te dará un punto de partida para seguir el tutorial. +* [Configuración para el tutorial](#configuracion-para-el-tutorial) te dará un punto de partida para seguir el tutorial. * [Visión general](#vision-general) te enseñará **los fundamentos** de React: componentes, props y estado. * [Completando el juego](#completando-el-juego) te enseñará **las técnicas más comunes** en desarrollo de React. * [Agregando Time Travel](#agregando-time-travel) te dará una **visión más profunda** de las fortalezas únicas de React. @@ -50,60 +50,60 @@ Asumimos que tienes cierta familiaridad con HTML y JavaScript, pero deberías se Si necesitas revisar JavaScript, te recomendamos leer [esta guía](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Ten en cuenta que también usamos algunas características de ES6, una versión reciente de JavaScript. En este tutorial, estamos usando [funciones flecha](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [clases](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), sentencias [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) y [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const). Puedes usar el [Babel REPL](babel://es5-syntax-example) para revisar a qué código compila ES6. -## Setup for the Tutorial +## Configuración para el tutorial -There are two ways to complete this tutorial: you can either write the code in your browser, or you can set up a local development environment on your computer. +Hay dos maneras de completar este tutorial: puedes escribir el código en tu navegador, o puedes configurar tu entorno de desarrollo local en tu computador. -### Setup Option 1: Write Code in the Browser +### Opción de configuración 1: Escribe código en el navegador -This is the quickest way to get started! +¡Ésta es la forma más rápida de empezar! -First, open this **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** in a new tab. The new tab should display an empty tic-tac-toe game board and React code. We will be editing the React code in this tutorial. +Primero, abre este **[código inicial](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** en una nueva pestaña. La nueva pestaña deberá mostrar un tablero vacío del juego de tic-tac-toe y código de React. Estaremos editando el código de React en este tutorial. -You can now skip the second setup option, and go to the [Overview](#overview) section to get an overview of React. +Ahora puedes saltarte a la segunda opción de configuración o ir a la sección de [visión general](#vision-general) para obtener una idea general de React. -### Setup Option 2: Local Development Environment +### Opción de configuración 2: Entorno de desarrollo local -This is completely optional and not required for this tutorial! +¡Ésta es completamente opcional y no es requeridad para éste tutorial!
-Optional: Instructions for following along locally using your preferred text editor +Opcional: Instrucciones para seguir adelante localmente usando tu editor de texto preferido -This setup requires more work but allows you to complete the tutorial using an editor of your choice. Here are the steps to follow: +Esta configuración requiere más trabajo pero te permite completar el tutorial usando un editor de tu elección. Aquí los pasos a seguir: -1. Make sure you have a recent version of [Node.js](https://nodejs.org/en/) installed. -2. Follow the [installation instructions for Create React App](/docs/create-a-new-react-app.html#create-react-app) to make a new project. +1. Asegúrate de tener una versión reciente de [Node.js](https://nodejs.org/en/) instalada. +2. Sigue las [instrucciones de instalación de Create React App](/docs/create-a-new-react-app.html#create-react-app) para hacer un nuevo proyecto. ```bash npx create-react-app my-app ``` -3. Delete all files in the `src/` folder of the new project +1. Elimina todos los archivos en la carpeta `src/` del nuevo proyecto. -> Note: **don't delete the entire `src` folder, just the original source files inside it.**. We'll replace the default source files with examples for this project in the next step. +> Nota: **no elimines la carpeta `src` por completo, solo los archivos de código fuente originales dentro de ella**. Reemplazaremos los archivos de código fuente por defecto con ejemplos para este proyecto en el siguiente paso. ```bash cd my-app cd src -# If you're using a Mac or Linux: +# Si usas Mac ó Linux: rm -f * -# Or, if you're on Windows: +# Ó, si usas Windows: del * -# Then, switch back to the project folder +# Luego, regresa a la carpeta del proyecto cd .. ``` -4. Add a file named `index.css` in the `src/` folder with [this CSS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0100). +1. Agrega un archivo llamado `index.css` en la carpeta `src/` con [este código CSS](https://codepen.io/gaearon/pen/oWWQNa?editors=0100). -5. Add a file named `index.js` in the `src/` folder with [this JS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010). +2. Agrega un archivo llamado `index.js` en la carpeta `src/` con [este código JS](https://codepen.io/gaearon/pen/oWWQNa?editors=0010). -6. Add these three lines to the top of `index.js` in the `src/` folder: +3. Agrega estas 3 líneas en la parte superior del archivo `index.js` en la carpeta `src/`: ```js import React from 'react'; @@ -111,15 +111,15 @@ import ReactDOM from 'react-dom'; import './index.css'; ``` -Now if you run `npm start` in the project folder and open `http://localhost:3000` in the browser, you should see an empty tic-tac-toe field. +Ahora, si tu ejecutas `npm start` en la carpeta del proyecto y abres `http://localhost:3000` en el navegador, deberías ver un campo de tic-tac-toe vacío. -We recommend following [these instructions](https://babeljs.io/docs/editors/) to configure syntax highlighting for your editor. +Recomendamos seguir [estas instrucciones](https://babeljs.io/docs/editors/) para configurar el resaltado de sintaxis para tu editor.
-### Help, I'm Stuck! +### ¡Ayuda, estoy atorado! -If you get stuck, check out the [community support resources](/community/support.html). In particular, [Reactiflux Chat](https://discord.gg/0ZcbPKXt5bZjGY5n) is a great way to get help quickly. If you don't receive an answer, or if you remain stuck, please file an issue, and we'll help you out. +Si te atoras, revisa los [recursos de soporte de la comunidad](/community/support.html). En particular, [el chat de Reactiflux](https://discord.gg/0ZcbPKXt5bZjGY5n) es una gran manera de obtener ayuda rápidamente. Si no recibes una respuesta, o sigues atorado, por favor crea un issue, y te ayudaremos. ## Overview From 970f4ba96c718617a283c1a7b63f42aed5a4f55f Mon Sep 17 00:00:00 2001 From: Ivan Medina Date: Thu, 7 Feb 2019 09:06:18 -0600 Subject: [PATCH 05/27] Translate overview section --- content/tutorial/tutorial.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 1b96065fd..bb07d444f 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -121,22 +121,22 @@ Recomendamos seguir [estas instrucciones](https://babeljs.io/docs/editors/) para Si te atoras, revisa los [recursos de soporte de la comunidad](/community/support.html). En particular, [el chat de Reactiflux](https://discord.gg/0ZcbPKXt5bZjGY5n) es una gran manera de obtener ayuda rápidamente. Si no recibes una respuesta, o sigues atorado, por favor crea un issue, y te ayudaremos. -## Overview +## Visión General -Now that you're set up, let's get an overview of React! +Ahora que está tu entorno configurado, ¡vamos a obtener una visión general de React! -### What Is React? +### ¿Qué es React? -React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components". +React es una librería de JavaScript declarativa, eficiente y flexible para construir interfaces de usuario. Permite componer UIs complejas de pequeñas y aisladas piezas de código llamadas "componentes". -React has a few different kinds of components, but we'll start with `React.Component` subclasses: +React tiene pocos tipos diferentes de componentes, pero vamos a empezar con la subclase `React.Component`: ```javascript class ShoppingList extends React.Component { render() { return (
-

Shopping List for {this.props.name}

+

Lista de compras para {this.props.name}

  • Instagram
  • WhatsApp
    • @@ -147,14 +147,14 @@ class ShoppingList extends React.Component { } } -// Example usage: +// Uso de ejemplo: ``` -We'll get to the funny XML-like tags soon. We use components to tell React what we want to see on the screen. When our data changes, React will efficiently update and re-render our components. +Vamos a ver las etiquetas divertidas que parecen XML pronto. Usamos componentes para decirle a React lo que queremos que se vea en la pantalla. Cuando nuestros datos cambian, React actualizará eficientemente y volverá a renderizar (re-render) nuestros componentes. -Here, ShoppingList is a **React component class**, or **React component type**. A component takes in parameters, called `props` (short for "properties"), and returns a hierarchy of views to display via the `render` method. +Aquí, ShoppingList es una **clase de componente de React**, ó **tipo de componente de React**. Un componente acepta parámetros, llamados `props` (abreviatura de "propiedades"), y retorna una jerarquía de vistas a mostrar a través del método `render`. -The `render` method returns a *description* of what you want to see on the screen. React takes the description and displays the result. In particular, `render` returns a **React element**, which is a lightweight description of what to render. Most React developers use a special syntax called "JSX" which makes these structures easier to write. The `
    ` syntax is transformed at build time to `React.createElement('div')`. The example above is equivalent to: +El método `render` retorna una *descripción* de lo que quieres ver en la pantalla. React toma la descripción y muestra el resultado. En particular, `render` retorna un **elemento de React**, el cuál es una ligera descripción de lo que hay que renderizar. La mayoría de desarrolladores de React usan una sintaxis especial llamada "JSX" que facilita la escritura de estas estructuras. La sintaxis `
    ` es transformada en tiempo de construcción a `React.createElement('div')`. El ejemplo anterior es equivalente a: ```javascript return React.createElement('div', {className: 'shopping-list'}, @@ -163,13 +163,13 @@ return React.createElement('div', {className: 'shopping-list'}, ); ``` -[See full expanded version.](babel://tutorial-expanded-version) +[Ver la versión completa extendida.](babel://tutorial-expanded-version) -If you're curious, `createElement()` is described in more detail in the [API reference](/docs/react-api.html#createelement), but we won't be using it in this tutorial. Instead, we will keep using JSX. +Si tienes curiosidad, `createElement()` está descrito en más detalle en la [referencia de la API](/docs/react-api.html#createelement), pero no lo usaremos en este tutorial. En cambio, seguiremos usando JSX. -JSX comes with the full power of JavaScript. You can put *any* JavaScript expressions within braces inside JSX. Each React element is a JavaScript object that you can store in a variable or pass around in your program. +JSX viene con todo el poder de JavaScript. Puedes poner *cualquier* expresión de JavaScript en el interior de las llaves dentro de JSX. Cada elemento de React es un objeto de JavaScript que puedes almacenar en una variable o pasar alrededor de tu programa. -The `ShoppingList` component above only renders built-in DOM components like `
    ` and `
  • `. But you can compose and render custom React components too. For example, we can now refer to the whole shopping list by writing ``. Each React component is encapsulated and can operate independently; this allows you to build complex UIs from simple components. +El componente anterior `ShoppingList` solo renderiza componentes pre-construidos del DOM como `
    ` y `
  • `. Pero, también puedes componener y renderizar componentes personalizados de React. Por ejemplo, ahora podemos referirmos al listado de compras completo escribiendo ``. Cada componente de React está encapsulado y puede operar independientemente; esto te permite construir UIs complejas desde componentes simples. ## Inspecting the Starter Code From fa843bb8271103f54bf118e1110e7baa66bdceac Mon Sep 17 00:00:00 2001 From: Ivan Medina Date: Fri, 8 Feb 2019 04:45:54 -0600 Subject: [PATCH 06/27] Translate Inspecting the Starter Code section --- content/tutorial/tutorial.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index bb07d444f..7b83f33c6 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -171,19 +171,19 @@ JSX viene con todo el poder de JavaScript. Puedes poner *cualquier* expresión d El componente anterior `ShoppingList` solo renderiza componentes pre-construidos del DOM como `
    ` y `
  • `. Pero, también puedes componener y renderizar componentes personalizados de React. Por ejemplo, ahora podemos referirmos al listado de compras completo escribiendo ``. Cada componente de React está encapsulado y puede operar independientemente; esto te permite construir UIs complejas desde componentes simples. -## Inspecting the Starter Code +## Inspeccionando el código inicial -If you're going to work on the tutorial **in your browser,** open this code in a new tab: **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. If you're going to work on the tutorial **locally,** instead open `src/index.js` in your project folder (you have already touched this file during the [setup](#setup-option-2-local-development-environment)). +Si vas a trabajar el tutorial **en tu navegador,** abre este código en un nuevo tab: **[Código inicial](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. Si vas a trabajar el tutorial **localmente,** abre `src/index.js` en la carpeta de tu proyecto (ya has tocado este archivo durante la [configuración](#setup-option-2-local-development-environment)). -This Starter Code is the base of what we're building. We've provided the CSS styling so that you only need to focus on learning React and programming the tic-tac-toe game. +Este código inicial es la base de lo que estás construyendo. Nos han provisto los estilos de CSS así que solo necesitas enfocarte en aprender React y programar el juego tic-tac-toe. -By inspecting the code, you'll notice that we have three React components: +Inspeccionando el código, notarás que tenemos 3 componentes de React: * Square * Board * Game -The Square component renders a single ` @@ -1041,9 +1041,9 @@ Let's `map` over the `history` in the Game's `render` method: let status; if (winner) { - status = 'Winner: ' + winner; + status = 'Ganador: ' + winner; } else { - status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); + status = 'Siguiente jugador: ' + (this.state.xIsNext ? 'X' : 'O'); } return ( @@ -1063,14 +1063,14 @@ Let's `map` over the `history` in the Game's `render` method: } ``` -**[View the full code at this point](https://codepen.io/gaearon/pen/EmmGEa?editors=0010)** +**[Ver el código completo en este punto](https://codepen.io/gaearon/pen/EmmGEa?editors=0010)** -For each move in the tic-tac-toes's game's history, we create a list item `
  • ` which contains a button ` @@ -1127,11 +1127,11 @@ In the Game component's `render` method, we can add the key as `
  • ` }); ``` -**[View the full code at this point](https://codepen.io/gaearon/pen/PmmXRE?editors=0010)** +**[Ver el código completo en este punto](https://codepen.io/gaearon/pen/PmmXRE?editors=0010)** -Clicking any of the list item's buttons throws an error because the `jumpTo` method is undefined. Before we implement `jumpTo`, we'll add `stepNumber` to the Game component's state to indicate which step we're currently viewing. +Haciendo click en cualquiera de los botones de la lista arroja un error porque el método `jumpTo` no está definido. Antes de implementar `jumpTo`, agregaremos `stepNumber` al estado del componente Game para indicar qué paso estamos viendo actualmente. -First, add `stepNumber: 0` to the initial state in Game's `constructor`: +Primero, agrega `stepNumber: 0` al estado inicial en el constructor de Game: ```js{8} class Game extends React.Component { @@ -1147,11 +1147,11 @@ class Game extends React.Component { } ``` -Next, we'll define the `jumpTo` method in Game to update that `stepNumber`. We also set `xIsNext` to true if the number that we're changing `stepNumber` to is even: +Luego, definiremos el método `jumpTo` en el componente Game para actualizar el `stepNumber`. También estableceremos `xIsNext` a verdadero si el número que estamos cambiando en `stepNumber` es par: ```javascript{5-10} handleClick(i) { - // this method has not changed + // este método no ha cambiado } jumpTo(step) { @@ -1162,15 +1162,15 @@ Next, we'll define the `jumpTo` method in Game to update that `stepNumber`. We a } render() { - // this method has not changed + // este método no ha cambiado } ``` -We will now make a few changes to the Game's `handleClick` method which fires when you click on a square. +Ahora haremos unos pequeños cambios al método `handleClick` de Game, el cuál se dispara cuando haces click en un cuadrado. -The `stepNumber` state we've added reflects the move displayed to the user now. After we make a new move, we need to update `stepNumber` by adding `stepNumber: history.length` as part of the `this.setState` argument. This ensures we don't get stuck showing the same move after a new one has been made. +El estado `stepNumber` que hemos añadido ahora refleja el movimiento mostrado al usuario. Después de hacer un nuevo movimiento, necesitamos actualizar `stepNumber` añadiendo `stepNumber: history.length` como parte del argumento de `this.setState`. Esto asegura que no nos estanquemos mostrando el mismo movimiento después de uno nuevo realizado. -We will also replace reading `this.state.history` with `this.state.history.slice(0, this.state.stepNumber + 1)`. This ensures that if we "go back in time" and then make a new move from that point, we throw away all the "future" history that would now become incorrect. +También reemplazaremos `this.state.history` por `this.state.history.slice(0, this.state.stepNumber + 1)`. Esto asegura que si "volvemos en el tiempo" y luego hacemos un nuevo movimiento desde ese punto, tiramos todo la historia "futura" que ahora sería incorrecta. ```javascript{2,13} handleClick(i) { @@ -1191,7 +1191,7 @@ We will also replace reading `this.state.history` with `this.state.history.slice } ``` -Finally, we will modify the Game component's `render` method from always rendering the last move to rendering the currently selected move according to `stepNumber`: +Finalmente, modificaremos el método `render` del componente Game de siempre renderizar el último movimiento a renderizar el movimiento seleccionado actualmente de acuerdo a `stepNumber`: ```javascript{3} render() { @@ -1199,12 +1199,12 @@ Finally, we will modify the Game component's `render` method from always renderi const current = history[this.state.stepNumber]; const winner = calculateWinner(current.squares); - // the rest has not changed + // el resto no ha cambiado ``` -If we click on any step in the game's history, the tic-tac-toe board should immediately update to show what the board looked like after that step occurred. +Si clickeamos en cualquier paso de la historia del juego, el tablero tic-tac-toe debería actualizarse inmediatamente para mostrar el tablero como se veía luego de que el paso ocurrió. -**[View the full code at this point](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)** +**[Ver el código completo en este punto](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)** ### Wrapping Up {#wrapping-up} From 74cea0c178e9c61a8f92f614f1f66143ad17dd77 Mon Sep 17 00:00:00 2001 From: Ivan Medina Date: Mon, 11 Feb 2019 17:02:47 -0600 Subject: [PATCH 22/27] Translate Wrapping Up section --- content/tutorial/tutorial.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 616671e95..700cec4d3 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -1206,26 +1206,26 @@ Si clickeamos en cualquier paso de la historia del juego, el tablero tic-tac-toe **[Ver el código completo en este punto](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)** -### Wrapping Up {#wrapping-up} +### Concluyendo {#wrapping-up} -Congratulations! You've created a tic-tac-toe game that: +¡Felicitaciones! Has creado un juego de tic-tac-toe que: -* Lets you play tic-tac-toe, -* Indicates when a player has won the game, -* Stores a game's history as a game progresses, -* Allows players to review a game's history and see previous versions of a game's board. +* Te permite jugar tic-tac-toe, +* Indica cuando un jugador ha ganado el juego, +* Almacena el historial del juego como va progresando, +* Permite a los jugadores revisar el historial del juego y ver versiones anteriores del tablero de juego. -Nice work! We hope you now feel like you have a decent grasp on how React works. +¡Buen trabajo! Esperamos que ahora te sientas que tienes un entendimiento descente sobre cómo funciona React. -Check out the final result here: **[Final Result](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. +Revisa el resultado final aquí: **[Resultado final](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. -If you have extra time or want to practice your new React skills, here are some ideas for improvements that you could make to the tic-tac-toe game which are listed in order of increasing difficulty: +Si tienes un tiempo extra o quieres practicar tus nuevas habilidades de React, aquí algunas ideas de mejoras que puedes hacer al juego de tic-tac-toe, las cuales están listadas en orden de dificultad creciente: -1. Display the location for each move in the format (col, row) in the move history list. -2. Bold the currently selected item in the move list. -3. Rewrite Board to use two loops to make the squares instead of hardcoding them. -4. Add a toggle button that lets you sort the moves in either ascending or descending order. -5. When someone wins, highlight the three squares that caused the win. -6. When no one wins, display a message about the result being a draw. +1. Muestra la ubicación para cada movimiento en el formato (columna, fila) en la lista del historial de movimientos. +2. Convierte en negrita el elemento actualmente seleccionado en la lista de movimientos. +3. Reescribe el Board para usar 2 ciclos para hacer los cuadrados en vez de escribirlos a mano. +4. Agrega un botón de switch que te permita ordenar los movimientos en orden ascendente o descendente. +5. Cuando alguien gana, resalta los 3 cuadrados que hicieron que gane. +6. Cuando nadie gane, muestra un mensaje acerca de que el resultado es un empate. -Throughout this tutorial, we touched on React concepts including elements, components, props, and state. For a more detailed explanation of each of these topics, check out [the rest of the documentation](/docs/hello-world.html). To learn more about defining components, check out the [`React.Component` API reference](/docs/react-component.html). +A lo largo de este tutorial, hemos abordado conceptos de React incluyendo elementos, componentes, props, y estado. Para una explicación más detallada de cada uno de estos temas, revisa [el resto de la documentación](/docs/hello-world.html). Para aprender más acerca de definir componentes, revisa la [referencia del API de `React.Component`](/docs/react-component.html). From e92f23a1c03849902457d1e3d5e5dab3c12e6635 Mon Sep 17 00:00:00 2001 From: Ivan Medina Date: Mon, 11 Feb 2019 17:07:55 -0600 Subject: [PATCH 23/27] Update navigation titles --- content/tutorial/nav.yml | 46 ++++++++++++++++++++-------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml index 75132291b..6f47fd4d0 100644 --- a/content/tutorial/nav.yml +++ b/content/tutorial/nav.yml @@ -14,98 +14,98 @@ href: /tutorial/tutorial.html#prerequisites forceInternal: true - id: setup-for-the-tutorial - title: Setup for the Tutorial + title: Configuración para el tutorial href: /tutorial/tutorial.html#setup-for-the-tutorial forceInternal: true subitems: - id: setup-option-1-write-code-in-the-browser - title: "Option 1: Write Code in the Browser" + title: "Opción de configuración 1: Escribe código en el navegador" href: /tutorial/tutorial.html#setup-option-1-write-code-in-the-browser forceInternal: true - id: setup-option-2-local-development-environment - title: "Option 2: Local Development Environment" + title: "Opción de configuración 2: Entorno de desarrollo local" href: /tutorial/tutorial.html#setup-option-2-local-development-environment forceInternal: true - id: help-im-stuck - title: Help, I'm Stuck! + title: ¡Ayuda, estoy atorado! href: /tutorial/tutorial.html#help-im-stuck forceInternal: true - id: overview - title: Overview + title: Visión General href: /tutorial/tutorial.html#overview forceInternal: true subitems: - id: what-is-react - title: What Is React? + title: ¿Qué es React? href: /tutorial/tutorial.html#what-is-react forceInternal: true - id: inspecting-the-starter-code - title: Inspecting the Starter Code + title: Inspeccionando el código inicial href: /tutorial/tutorial.html#inspecting-the-starter-code forceInternal: true - id: passing-data-through-props - title: Passing Data Through Props + title: Pasando datos a través de props href: /tutorial/tutorial.html#passing-data-through-props forceInternal: true - id: making-an-interactive-component - title: Making an Interactive Component + title: Haciendo un componente interactivo href: /tutorial/tutorial.html#making-an-interactive-component forceInternal: true - id: developer-tools - title: Developer Tools + title: Herramientas de desarrollo href: /tutorial/tutorial.html#developer-tools forceInternal: true - id: completing-the-game - title: Completing the Game + title: Completando el juego href: /tutorial/tutorial.html#completing-the-game forceInternal: true subitems: - id: lifting-state-up - title: Lifting State Up + title: Elevando el estado href: /tutorial/tutorial.html#lifting-state-up forceInternal: true - id: why-immutability-is-important - title: Why Immutability Is Important + title: ¿Porqué es importante la Inmutabilidad? href: /tutorial/tutorial.html#why-immutability-is-important forceInternal: true - id: function-components - title: Function Components + title: Componentes de función href: /tutorial/tutorial.html#function-components forceInternal: true - id: taking-turns - title: Taking Turns + title: Tomando turnos href: /tutorial/tutorial.html#taking-turns forceInternal: true - id: declaring-a-winner - title: Declaring a Winner + title: Declarando un ganador href: /tutorial/tutorial.html#declaring-a-winner forceInternal: true - id: adding-time-travel - title: Adding Time Travel + title: Agregando viaje en el tiempo href: /tutorial/tutorial.html#adding-time-travel forceInternal: true subitems: - id: storing-a-history-of-moves - title: Storing a History of Moves + title: Almacenando un historial de movimientos href: /tutorial/tutorial.html#storing-a-history-of-moves forceInternal: true - id: lifting-state-up-again - title: Lifting State Up, Again + title: Elevando el estado, otra vez href: /tutorial/tutorial.html#lifting-state-up-again forceInternal: true - id: showing-the-past-moves - title: Showing the Past Moves + title: Mostrando los movimientos anteriores href: /tutorial/tutorial.html#showing-the-past-moves forceInternal: true - id: picking-a-key - title: Picking a Key + title: Escogiendo una key href: /tutorial/tutorial.html#picking-a-key forceInternal: true - id: implementing-time-travel - title: Implementing Time Travel + title: Implementando viaje en el tiempo href: /tutorial/tutorial.html#implementing-time-travel forceInternal: true - id: wrapping-up - title: Wrapping Up + title: Concluyendo href: /tutorial/tutorial.html#wrapping-up forceInternal: true From 6fe4ffab1fd89bf672fc62dff2eace44b01678ef Mon Sep 17 00:00:00 2001 From: Ivan Medina Date: Mon, 11 Feb 2019 17:10:39 -0600 Subject: [PATCH 24/27] Fix translated ids --- content/tutorial/tutorial.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 700cec4d3..fe9029b78 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -24,10 +24,10 @@ Vamos a contruir un pequeño juego durante este tutorial. **Deberás estar tenta Este tutorial está dividido en varias secciones: -* [Configuración para el tutorial](#configuracion-para-el-tutorial) te dará un punto de partida para seguir el tutorial. -* [Visión general](#vision-general) te enseñará **los fundamentos** de React: componentes, props y estado. -* [Completando el juego](#completando-el-juego) te enseñará **las técnicas más comunes** en desarrollo de React. -* [Agregando Time Travel](#agregando-time-travel) te dará una **visión más profunda** de las fortalezas únicas de React. +* [Configuración para el tutorial](#setup-for-the-tutorial) te dará un punto de partida para seguir el tutorial. +* [Visión general](#overview) te enseñará **los fundamentos** de React: componentes, props y estado. +* [Completando el juego](#completing-the-game) te enseñará **las técnicas más comunes** en desarrollo de React. +* [Agregando viaje en el tiempo](#adding-time-travel) te dará una **visión más profunda** de las fortalezas únicas de React. No tienes que completar todas las secciones a la vez para obtener el valor de este tutorial. Prueba llegar tan lejos como puedas, incluso si es una o dos secciones. @@ -59,7 +59,7 @@ Hay dos maneras de completar este tutorial: puedes escribir el código en tu nav Primero, abre este **[código inicial](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** en una nueva pestaña. La nueva pestaña deberá mostrar un tablero vacío del juego de tic-tac-toe y código de React. Estaremos editando el código de React en este tutorial. -Ahora puedes saltarte a la segunda opción de configuración o ir a la sección de [visión general](#vision-general) para obtener una idea general de React. +Ahora puedes saltarte a la segunda opción de configuración o ir a la sección de [visión general](#overview) para obtener una idea general de React. ### Opción de configuración 2: Entorno de desarrollo local {#setup-option-2-local-development-environment} From ac35b7059ee7c70756440ca565c953fca22f5d55 Mon Sep 17 00:00:00 2001 From: Ivan Medina Date: Wed, 13 Feb 2019 11:54:50 -0600 Subject: [PATCH 25/27] Fix typo --- content/tutorial/nav.yml | 2 +- content/tutorial/tutorial.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml index 6f47fd4d0..029229144 100644 --- a/content/tutorial/nav.yml +++ b/content/tutorial/nav.yml @@ -65,7 +65,7 @@ href: /tutorial/tutorial.html#lifting-state-up forceInternal: true - id: why-immutability-is-important - title: ¿Porqué es importante la Inmutabilidad? + title: ¿Por qué es importante la Inmutabilidad? href: /tutorial/tutorial.html#why-immutability-is-important forceInternal: true - id: function-components diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index fe9029b78..1692b57f9 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -545,7 +545,7 @@ Debido a que el componente Square ahora no mantiene estado, los componentes Squa Notar cómo en `handleClick`, llamamos `.slice()` para crear una copia del array de `squares` para modificarlo en vez de modificar el array existente. Ahora explicareomos porqué crear una copia del array `squares` en la siguiente sección. -### ¿Porqué es importante la Inmutabilidad? {#why-immutability-is-important} +### ¿Por qué es importante la Inmutabilidad? {#why-immutability-is-important} En el ejemplo de código anterior, sugerimos que uses el operador `.slice()` para crear una copia del array de `squares` para modificar en vez de modificar el array existente. Ahora discutiremos inmutabilidad y porqué es importante aprenderlo. From 27354057772fcf8c8314de74ec043deba8ad8cf3 Mon Sep 17 00:00:00 2001 From: Ivan Medina Date: Thu, 14 Feb 2019 08:11:03 -0600 Subject: [PATCH 26/27] Fix typos, update Spanish docs, rollback code fragments translated --- content/tutorial/tutorial.md | 76 ++++++++++++++++++------------------ 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 1692b57f9..64fc3cffc 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -1,6 +1,6 @@ --- id: tutorial -title: "Tutorial: Intro a React" +title: "Tutorial: Introducción a React" layout: tutorial sectionid: tutorial permalink: tutorial/tutorial.html @@ -31,7 +31,7 @@ Este tutorial está dividido en varias secciones: No tienes que completar todas las secciones a la vez para obtener el valor de este tutorial. Prueba llegar tan lejos como puedas, incluso si es una o dos secciones. -Está bien copiar y pegar el código mientras sigues el tutorial, pero te recomendamos que lo escribaas a mano. Esto te ayudará a desarrollar una memoria muscular y un entendimiento más sólido. +Está bien copiar y pegar el código mientras sigues el tutorial, pero te recomendamos que lo escribas a mano. Esto te ayudará a desarrollar una memoria muscular y un entendimiento más sólido. ### ¿Qué estamos construyendo? {#what-are-we-building} @@ -47,7 +47,7 @@ Puedes cerrar el juego de tic-tac-toe una vez que te familiarizaste con él. Emp Asumimos que tienes cierta familiaridad con HTML y JavaScript, pero deberías ser capaz de seguir adelante incluso si vienes de un lenguaje de programación diferente. También suponemos que estás familiarizado con conceptos de programación como funciones, objetos, arrays, y en menor medida, clases. -Si necesitas revisar JavaScript, te recomendamos leer [esta guía](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Ten en cuenta que también usamos algunas características de ES6, una versión reciente de JavaScript. En este tutorial, estamos usando [funciones flecha](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [clases](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), sentencias [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) y [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const). Puedes usar el [Babel REPL](babel://es5-syntax-example) para revisar a qué código compila ES6. +Si necesitas revisar JavaScript, te recomendamos leer [esta guía](https://developer.mozilla.org/es/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Ten en cuenta que también usamos algunas características de ES6, una versión reciente de JavaScript. En este tutorial, estamos usando [funciones flecha](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [clases](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Classes), sentencias [`let`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/let) y [`const`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/const). Puedes usar el [Babel REPL](babel://es5-syntax-example) para revisar a qué código compila ES6. ## Configuración para el tutorial {#setup-for-the-tutorial} @@ -80,7 +80,7 @@ Esta configuración requiere más trabajo pero te permite completar el tutorial npx create-react-app my-app ``` -1. Elimina todos los archivos en la carpeta `src/` del nuevo proyecto. +3. Elimina todos los archivos en la carpeta `src/` del nuevo proyecto. > Nota: > @@ -100,11 +100,11 @@ del * cd .. ``` -1. Agrega un archivo llamado `index.css` en la carpeta `src/` con [este código CSS](https://codepen.io/gaearon/pen/oWWQNa?editors=0100). +4. Agrega un archivo llamado `index.css` en la carpeta `src/` con [este código CSS](https://codepen.io/gaearon/pen/oWWQNa?editors=0100). -2. Agrega un archivo llamado `index.js` en la carpeta `src/` con [este código JS](https://codepen.io/gaearon/pen/oWWQNa?editors=0010). +5. Agrega un archivo llamado `index.js` en la carpeta `src/` con [este código JS](https://codepen.io/gaearon/pen/oWWQNa?editors=0010). -3. Agrega estas 3 líneas en la parte superior del archivo `index.js` en la carpeta `src/`: +6. Agrega estas 3 líneas en la parte superior del archivo `index.js` en la carpeta `src/`: ```js import React from 'react'; @@ -128,7 +128,7 @@ Ahora que está tu entorno configurado, ¡vamos a obtener una visión general de ### ¿Qué es React? {#what-is-react} -React es una librería de JavaScript declarativa, eficiente y flexible para construir interfaces de usuario. Permite componer UIs complejas de pequeñas y aisladas piezas de código llamadas "componentes". +React es una librería de JavaScript declarativa, eficiente y flexible para construir interfaces de usuario. Permite componer IUs complejas de pequeñas y aisladas piezas de código llamadas "componentes". React tiene pocos tipos diferentes de componentes, pero vamos a empezar con la subclase `React.Component`: @@ -170,7 +170,7 @@ Si tienes curiosidad, `createElement()` está descrito en más detalle en la [re JSX viene con todo el poder de JavaScript. Puedes poner *cualquier* expresión de JavaScript en el interior de las llaves dentro de JSX. Cada elemento de React es un objeto de JavaScript que puedes almacenar en una variable o pasar alrededor de tu programa. -El componente anterior `ShoppingList` solo renderiza componentes pre-construidos del DOM como `
    ` y `
  • `. Pero, también puedes componener y renderizar componentes personalizados de React. Por ejemplo, ahora podemos referirmos al listado de compras completo escribiendo ``. Cada componente de React está encapsulado y puede operar independientemente; esto te permite construir UIs complejas desde componentes simples. +El componente anterior `ShoppingList` solo renderiza componentes pre-construidos del DOM como `
    ` y `
  • `. Pero, también puedes componener y renderizar componentes personalizados de React. Por ejemplo, ahora podemos referirmos al listado de compras completo escribiendo ``. Cada componente de React está encapsulado y puede operar independientemente; esto te permite construir IUs complejas desde componentes simples. ## Inspeccionando el código inicial {#inspecting-the-starter-code} @@ -246,7 +246,7 @@ Si hacemos click en un cuadrado ahora, deberíamos de obtener una alerta en nues >Nota > ->Para continuar escribiendo código sin problemas y evitar el [confuso comportamiento de `this`](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/), vamos a usar la [sintaxis de funciones flecha](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) para manejar eventos aquí y más abajo: +>Para continuar escribiendo código sin problemas y evitar el [confuso comportamiento de `this`](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/), vamos a usar la [sintaxis de funciones flecha](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/Arrow_functions) para manejar eventos aquí y más abajo: > >```javascript{4} >class Square extends React.Component { @@ -289,7 +289,7 @@ class Square extends React.Component { >Nota > ->En las [clases de JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), necesitas siempre llamar `super` cuando defines el constructor de una subclase. Todas las clases de componentes de React que tienen un `constructor` deben empezar con una llamada a `super(props)`. +>En las [clases de JavaScript](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Classes), necesitas siempre llamar `super` cuando defines el constructor de una subclase. Todas las clases de componentes de React que tienen un `constructor` deben empezar con una llamada a `super(props)`. Ahora vamos a cambiar el método `render` de Square para mostrar el valor del estado actual cuando es clickeado: @@ -297,7 +297,7 @@ Ahora vamos a cambiar el método `render` de Square para mostrar el valor del es * Reemplaza el manejador de evento `() => alert()` por `() => this.setState({value: 'X'})`. * Pon los props `className` y `onClick` en líneas separadas para mejor legibilidad. -Luedo de estos cambios, la etiqueta ` @@ -1041,9 +1041,9 @@ Vamos a `mapear` sobre el `historial` en el método `render` del componente Game let status; if (winner) { - status = 'Ganador: ' + winner; + status = 'Winner: ' + winner; } else { - status = 'Siguiente jugador: ' + (this.state.xIsNext ? 'X' : 'O'); + status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); } return ( @@ -1117,8 +1117,8 @@ En el método `render` del componente Game, podemos agregar el key como `
  • { const desc = move ? - 'Ir al movimiento #' + move : - 'Ir al inicio del juego'; + 'Go to move #' + move : + 'Go to game start'; return (
  • @@ -1226,6 +1226,6 @@ Si tienes un tiempo extra o quieres practicar tus nuevas habilidades de React, a 3. Reescribe el Board para usar 2 ciclos para hacer los cuadrados en vez de escribirlos a mano. 4. Agrega un botón de switch que te permita ordenar los movimientos en orden ascendente o descendente. 5. Cuando alguien gana, resalta los 3 cuadrados que hicieron que gane. -6. Cuando nadie gane, muestra un mensaje acerca de que el resultado es un empate. +6. Cuando nadie gana, muestra un mensaje acerca de que el resultado es un empate. A lo largo de este tutorial, hemos abordado conceptos de React incluyendo elementos, componentes, props, y estado. Para una explicación más detallada de cada uno de estos temas, revisa [el resto de la documentación](/docs/hello-world.html). Para aprender más acerca de definir componentes, revisa la [referencia del API de `React.Component`](/docs/react-component.html). From 617dd042250969f2e8d5edc06730ad2805cc6249 Mon Sep 17 00:00:00 2001 From: Ivan Medina Date: Thu, 14 Feb 2019 12:18:11 -0600 Subject: [PATCH 27/27] Fix typo --- content/tutorial/tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 64fc3cffc..c93358340 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -739,7 +739,7 @@ function calculateWinner(squares) { } ``` -Llamaremos a `calculateWinner(squares)` en el método `render` del componente Board para revisar si un jugador a ganado. Si un jugador ha ganado, podemos mostrar un texto como: "Winner: X" o "Winner: O". Reemplazaremos la declaración del `status` en el método `render` de Board con este código: +Llamaremos a `calculateWinner(squares)` en el método `render` del componente Board para revisar si un jugador ha ganado. Si un jugador ha ganado, podemos mostrar un texto como: "Winner: X" o "Winner: O". Reemplazaremos la declaración del `status` en el método `render` de Board con este código: ```javascript{2-8} render() {