From c8a46a48becca6ee0f76bafd0546688f5c4e6076 Mon Sep 17 00:00:00 2001 From: Sebastia Ramon Date: Sun, 14 Jul 2019 15:21:26 +0200 Subject: [PATCH] new proposed modifications --- content/tutorial/nav.yml | 10 ++--- content/tutorial/tutorial.md | 84 ++++++++++++++++++------------------ 2 files changed, 47 insertions(+), 47 deletions(-) diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml index 39a2d6f5f..5d18869b4 100644 --- a/content/tutorial/nav.yml +++ b/content/tutorial/nav.yml @@ -14,7 +14,7 @@ href: /tutorial/tutorial.html#prerequisites forceInternal: true - id: setup-for-the-tutorial - title: Configuració pel tutorial + title: Configuració per al tutorial href: /tutorial/tutorial.html#setup-for-the-tutorial forceInternal: true subitems: @@ -69,11 +69,11 @@ href: /tutorial/tutorial.html#why-immutability-is-important forceInternal: true - id: function-components - title: Components functionals + title: Funcions com a components href: /tutorial/tutorial.html#function-components forceInternal: true - id: taking-turns - title: Fent torns + title: Prenent torns href: /tutorial/tutorial.html#taking-turns forceInternal: true - id: declaring-a-winner @@ -81,7 +81,7 @@ href: /tutorial/tutorial.html#declaring-a-winner forceInternal: true - id: adding-time-travel - title: Afegint viatge en el temps + title: Afegint viatge a través del temps href: /tutorial/tutorial.html#adding-time-travel forceInternal: true subitems: @@ -102,7 +102,7 @@ href: /tutorial/tutorial.html#picking-a-key forceInternal: true - id: implementing-time-travel - title: Implementant viatge en el temps + title: Implementant viatge a través del temps href: /tutorial/tutorial.html#implementing-time-travel forceInternal: true - id: wrapping-up diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index e63f76a81..d4ef0ca85 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -18,7 +18,7 @@ Aquest tutorial no assumeix cap coneixement previ sobre 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 > >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. @@ -45,13 +45,13 @@ Pots tancar el joc de tres en ratlla una vegada que et familiaritzis amb ell. Co 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. -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. +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. ## Configuració per al tutorial {#setup-for-the-tutorial} 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. -### Opció de configuració 1: Escriu codi al navegador {#setup-option-1-write-code-in-the-browser} +### Opció 1: Escriu codi al navegador {#setup-option-1-write-code-in-the-browser} Aquesta és la manera més ràpida de començar! @@ -59,13 +59,13 @@ Primer, obre aquest **[codi inicial](https://codepen.io/gaearon/pen/oWWQNa?edito 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. -### Opció de configuració 2: Entorn de desenvolupament local {#setup-option-2-local-development-environment} +### Opció 2: Entorn de desenvolupament local {#setup-option-2-local-development-environment} -Aquesta és completament opcional i no és requerida per aquest tutorial! +Aquesta és completament opcional i no és requerida per a aquest tutorial!
- +
Opcional: Instruccions per seguir endavant localment utilitzant el teu editor de text preferit @@ -110,7 +110,7 @@ import ReactDOM from 'react-dom'; import './index.css'; ``` -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 tres en ratlla buit. +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. Recomanem seguir [aquestes instruccions](https://babeljs.io/docs/editors/) per configurar el ressaltat de sintaxi per al teu editor. @@ -122,7 +122,7 @@ Si t'encalles, revisa els [recursos de suport de la comunitat](/community/suppor ## Visió general {#overview} -Ara que està al teu entorn configurat, t'ensenyarem una visió general de React! +Ara que està el teu entorn configurat, t'ensenyarem una visió general de React! ### Què és React? {#what-is-react} @@ -149,7 +149,7 @@ class ShoppingList extends React.Component { // Ús d'exemple: ``` -Aviat pararem atenció a les etiquetes que semblen XML. Fem servir components per dir-li a React el que volem que es vegi a la pantalla. Quan les nostres dades canvien, React actualitzarà eficientment i tornarà a renderitzar els nostres components. +Aviat pararem atenció a les etiquetes que semblen XML. Fem servir components per dir-li a React el que volem que es vegi a la pantalla. Quan les nostres dades canviïn, React actualitzarà eficientment i tornarà a renderitzar els nostres components. Aquí, ShoppingList és una **classe de component de React**, o **tipus de component de React**. Un component accepta paràmetres, anomenats `props` (abreviatura de "propietats"), i retorna una jerarquia de vistes a mostrar a través del mètode `render`. @@ -223,7 +223,7 @@ Després: Hauries de veure un número a cada quadrat del resultat renderitzat. **[Veure el codi complet en aquest punt](https://codepen.io/gaearon/pen/aWWQOG?editors=0010)** -Felicitats! Acabes de "passar un prop" d'un component pare Board a un component fill Square. Passant props és com la informació flueix en apps de React, de pares a fills. +Felicitats! Acabes de "passar una prop" d'un component pare Board a un component fill Square. Passant props és com la informació flueix en apps de React, de pares a fills. ### Fent un component interactiu {#making-an-interactive-component} @@ -246,7 +246,7 @@ Si fas clic a un quadrat ara, hauries de veure un avís al teu navegador. > Nota > -> Per continuar escrivint codi sense problemes i evitar el [confús comportament de `this`](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/), farem servir la [sintaxi de funcions fletxa](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/Arrow_functions) per manejar esdeveniments aquí i més avall: +> Per continuar escrivint codi sense problemes i evitar el [confús comportament de `this`](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/), farem servir la [sintaxi de funcions fletxa](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) per manejar esdeveniments aquí i més avall: > >```javascript{4} >class Square extends React.Component { @@ -260,11 +260,11 @@ Si fas clic a un quadrat ara, hauries de veure un avís al teu navegador. >} >``` > -> Tingues en compte com amb `onClick={() => alert('clic')}`, estem passant *una funció* com a valor del prop `onClick`. React només cridarà a aquesta funció després d'un clic. Oblidar `() =>` i escriure `onClick={alert('clic')}` és un error comú, i executaria l'alerta cada vegada que el component es rerenderitzi. +> Tingues en compte com amb `onClick={() => alert('clic')}`, estem passant *una funció* com a valor de la prop `onClick`. React només cridarà aquesta funció després d'un clic. Oblidar `() =>` i escriure `onClick={alert('clic')}` és un error comú, i executaria l'alerta cada vegada que el component es rerenderitzi. Com un següent pas, volem que el component Square "recordi" que va ser clicat, i s'ompli amb una "X". Per "recordar" coses, els components fan servir l'**estat**. -Els components de React poden tenir estat establint `this.state` als seus constructors. `this.state` ha de ser considerat com privat pel component de React en què és definit. Emmagatzemarem el valor actual d'un quadrat a `this.state`, i el canviarem quan el quadrat sigui clicat. +Els components de React poden tenir estat establint `this.state` als seus constructors. `this.state` ha de ser considerat com privat pel component de React en que és definit. Emmagatzemarem el valor actual d'un quadrat a `this.state`, i el canviarem quan el quadrat sigui clicat. Primer, afegim el constructor a la classe per inicialitzar l'estat: @@ -321,7 +321,7 @@ class Square extends React.Component { } ``` -Cridant a `this.setState` des del gestor `onClick` al mètode `render` de Square, diem a React que rerenderitzi el quadrat sempre que la seva `