diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml index 8d498ab14..029229144 100644 --- a/content/tutorial/nav.yml +++ b/content/tutorial/nav.yml @@ -1,111 +1,111 @@ - title: Tutorial items: - id: before-we-start-the-tutorial - title: Before We Start the Tutorial + title: Antes de empezar el tutorial href: /tutorial/tutorial.html#before-we-start-the-tutorial forceInternal: true subitems: - id: what-are-we-building - title: What Are We Building? + title: ¿Qué estamos construyendo? href: /tutorial/tutorial.html#what-are-we-building forceInternal: true - id: prerequisites - title: Prerequisites + title: Prerequisitos 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: ¿Por qué 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 diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 0ce56c280..c93358340 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -1,6 +1,6 @@ --- id: tutorial -title: "Tutorial: Intro to React" +title: "Tutorial: Introducción a React" layout: tutorial sectionid: tutorial permalink: tutorial/tutorial.html @@ -12,99 +12,99 @@ 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 {#before-we-start-the-tutorial} +## Antes de empezar el tutorial {#before-we-start-the-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. +* [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. -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 escribas a mano. Esto te ayudará a desarrollar una memoria muscular y un entendimiento más sólido. -### What Are We Building? {#what-are-we-building} +### ¿Qué estamos construyendo? {#what-are-we-building} -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 {#prerequisites} +### Prerequisitos {#prerequisites} -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/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. -## Setup for the Tutorial {#setup-for-the-tutorial} +## Configuración para el tutorial {#setup-for-the-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 {#setup-option-1-write-code-in-the-browser} +### Opción de configuración 1: Escribe código en el navegador {#setup-option-1-write-code-in-the-browser} -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](#overview) para obtener una idea general de React. -### Setup Option 2: Local Development Environment {#setup-option-2-local-development-environment} +### Opción de configuración 2: Entorno de desarrollo local {#setup-option-2-local-development-environment} -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 +3. Elimina todos los archivos en la carpeta `src/` del nuevo proyecto. -> Note: +> Nota: > ->**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. +>**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). +4. 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). +5. 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: +6. Agrega estas 3 líneas en la parte superior del archivo `index.js` en la carpeta `src/`: ```js import React from 'react'; @@ -112,32 +112,32 @@ 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! {#help-im-stuck} +### ¡Ayuda, estoy atorado! {#help-im-stuck} -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 {#overview} +## Visión General {#overview} -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? {#what-is-react} +### ¿Qué es React? {#what-is-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 IUs 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}