diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml index 8d498ab14..5d18869b4 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: Abans de començar 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è estem construint? href: /tutorial/tutorial.html#what-are-we-building forceInternal: true - id: prerequisites - title: Prerequisites + title: Prerequisits href: /tutorial/tutorial.html#prerequisites forceInternal: true - id: setup-for-the-tutorial - title: Setup for the Tutorial + title: Configuració per al 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ó 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: "Option 2: Local Development Environment" + title: "Opció 2: Entorn de desenvolupament local" href: /tutorial/tutorial.html#setup-option-2-local-development-environment forceInternal: true - id: help-im-stuck - title: Help, I'm Stuck! + title: Ajuda, estic encallat! href: /tutorial/tutorial.html#help-im-stuck forceInternal: true - id: overview - title: Overview + title: Visió general href: /tutorial/tutorial.html#overview forceInternal: true subitems: - id: what-is-react - title: What Is React? + title: Què és React? href: /tutorial/tutorial.html#what-is-react forceInternal: true - id: inspecting-the-starter-code - title: 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: 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: Making an Interactive Component + title: Fent un component interactiu href: /tutorial/tutorial.html#making-an-interactive-component forceInternal: true - id: developer-tools - title: Developer Tools + title: Eines de desenvolupament href: /tutorial/tutorial.html#developer-tools forceInternal: true - id: completing-the-game - title: Completing the Game + title: Completant el joc href: /tutorial/tutorial.html#completing-the-game forceInternal: true subitems: - id: lifting-state-up - title: Lifting State Up + title: Elevant l'estat href: /tutorial/tutorial.html#lifting-state-up forceInternal: true - id: why-immutability-is-important - title: 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: Function Components + title: Funcions com a components href: /tutorial/tutorial.html#function-components forceInternal: true - id: taking-turns - title: Taking Turns + title: Prenent torns href: /tutorial/tutorial.html#taking-turns forceInternal: true - id: declaring-a-winner - title: Declaring a Winner + title: Declarant un guanyador href: /tutorial/tutorial.html#declaring-a-winner forceInternal: true - id: adding-time-travel - title: Adding Time Travel + title: Afegint viatge a través del temps href: /tutorial/tutorial.html#adding-time-travel forceInternal: true subitems: - id: storing-a-history-of-moves - title: 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: 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: 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: Picking a Key + title: Triant una key href: /tutorial/tutorial.html#picking-a-key forceInternal: true - id: implementing-time-travel - title: Implementing Time Travel + title: Implementant viatge a través del temps href: /tutorial/tutorial.html#implementing-time-travel forceInternal: true - id: wrapping-up - title: Wrapping Up + title: Concloent href: /tutorial/tutorial.html#wrapping-up forceInternal: true diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 57b5e39f4..d4ef0ca85 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ó a React" layout: tutorial sectionid: tutorial permalink: tutorial/tutorial.html @@ -12,97 +12,97 @@ redirect_from: - "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 app, and mastering it will give you a deep understanding of React. +Construirem un petit joc durant aquest tutorial. **Podries estar temptat a obviar-lo perquè tu no estàs construint jocs al dia a dia, però dóna-li una oportunitat.** Les tècniques que aprendràs al tutorial són fonamentals per a construir qualsevol aplicació de React, i dominar-les et donarà una comprensió profunda de React. ->Tip +>Consell > ->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 al 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 comunes** en desenvolupament de React. +* [Afegint viatge a través del 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 a poder treure partit del tutorial. Prova d'arribar tan lluny com puguis, fins i tot si només són 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 tres en ratlla 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 creus que el codi no té 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 tres en ratlla 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 un historial de tots els moviments que han ocorregut en el joc, i es va actualitzant a mesura que 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 tres en ratlla una vegada que et familiaritzis amb ell. Començarem des d'una plantilla més simple en aquest tutorial. El següent pas és preparar-te perquè 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, de totes maneres hauries de ser capaç d'entendre-ho tot 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 d'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 [Babel REPL](babel://es5-syntax-example) per revisar a quin codi compila ES6. -## Setup for the Tutorial {#setup-for-the-tutorial} +## Configuració per al 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ó 1: Escriu codi al navegador {#setup-option-1-write-code-in-the-browser} -This is the quickest way to get started! +Aquesta és la manera 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 tres en ratlla i codi de React. Estarem editant el codi de 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ó 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 a 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'; @@ -110,32 +110,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. +Ara, si executes `npm start` a la carpeta del projecte i obres `http://localhost:3000` al navegador, hauries de veure un camp de tres en ratlla 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 t'encalles, revisa els [recursos de suport de la comunitat](/community/support.html). En particular, [xat de React i flux](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 un 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, t'ensenyarem 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 interfícies 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ò comencem 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}