From 47d1f436c0204652f4cb6d55036ffdc2dd3f6807 Mon Sep 17 00:00:00 2001 From: Pep Rodeja Ferrer Date: Sat, 29 Jun 2019 18:09:10 +0100 Subject: [PATCH 01/11] Translate tutorial --- content/tutorial/nav.yml | 220 +++++++------- content/tutorial/tutorial.md | 551 +++++++++++++++++------------------ 2 files changed, 385 insertions(+), 386 deletions(-) diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml index 8d498ab14..b162a13ee 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 - href: /tutorial/tutorial.html#before-we-start-the-tutorial - forceInternal: true - subitems: - - id: what-are-we-building - title: What Are We Building? - href: /tutorial/tutorial.html#what-are-we-building - forceInternal: true - - id: prerequisites - title: Prerequisites - href: /tutorial/tutorial.html#prerequisites - forceInternal: true - - id: setup-for-the-tutorial - title: Setup for the 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" - 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" - href: /tutorial/tutorial.html#setup-option-2-local-development-environment - forceInternal: true - - id: help-im-stuck - title: Help, I'm Stuck! - href: /tutorial/tutorial.html#help-im-stuck - forceInternal: true - - id: overview - title: Overview - href: /tutorial/tutorial.html#overview - forceInternal: true - subitems: - - id: what-is-react - title: What Is React? - href: /tutorial/tutorial.html#what-is-react - forceInternal: true - - id: inspecting-the-starter-code - title: Inspecting the Starter Code - href: /tutorial/tutorial.html#inspecting-the-starter-code - forceInternal: true - - id: passing-data-through-props - title: Passing Data Through Props - href: /tutorial/tutorial.html#passing-data-through-props - forceInternal: true - - id: making-an-interactive-component - title: Making an Interactive Component - href: /tutorial/tutorial.html#making-an-interactive-component - forceInternal: true - - id: developer-tools - title: Developer Tools - href: /tutorial/tutorial.html#developer-tools - forceInternal: true - - id: completing-the-game - title: Completing the Game - href: /tutorial/tutorial.html#completing-the-game - forceInternal: true - subitems: - - id: lifting-state-up - title: Lifting State Up - href: /tutorial/tutorial.html#lifting-state-up - forceInternal: true - - id: why-immutability-is-important - title: Why Immutability Is Important - href: /tutorial/tutorial.html#why-immutability-is-important - forceInternal: true - - id: function-components - title: Function Components - href: /tutorial/tutorial.html#function-components - forceInternal: true - - id: taking-turns - title: Taking Turns - href: /tutorial/tutorial.html#taking-turns - forceInternal: true - - id: declaring-a-winner - title: Declaring a Winner - href: /tutorial/tutorial.html#declaring-a-winner - forceInternal: true - - id: adding-time-travel - title: Adding Time Travel - href: /tutorial/tutorial.html#adding-time-travel - forceInternal: true - subitems: - - id: storing-a-history-of-moves - title: Storing a History of Moves - href: /tutorial/tutorial.html#storing-a-history-of-moves - forceInternal: true - - id: lifting-state-up-again - title: Lifting State Up, Again - href: /tutorial/tutorial.html#lifting-state-up-again - forceInternal: true - - id: showing-the-past-moves - title: Showing the Past Moves - href: /tutorial/tutorial.html#showing-the-past-moves - forceInternal: true - - id: picking-a-key - title: Picking a Key - href: /tutorial/tutorial.html#picking-a-key - forceInternal: true - - id: implementing-time-travel - title: Implementing Time Travel - href: /tutorial/tutorial.html#implementing-time-travel - forceInternal: true - - id: wrapping-up - title: Wrapping Up - href: /tutorial/tutorial.html#wrapping-up - forceInternal: true +  ítems: +    - id: before-we-start-the-tutorial +      title: Abans de començar el tutorial +      href: /tutorial/tutorial.html#before-we-start-the-tutorial +      forceInternal: true +      subitems: +        - id: what-are-we-building +          title: Què estem construint? +          href: /tutorial/tutorial.html#what-are-we-building +          forceInternal: true +        - id: prerequisites +          title: Prerequisits +          href: /tutorial/tutorial.html#prerequisites +          forceInternal: true +    - id: setup-for-the-tutorial +      title: Configuració per a l'tutorial +      href: /tutorial/tutorial.html#setup-for-the-tutorial +      forceInternal: true +      subitems: +        - id: setup-option-1-write-code-in-the-browser +          title: "Opció de configuració 1: Escriu codi al navegador" +          href: /tutorial/tutorial.html#setup-option-1-write-code-in-the-browser +          forceInternal: true +        - id: setup-option-2-local-development-environment +          title: "Opció de configuració 2: Entorn de desenvolupament local" +          href: /tutorial/tutorial.html#setup-option-2-local-development-environment +          forceInternal: true +        - id: help-im-stuck +          title: Ajuda, estic encallat! +          href: /tutorial/tutorial.html#help-im-stuck +          forceInternal: true +    - id: overview +      title: Visió General +      href: /tutorial/tutorial.html#overview +      forceInternal: true +      subitems: +        - id: what-is-react +          title: Què és React? +          href: /tutorial/tutorial.html#what-is-react +          forceInternal: true +        - id: inspecting-the-starter-code +          title: Inspeccionant el codi inicial +          href: /tutorial/tutorial.html#inspecting-the-starter-code +          forceInternal: true +        - id: passing-data-through-props +          title: Passant dades a través de props +          href: /tutorial/tutorial.html#passing-data-through-props +          forceInternal: true +        - id: making-an-interactive-component +          title: Fent un component interactiu +          href: /tutorial/tutorial.html#making-an-interactive-component +          forceInternal: true +        - id: developer-tools +          title: Eines de desenvolupament +          href: /tutorial/tutorial.html#developer-tools +          forceInternal: true +    - id: Completing-the-game +      title: Completant el joc +      href: /tutorial/tutorial.html#completing-the-game +      forceInternal: true +      subitems: +        - id: lifting-state-up +          title: Elevant l'estat +          href: /tutorial/tutorial.html#lifting-state-up +          forceInternal: true +        - id: why-immutability-is-important +          title: Per què és important la immutabilitat? +          href: /tutorial/tutorial.html#why-immutability-is-important +          forceInternal: true +        - id: function-components +          title: Components de funció +          href: /tutorial/tutorial.html#function-components +          forceInternal: true +        - id: taking-turns +          title: Prenent torns +          href: /tutorial/tutorial.html#taking-turns +          forceInternal: true +        - id: declaring-a-winner +          title: Declarant un guanyador +          href: /tutorial/tutorial.html#declaring-a-winner +          forceInternal: true +    - id: adding-time-travel +      title: Afegint viatge en el temps +      href: /tutorial/tutorial.html#adding-time-travel +      forceInternal: true +      subitems: +        - id: storing-a-history-of-moves +          title: Emmagatzemar un historial de moviments +          href: /tutorial/tutorial.html#storing-a-history-of-moves +          forceInternal: true +        - id: lifting-state-up-again +          title: Elevant l'estat, una altra vegada +          href: /tutorial/tutorial.html#lifting-state-up-again +          forceInternal: true +        - id: showing-the-past-moves +          title: Ara es mostren els moviments anteriors +          href: /tutorial/tutorial.html#showing-the-past-moves +          forceInternal: true +        - id: picking-a-key +          title: Triant una key +          href: /tutorial/tutorial.html#picking-a-key +          forceInternal: true +        - id: implementing-time-travel +          title: Implementant viatge en el temps +          href: /tutorial/tutorial.html#implementing-time-travel +          forceInternal: true +        - id: wrapping-up +          title: Concloent +          href: /tutorial/tutorial.html#wrapping-up +          forceInternal: tru \ No newline at end of file diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 191381cab..41d6f65a2 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -1,141 +1,141 @@ --- id: tutorial -title: "Tutorial: Intro to React" +title: "Tutorial: Introducció a React" layout: tutorial sectionid: tutorial permalink: tutorial/tutorial.html redirect_from: - - "docs/tutorial.html" - - "docs/why-react.html" - - "docs/tutorial-ja-JP.html" - - "docs/tutorial-ko-KR.html" - - "docs/tutorial-zh-CN.html" +  - "docs/tutorial.html" +  - "docs/why-react.html" +  - "docs/tutorial-ja-JP.html" +  - "docs/tutorial-ko-KR.html" +  - "docs/tutorial-zh-CN.html" --- -This tutorial doesn't assume any existing React knowledge. +Aquest tutorial no assumeix cap coneixement previ sobre React. -## Before We Start the Tutorial {#before-we-start-the-tutorial} +## Abans de començar 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. +Anem a construir un petit joc durant aquest tutorial. **Hauràs estar temptat a obviar-perquè tu no estàs construint jocs en el dia a dia, però dóna-li una oportunitat.** Les tècniques que aprendràs en el tutorial són fonamentals per a construir qualsevol aplicació de React, i dominar-et donarà una entesa profunda 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. +>Aquest tutorial està dissenyat per a persones que prefereixen **aprendre fent**. Si tu prefereixes aprendre els conceptes des del principi, revisa la nostra [guia pas a pas](/docs/hello-world.html). Podries trobar aquest tutorial i la guia, complementàries entre si. -The tutorial is divided into several sections: +Aquest tutorial està dividit en diverses seccions: -* [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ó per a l'tutorial](#setup-for-the-tutorial) et donarà un punt de partida per seguir el tutorial. +* [Visió general](#overview) t'ensenyarà **els fonaments** de React: components, props i estat. +* [Completant el joc](#Completing-the-game) t'ensenyarà **les tècniques més comuns** en desenvolupament de React. +* [Afegint viatge en el temps](#adding-time-travel) et donarà una **visió més profunda** de les fortaleses úniques 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 has de completar totes les seccions alhora per obtenir el valor d'aquest tutorial. Prova arribar tan lluny com puguis, fins i tot si és una o dues seccions. -### What Are We Building? {#what-are-we-building} +### Què estem construint? {#what-are-we-building} -In this tutorial, we'll show how to build an interactive tic-tac-toe game with React. +En aquest tutorial, et mostrarem com construir un joc de tic-tac-toe interactiu amb 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. +Pots veure el que construirem aquí: **[Resultat Final](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Si el codi no et fa sentit, o si no estàs familiaritzat amb la sintaxi de codi, no et preocupis! L'objectiu d'aquest tutorial és ajudar-te a entendre React i la seva sintaxi. -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. +Recomanem que revisis el joc de tic-tac-toe abans de continuar amb el tutorial. Una de les característiques que notaràs és que hi ha una llista enumerada a la dreta del tauler del jugador. Aquesta llista dóna una història de tots els moviments que han ocorregut en el joc, i es va actualitzant conforme el joc progressa. -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. +Pots tancar el joc de tic-tac-toe una vegada que et familiarizaste amb ell. Començarem des d'una plantilla més simple en aquest tutorial. El nostre següent pas és configurar de tal manera que puguis començar a construir el joc. -### Prerequisites {#prerequisites} +### Prerequisits {#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. +Assumim que tens certa familiaritat amb HTML i javaScript, però hauries de ser capaç de seguir endavant fins i tot si véns d'un llenguatge de programació diferent. També suposem que estàs familiaritzat amb conceptes de programació com a funcions, objectes, arrays, i en menor mesura, classes. -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 necessites revisar javaScript, et recomanem llegir [aquesta guia](https://developer.mozilla.org/ca/docs/Web/javaScript/A_re-introduction_to_javaScript). Tingues en compte que també fem servir algunes característiques de ES6, una versió recent de javaScript. En aquest tutorial, estem fent servir [funcions fletxa](https://developer.mozilla.org/ca/docs/Web/javaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/ca/docs/Web/javaScript/Reference/Classes), sentències [`let`](https://developer.mozilla.org/ca/docs/Web/javaScript/Reference/Statements/let) i [`const`](https://developer.mozilla.org/ca/docs/Web/javaScript/Reference/Statements/const). Pots fer servir el [Babel REPL](babel://ES5-syntax-example) per revisar a quin codi compila ES6. -## Setup for the Tutorial {#setup-for-the-tutorial} +## Configuració per a l'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. +Hi ha dues maneres de completar aquest tutorial: pots escriure el codi al teu navegador, o pots configurar el teu entorn de desenvolupament local en el teu ordinador. -### Setup Option 1: Write Code in the Browser {#setup-option-1-write-code-in-the-browser} +### Opció de configuració 1: Escriu codi al navegador {#setup-option-1-write-code-in-the-browser} -This is the quickest way to get started! +Aquesta és la forma més ràpida de començar! -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. +Primer, obre aquest **[codi inicial](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** en una nova pestanya. La nova pestanya haurà de mostrar un tauler buit del joc de tic-tac-toe i codi de React. Estarem editant el codi d'React en aquest tutorial. -You can now skip the second setup option, and go to the [Overview](#overview) section to get an overview of React. +Ara pots saltar a la segona opció de configuració o anar a la secció de [visió general](#overview) per obtenir una idea general de React. -### Setup Option 2: Local Development Environment {#setup-option-2-local-development-environment} +### Opció de configuració 2: Entorn de desenvolupament local {#setup-option-2-local-development-environment} -This is completely optional and not required for this tutorial! +Aquesta és completament opcional i no és requerida per aquest tutorial!
-
+ -Optional: Instructions for following along locally using your preferred text editor +Opcional: Instruccions per seguir endavant localment utilitzant el teu editor de text preferit -This setup requires more work but allows you to complete the tutorial using an editor of your choice. Here are the steps to follow: +Aquesta configuració requereix més feina però et permet completar el tutorial usant un editor de la teva elecció. Aquí els passos 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. Assegura't de tenir una versió recent de [NODE.JS](https://nodejs.org/en/) instal·lada. +2. Segueix les [instruccions d'instal·lació de Create React App](/docs/create-a-new-react-app.html#create-react-app) per fer un nou projecte. ```bash -npx create-react-app my-app +npx create-react-app mi-app ``` -3. Delete all files in the `src/` folder of the new project +3. Elimina tots els arxius a la carpeta `src/` del nou projecte. -> 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 eliminis la carpeta `src` per complet, només els arxius de codi font originals dins d'ella**. Reemplaçarem els arxius de codi font per defecte amb exemples per a aquest projecte en el següent pas. ```bash cd my-app cd src -# If you're using a Mac or Linux: +# Si fas servir Mac o Linux: rm -f * -# Or, if you're on Windows: +# O, si fas servir Windows: del * -# Then, switch back to the project folder +# Després, torna a la carpeta del projecte 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. Afegeix un fitxer anomenat `index.css` a la carpeta `src/` amb [aquest codi 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. Afegeix un fitxer anomenat `index.js` a la carpeta `src/` amb [aquest codi 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. Afegeix aquestes 3 línies a la part superior de l'arxiu `index.js` a la carpeta `src/`: ```js import React from 'react'; -import ReactDOM from 'react-dom'; +import ReactDOM from 'react-dg'; 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. +Ara, si el teu executes `npm start` a la carpeta del projecte i obres `http://localhost:3000` al navegador, hauries de veure un camp de tic-tac-toe buit. -We recommend following [these instructions](https://babeljs.io/docs/editors/) to configure syntax highlighting for your editor. +Recomanem seguir [aquestes instruccions](https://babeljs.io/docs/editors/) per configurar el ressaltat de sintaxi per al teu editor.
-### Help, I'm Stuck! {#help-im-stuck} +### Ajuda, estic encallat! {#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 et atoras, revisa els [recursos de suport de la comunitat](/community/support.html). En particular, [xat de Reactiflux](https://discord.gg/0ZcbPKXt5bZjGY5n) és una gran manera d'obtenir ajuda ràpidament. Si no reps una resposta, o segueixes encallat, si us plau crea 1 issue, i t'ajudarem. -## Overview {#overview} +## Visió general {#overview} -Now that you're set up, let's get an overview of React! +Ara que està el teu entorn configurat, anem a obtenir una visió general de React! -### What Is React? {#what-is-react} +### Què és 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 és una llibreria de javaScript declarativa, eficient i flexible per construir interfícies d'usuari. Permet compondre IUS complexes de petites i aïllades peces de codi anomenades "components". -React has a few different kinds of components, but we'll start with `React.Component` subclasses: +React té pocs tipus diferents de components, però anem a començar amb la subclasse `React.Component`: ```javascript class ShoppingList extends React.Component { render() { return (
-

Shopping List for {this.props.name}

+

Llista de compres per {this.props.name}