docs: Translate the tutorial-tic-tac-toe.md #629
Conversation
Size Changes📦 Next.js Bundle AnalysisThis analysis was generated by the next.js bundle analysis action 🤖 This PR introduced no changes to the javascript bundle 🙌 |
There was a problem hiding this comment.
¡Hola, @Radapls! ¡Gracias por tu contribución! No he terminado de revisar porque he notado algunas cuestiones que se repiten en varios lugares del documento y cabría revisarlas primero.
- El uso de «usted» para la segunda persona del singular. Para mantener la consistencia en la documentación y porque es menos propenso a ambigüedades hemos optado por usar siempre «tú» (Puedes consultar nuestra guía de traducción para otros aspectos como este).
- Uso de «accesorio(s)» como traducción para «prop(s)». En este caso «prop» es un acortamiento de «property». Por tanto, en esta traducción al español, mantenemos «prop» como nombre femenino como acortamiento de «propiedad».
Co-authored-by: Rainer Martinez <[email protected]>
|
¡Hola @carburo! ¿Cómo vas? De antemano me excuso por los errores del tiempo verbal, cuando realicé la traducción por alguna razón creí que el uso de usted era lo correcto. Sin embargo revisando la guía veo que fue un error comprensión de mi parte. Le di una repasada completa a todo el documento, incluyendo puntuación y algunos links con su apartado en español. También anexé tus mejorías. Quedo atento a cualquier otro comentario. ¡Abrazo! |
|
Estimados colegas:
|
|
|
||
| In the live code editor below, click **Fork** in the top-right corner to open the editor in a new tab using the website CodeSandbox. CodeSandbox allows you to write code in your browser and immediately view how your users will see the app you've created. The new tab should display an empty square and the starter code for this tutorial. | ||
| En el editor de código en vivo a continuación, haz clic en **Fork** en la esquina superior derecha para abrir el editor en una nueva pestaña usando el sitio web CodeSandbox. CodeSandbox te permite escribir código en su navegador e inmediatamente ver cómo sus usuarios verán la aplicación que ha creado. La nueva pestaña debería mostrarte un cuadrado vacío y el código de inicio para este tutorial. |
There was a problem hiding this comment.
CodeSandbox te permite escribir código en tu navegador y obtener una vista previa de cómo verán tus usuarios la aplicación que has creado.
| 1. Run `npm start` to start a local server and follow the prompts to view the code running in a browser | ||
| 1. Instalar [Node.js](https://nodejs.org/es/) | ||
| 2. En la pestaña CodeSandbox que abriste anteriormente, presiona el botón de la esquina superior izquierda para abrir el menú y luego selecciona **Archivo > Exportar a ZIP** en ese menú para descargar un archivo comprimido de los archivos que necesitaras para realizar este tutorial. | ||
| 3. Descomprime el archivo, luego abre la terminal y digita `cd` en el directorio que descomprimiste |
There was a problem hiding this comment.
- Descomprime el archivo, abre la terminal y luego abre usando
cdel directorio con los archivos descomprimidos.
| 2. En la pestaña CodeSandbox que abriste anteriormente, presiona el botón de la esquina superior izquierda para abrir el menú y luego selecciona **Archivo > Exportar a ZIP** en ese menú para descargar un archivo comprimido de los archivos que necesitaras para realizar este tutorial. | ||
| 3. Descomprime el archivo, luego abre la terminal y digita `cd` en el directorio que descomprimiste | ||
| 4. Instala las dependencias con el comando `npm install` | ||
| 5. Ejecuta el comando `npm start` para iniciar un servidor local y sigue las indicaciones para ver el código que se ejecuta en un navegador |
There was a problem hiding this comment.
Ejecuta el comando npm start para iniciar un servidor local y sigue las indicaciones para ver el código que se ejecuta en el navegador
|
|
||
| The `App.js` file should be selected in the _Files_ section. The contents of that file in the _code editor_ should be: | ||
| El archivo `App.js` debe seleccionarse en la sección *Files*. El contenido de ese archivo en el *code editor* debería ser: |
There was a problem hiding this comment.
El archivo App.js debe estar seleccionado en la sección Files. El contenido de ese archivo en el code editor debería ser
|
|
||
| ```jsx | ||
| export default function Square() { | ||
| return <button className="square">X</button>; | ||
| } | ||
| ``` | ||
|
|
||
| The _browser_ section should be displaying a square with a X in it like this: | ||
| La sección del *browser* debería mostrarte un cuadrado con una X como esta: |
There was a problem hiding this comment.
La sección browser debería mostrar un cuadrado con una X como este:
|
|
||
| Now let's have a look at the files in the starter code. | ||
| Ahora echemos un vistazo a los archivos en el código de inicio. |
There was a problem hiding this comment.
Ahora echemos un vistazo a los archivos en el código inicial
|
|
||
| ```js {1} | ||
| export default function Square() { | ||
| return <button className="square">X</button>; | ||
| } | ||
| ``` | ||
|
|
||
| The first line defines a function called `Square`. The `export` JavaScript keyword makes this function accessible outside of this file. The `default` keyword tells other files using your code that it's the main function in your file. | ||
| La primera línea define una función llamada `Square`. La palabra clave de JavaScript `export` hace que esta función sea accesible fuera de este archivo. La palabra clave `default` le dice a otros archivos que usan su código que es la función principal en su archivo. |
There was a problem hiding this comment.
La palabra clave default le dice a otros archivos que usan este código que esta es la función principal del archivo.
|
|
||
| ```js {2} | ||
| export default function Square() { | ||
| return <button className="square">X</button>; | ||
| } | ||
| ``` | ||
|
|
||
| The second line returns a button. The `return` JavaScript keyword means whatever comes after is returned as a value to the caller of the function. `<button>` is a *JSX element*. A JSX element is a combination of JavaScript code and HTML tags that describes what you'd like to display. `className="square"` is a button property or *prop* that tells CSS how to style the button. `X` is the text displayed inside of the button and `</button>` closes the JSX element to indicate that any following content shouldn't be placed inside the button. | ||
| La segunda línea devuelve un botón. La palabra clave de JavaScript `return` significa que lo que viene después se devuelve como un valor a la persona que llama a la función. `<button>` es un *elemento JSX*. Un elemento JSX es una combinación de código JavaScript y etiquetas HTML que describe lo que te gustaría mostrar. `className="square"` es una propiedad de botón o *prop* que le dice a CSS cómo diseñar el botón. `X` es el texto que se muestra dentro del botón y `</button>` cierra el elemento JSX para indicar que ningún contenido siguiente debe colocarse dentro del botón. |
There was a problem hiding this comment.
La palabra clave de JavaScript return significa que lo que viene después se devuelve como un valor al objecto, función, etc. que llamó a esta función.
className="square" es una propiedad del botón o prop que le dice a CSS cómo diseñar el botón.
|
|
||
| #### `styles.css` {/*stylescss*/} | ||
|
|
||
| Click on the file labeled `styles.css` in the _Files_ section of CodeSandbox. This file defines the styles for your React app. The first two _CSS selectors_ (`*` and `body`) define the style of large parts of your app while the `.square` selector defines the style of any component where the `className` property is set to `square`. In your code, that would match the button from your Square component in the `App.js` file. | ||
| Haz clic en el archivo llamado `styles.css` en la sección *Files* de CodeSandbox. Este archivo define los estilos para tu aplicación React. Los primeros dos *selectores CSS* (`*` y `body`) definen el estilo de grandes partes de su aplicación, mientras que el selector `.square` define el estilo de cualquier componente donde la propiedad `className` está establecida en `square`. En tu código, eso coincidiría con el botón de tu componente Square en el archivo `App.js`. |
There was a problem hiding this comment.
mientras que el selector .square define el estilo de cualquier componente donde la propiedad className tenga el valor square.
Traducción del apartado "Tutorial: Tic Tac Toe" completada. Quedo atento a cualquier corrección