diff --git a/GLOSSARY.md b/GLOSSARY.md index 29cd59b78..d741cddc9 100644 --- a/GLOSSARY.md +++ b/GLOSSARY.md @@ -3,13 +3,21 @@ Glossary of the translations of technical and React-specific terms. ## Untranslatable terms +- props (**core concept**) +- state (**core concept**) - footer - bug - browser - client - server +- array +- alert +- record +- true +- false - tag + # Common Translations Suggestion on words and terms: @@ -26,9 +34,11 @@ Suggestion on words and terms: Here's a list of terms that require discussion/agreement, with a link to the issue. -- `to render` (#7) -- `React component class` (#7) -- `React component type` (#7) -- `refactor` (#9) -- `event handler` (#10) -- `event listener` (#10) +If you encounter one of those expressions for the first time, it might be worth checking the issue to find out what's the current quorum around how we should handle a consistent translation across the whole website. + +- `to render` ([#7](https://github.com/reactjs/it.reactjs.org/issues/7)) +- `React component class` ([#7](https://github.com/reactjs/it.reactjs.org/issues/7)) +- `React component type` ([#7](https://github.com/reactjs/it.reactjs.org/issues/7)) +- `refactor` ([#9](https://github.com/reactjs/it.reactjs.org/issues/9)) +- `event handler` ([#10](https://github.com/reactjs/it.reactjs.org/issues/10)) +- `event listener` ([#10](https://github.com/reactjs/it.reactjs.org/issues/10)) diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml index 8d498ab14..d3ddb7288 100644 --- a/content/tutorial/nav.yml +++ b/content/tutorial/nav.yml @@ -1,54 +1,54 @@ - title: Tutorial items: - id: before-we-start-the-tutorial - title: Before We Start the Tutorial + title: Prima di Cominciare il Tutorial href: /tutorial/tutorial.html#before-we-start-the-tutorial forceInternal: true subitems: - id: what-are-we-building - title: What Are We Building? + title: Cosa Stiamo Costruendo? href: /tutorial/tutorial.html#what-are-we-building forceInternal: true - id: prerequisites - title: Prerequisites + title: Prerequisiti href: /tutorial/tutorial.html#prerequisites forceInternal: true - id: setup-for-the-tutorial - title: Setup for the Tutorial + title: Setup per il 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: "Opzione 1: Scrivi Codice nel 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" + title: "Opzione 2: Setup Ambiente di Sviluppo Locale" href: /tutorial/tutorial.html#setup-option-2-local-development-environment forceInternal: true - id: help-im-stuck - title: Help, I'm Stuck! + title: Aiuto, Non Funziona! href: /tutorial/tutorial.html#help-im-stuck forceInternal: true - id: overview - title: Overview + title: Panoramica href: /tutorial/tutorial.html#overview forceInternal: true subitems: - id: what-is-react - title: What Is React? + title: Cosa è React? href: /tutorial/tutorial.html#what-is-react forceInternal: true - id: inspecting-the-starter-code - title: Inspecting the Starter Code + title: Uno Sguardo al Codice Iniziale href: /tutorial/tutorial.html#inspecting-the-starter-code forceInternal: true - id: passing-data-through-props - title: Passing Data Through Props + title: Passare Dati Mediante Props href: /tutorial/tutorial.html#passing-data-through-props forceInternal: true - id: making-an-interactive-component - title: Making an Interactive Component + title: Creare un Componente Interattivo href: /tutorial/tutorial.html#making-an-interactive-component forceInternal: true - id: developer-tools @@ -56,56 +56,56 @@ href: /tutorial/tutorial.html#developer-tools forceInternal: true - id: completing-the-game - title: Completing the Game + title: Completare il Gioco href: /tutorial/tutorial.html#completing-the-game forceInternal: true subitems: - id: lifting-state-up - title: Lifting State Up + title: Elevare lo Stato href: /tutorial/tutorial.html#lifting-state-up forceInternal: true - id: why-immutability-is-important - title: Why Immutability Is Important + title: Perchè l'Immutabilità è Importante href: /tutorial/tutorial.html#why-immutability-is-important forceInternal: true - id: function-components - title: Function Components + title: Componenti Funzione href: /tutorial/tutorial.html#function-components forceInternal: true - id: taking-turns - title: Taking Turns + title: Turni href: /tutorial/tutorial.html#taking-turns forceInternal: true - id: declaring-a-winner - title: Declaring a Winner + title: Dichiarare un Vincitore href: /tutorial/tutorial.html#declaring-a-winner forceInternal: true - id: adding-time-travel - title: Adding Time Travel + title: Aggiungere il "Viaggio Nel Tempo" href: /tutorial/tutorial.html#adding-time-travel forceInternal: true subitems: - id: storing-a-history-of-moves - title: Storing a History of Moves + title: Salvare lo Storico delle Mosse href: /tutorial/tutorial.html#storing-a-history-of-moves forceInternal: true - id: lifting-state-up-again - title: Lifting State Up, Again + title: Elevare lo Stato, Di Nuovo href: /tutorial/tutorial.html#lifting-state-up-again forceInternal: true - id: showing-the-past-moves - title: Showing the Past Moves + title: Visualizzare le Mosse Precedenti href: /tutorial/tutorial.html#showing-the-past-moves forceInternal: true - id: picking-a-key - title: Picking a Key + title: Scegliere una Chiave href: /tutorial/tutorial.html#picking-a-key forceInternal: true - id: implementing-time-travel - title: Implementing Time Travel + title: Implementare il "Viaggio Nel Tempo" href: /tutorial/tutorial.html#implementing-time-travel forceInternal: true - id: wrapping-up - title: Wrapping Up + title: Riepilogo href: /tutorial/tutorial.html#wrapping-up forceInternal: true diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 0ce56c280..df6b102b1 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -1,6 +1,6 @@ --- id: tutorial -title: "Tutorial: Intro to React" +title: "Tutorial: Introduzione 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. +Questo tutorial non presuppone alcuna pre-esistente conoscenza di React. -## Before We Start the Tutorial {#before-we-start-the-tutorial} +## Prima di Cominciare il 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. +Costruiremo un piccolo gioco durante questo tutorial. **Potresti essere tentato di risparmiartelo perché non sviluppi giochi solitamente -- ma dagli una possibilità, non te ne pentirai.** Le tecniche che imparirai nel tutorial sono fondamentali allo sviluppo di ogni tipo di applicazione, acquisirle ti darà una profonda conoscenza di React. ->Tip +>Suggerimento > ->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. +>Questo tutorial è stato creato per persone che preferiscono **imparare mettendo in pratica**. Se preferisci imparare i concetti a partire dalle basi, dai uno sguardo alla nostra [guida passo passo](/docs/hello-world.html). Potresti trovare questo tutorial e la guida complementari l'uno con l'altra. -The tutorial is divided into several sections: +Il tutorial è diviso nelle seguenti sezioni: -* [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. +* [Setup per il Tutorial](#setup-for-the-tutorial) ti darà **un punto di partenza** per seguire il tutorial. +* [Panoramica](#overview) ti spiegherà **i fondamentali** di React: componenti, props e state. +* [Finire il Gioco](#completing-the-game) ti spiegherà **le tecniche più comuni** nello sviluppo con React. +* [Aggiungere "Viaggio Nel Tempo"](#adding-time-travel) ti darà **una profonda conoscenza** delle uniche potenzialità di 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. +Non devi completare tutte le sezioni in una volta per guadagnare qualcosa da questo tutorial. Prova a seguirlo fin quando puoi -- anche se è solo per una o due sezioni. -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. +Va bene lo stesso se preferisci copiare ed incollare il codice lungo il tutorial, tuttavia, ti raccomandiamo di scriverlo a mano. Ti aiuterà a sviluppare memoria muscolare ed a capire meglio i concetti espressi. -### What Are We Building? {#what-are-we-building} +### Cosa Stiamo Costruendo? {#what-are-we-building} -In this tutorial, we'll show how to build an interactive tic-tac-toe game with React. +In questo tutorial, ti mostreremo come costruire in React una versione interattiva del gioco tic-tac-toe (conosciuto anche come "tris"). -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. +Qui puoi vedere cosa costruiremo: **[Risultato Finale](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Se non capisci il codice, o se non riconosci la sintassi, non ti preoccupare! L'obiettivo di questo tutorial è appunto di aiutarti a capire React e la sua sintassi. -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. +Ti consigliamo di guardare il gioco prima di continuare. Una delle funzionalità che noterai è che c'è una lista numerata a destra del piano di gioco. Questa lista contiene l'elenco delle mosse che sono avvenute durante una partita e si aggiorna man mano che il gioco prosegue. -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. +Puoi chiudere il gioco non appena ci hai familiarizzato. Cominceremo con un template più semplice in questo tutorial. Nel passo successivo ti aiuteremo ad impostare i prerequisiti, cosicchè potrai costruire il gioco tu stesso/a. -### Prerequisites {#prerequisites} +### Prerequisiti {#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. +Presupponiamo che tua abbia familiarità con HTML e JavaScript, ma dovresti comunque essere in grado di seguire anche se provieni da un diverso linguaggio di programmazione. Inoltre, daremo per scontato che tu abbia familiarità con concetti di programmazione come funzioni, oggetti, arrays e classi, anche se queste ultime hanno minore importanza in questo contesto. -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. +Se vuoi rinfrescare o dare un primo sguardo alle basi in JavaScript, ti raccomandiamo la lettura di [questa guida](https://developer.mozilla.org/it/docs/Web/JavaScript/Una_reintroduzione_al_JavaScript). Tieni presente che usiamo anche alcune funzionalità di ES6 -- una recente versione di JavaScript. In questo tutorial, useremo [arrow functions / funzioni a freccia](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions), [classi](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Statements/let), e [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const). Puoi usare [Babel REPL](babel://es5-syntax-example) per vedere il codice compilato a partire da ES6. -## Setup for the Tutorial {#setup-for-the-tutorial} +## Setup per il 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. +Ci sono due modi per completare questo tutorial: puoi scrivere codice nel tuo browser, o puoi configurare un ambiente di sviluppo locale sul tuo computer. -### Setup Option 1: Write Code in the Browser {#setup-option-1-write-code-in-the-browser} +### Opzione 1: Scrivi Codice nel Browser {#setup-option-1-write-code-in-the-browser} -This is the quickest way to get started! +Questo è il metodo più veloce! -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. +Prima di tutto, apri questo **[Codice Iniziale](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** in un nuovo tab. Il nuovo tab dovrebbe mostrare una nuova partita di tic-tac-toe ed il relativo codice React. In questo tutorial modificheremo quel codice. -You can now skip the second setup option, and go to the [Overview](#overview) section to get an overview of React. +Se hai scelto questa opzione, puoi saltare la seconda opzione ed il relativo setup ed andare direttamente alla sezione [Panoramica](#overview) per una panoramica su React. -### Setup Option 2: Local Development Environment {#setup-option-2-local-development-environment} +### Opzione 2: Setup Ambiente di Sviluppo Locale {#setup-option-2-local-development-environment} -This is completely optional and not required for this tutorial! +Il contenuto di questa sezione è completamente opzionale e non necessario al completamento di questo tutorial!
-Optional: Instructions for following along locally using your preferred text editor +Opzionale: Istruzioni per proseguire nel tuo ambiente locale usando il tuo editor di testo preferito -This setup requires more work but allows you to complete the tutorial using an editor of your choice. Here are the steps to follow: +Questo setup richiede qualche piccolo sforzo aggiuntivo ma ti permette di completare il tutorial usando un editor a tua scelta. Ecco i passi da seguire: -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. Accertati di avere una versione recente di [Node.js](https://nodejs.org/en/) installata. +2. Segui le [istruzioni di installazione di Create React App](/docs/create-a-new-react-app.html#create-react-app) per creare un nuovo progetto. ```bash npx create-react-app my-app ``` -3. Delete all files in the `src/` folder of the new project +3. Elimina tutti i files nella cartella `src/` del nuovo progetto -> Note: +> Nota Bene: > ->**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. +>**Non eliminare l'intera cartella `src`, rimuovi solo i files al suo interno.** We'll replace the default source files with examples for this project in the next step. ```bash cd my-app cd src -# If you're using a Mac or Linux: +# Se stai usando Mac o Linux: rm -f * -# Or, if you're on Windows: +# Oppure, se sei su Windows: del * -# Then, switch back to the project folder +# Infine, torna indietro alla cartella del progetto cd .. ``` -4. Add a file named `index.css` in the `src/` folder with [this CSS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0100). +1. Aggiungi un file chiamato `index.css` nella cartella `src/` con questo [codice 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). +2. Aggiungi un file chiamato `index.js` nella cartella `src/` con questo [codice JS](https://codepen.io/gaearon/pen/oWWQNa?editors=0010). -6. Add these three lines to the top of `index.js` in the `src/` folder: +3. Aggiungi queste tre linee all'inizio del file `index.js` nella cartella `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. +Adesso se esegui `npm start` nella cartella del progetto ed apri `http://localhost:3000` nel tuo browser, dovresti vedere una nuova partita di tic-tac-toe. -We recommend following [these instructions](https://babeljs.io/docs/editors/) to configure syntax highlighting for your editor. +Ti raccomandiamo di seguire [queste istruzioni](https://babeljs.io/docs/editors/) per configurare l'evidenziazione della sintassi nel tuo editor.
-### Help, I'm Stuck! {#help-im-stuck} +### Aiuto, Non Funziona! {#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. +Se sei bloccato/a, dai uno sguardo alle [risorse di supporto della comunità](/community/support.html). In particolare, [Reactiflux Chat](https://discord.gg/0ZcbPKXt5bZjGY5n) è un ottimo modo per ricevere aiuto velocemente. Se non ricevi una risposta, o se non riesci a proseguire, cortesemente apri una issue e ti aiuteremo da lì. -## Overview {#overview} +## Panoramica {#overview} -Now that you're set up, let's get an overview of React! +Adesso che è tutto pronto, proseguiamo con una panoramica di React! -### What Is React? {#what-is-react} +### Cosa è 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 è una libreria JavaScript per costruire interfacce utente caratterizzata dal fatto che è dichiarativa, efficiente e flessibile. Ti permette di comporre UI complesse a partire da piccoli ed isolati stralci di codice chiamati "componenti". -React has a few different kinds of components, but we'll start with `React.Component` subclasses: +React ha diversi tipi di componenti, cominciamo con le sottoclassi di `React.Component`: ```javascript class ShoppingList extends React.Component { render() { return (
-

Shopping List for {this.props.name}

+

Lista della spesa per {this.props.name}