From 59617f0bc6f61f3be5dffed7326722a9646ab0e7 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 2 Aug 2022 13:45:15 +0100 Subject: [PATCH] Beta website part I (#374) * feat(installation.md): translation * feat(start-a-new-react-project.md): translation * feat(beta/installation): translation * feat(beta-editor setup): translation * Apply suggestions from code review TNX @mattia-sanfilippo! Co-authored-by: Mattia Sanfilippo * Update beta/src/pages/learn/installation.md Tnx @mattia-sanfilippo ! Co-authored-by: Mattia Sanfilippo * Apply suggestions from code review Tnx @mattia-sanfilippo ! Co-authored-by: Mattia Sanfilippo * Update beta/src/pages/learn/editor-setup.md Tnx @mattia-sanfilippo ! Co-authored-by: Mattia Sanfilippo Co-authored-by: Mattia Sanfilippo --- beta/src/pages/learn/editor-setup.md | 58 ++++++++--------- beta/src/pages/learn/installation.md | 36 +++++------ .../pages/learn/start-a-new-react-project.md | 64 +++++++++---------- 3 files changed, 79 insertions(+), 79 deletions(-) diff --git a/beta/src/pages/learn/editor-setup.md b/beta/src/pages/learn/editor-setup.md index 6b489a5d0..ffa8d7a99 100644 --- a/beta/src/pages/learn/editor-setup.md +++ b/beta/src/pages/learn/editor-setup.md @@ -4,57 +4,57 @@ title: Editor Setup -A properly configured editor can make code clearer to read and faster to write. It can even help you catch bugs as your write them! If this is your first time setting up an editor or you're looking to tune up your current editor, we have a few recommendations. +Un editor correttamente configurato permette una più facile lettura del codice ed una scrittura più veloce. Può anche aiutare nell'individuazione di bugs durante la battitura! Se è la prima volta che configuri un editor o vuoi ritoccare la tua configurazione attuale, abbiamo alcune raccomandazioni. -* What the most popular editors are -* How to format your code automatically +* Quali sono gli editor più comuni +* Come formattare automaticamente il codice -## Your editor {/*your-editor*/} +## Il tuo editor {/*your-editor*/} -[VS Code](https://code.visualstudio.com/) is one of the most popular editors in use today. It has a large marketplace of extensions and integrates well with popular services like GitHub. Most of the features listed below can be added to VS Code as extensions as well, making it highly configurable! +[VS Code](https://code.visualstudio.com/) è uno degli editor più popolari al momento. Ha un grande marketplace di estensioni e si integra molto bene con servizi popolari come GitHub. Molte delle funzioni elencate di seguito possono essere aggiunte a VS Code come estensioni, rendendolo altamente configurabile! -Other popular text editors used in the React community include: +Altri editor di testo popolari in uso nella comunità React sono: -* [WebStorm](https://www.jetbrains.com/webstorm/) is an integrated development environment designed specifically for JavaScript. -* [Sublime Text](https://www.sublimetext.com/) has support for JSX and TypeScript, [syntax highlighting](https://stackoverflow.com/a/70960574/458193) and autocomplete built in. -* [Vim](https://www.vim.org/) is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X. +* [WebStorm](https://www.jetbrains.com/webstorm/) che è un ambiente integrato di sviluppo progettato specificatamente per JavaScript. +* [Sublime Text](https://www.sublimetext.com/) offre supporto JSX e TypeScript, [evidenziazione della sintassi](https://stackoverflow.com/a/70960574/458193) e autocompletamento. +* [Vim](https://www.vim.org/) è un editor di testo altamente configurabile progettato per rendere la modifica di ogni tipo di testo molto efficiente. É incluso nella maggioranza delle distribuzioni UNIX e Apple OS X lanciando il comando "vi". -## Recommended text editor features {/*recommended-text-editor-features*/} +## Funzioni degli editor di testo raccomandate {/*recommended-text-editor-features*/} -Some editors come with these features built in, but others might require adding an extension. Check to see what support your editor of choice provides to be sure! +Alcuni editor hanno queste funzioni già incluse, altri potrebbero richiedere l'installazione di una estensione. Verifica cosa è supportato dal tuo editor preferito per sicurezza! ### Linting {/*linting*/} -Code linters find problems in your code as you write, helping you fix them early. [ESLint](https://eslint.org/) is a popular, open source linter for JavaScript. +I code linters individuano problemi nel codice man mano che lo si scrive, permettendo di fixarli sul nascere. [ESLint](https://eslint.org/) è un linter per JavaScript open source molto popolare. -* [Install ESLint with the recommended configuration for React](https://www.npmjs.com/package/eslint-config-react-app) (be sure you have [Node installed!](https://nodejs.org/en/download/current/)) -* [Integrate ESLint in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) +* [Installa ESLint con la configurazione raccomandata per React](https://www.npmjs.com/package/eslint-config-react-app) (accertati di avere [Node installato!](https://nodejs.org/en/download/current/)) +* [Integra ESLint in VSCode con l'estensione ufficiale](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) -### Formatting {/*formatting*/} +### Formattazione {/*formatting*/} -The last thing you want to do when sharing your code with another contributor is get into an discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you. +L'ultima cosa che vuoi avere quando condividi il tuo codice con un altro collaboratore è una discussione riguardo [tabs contro spazi](https://www.google.com/search?q=tabs+vs+spaces)! Fortunatamente, [Prettier](https://prettier.io/) ripulirà il tuo codice riformattandolo conformemente ad una configurazione presettata. Esegui Prettier, e tutti i tuoi tabs verranno convertiti in spazi e la tua indentazione, virgolette, ecc verranno cambiate a seconda della configurazione. Nel setup ideale, ogni volta che salvi un file, Prettier applicherà queste modifiche per conto tuo automaticamente. -You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps: +Puoi installare l'[estensione Prettier in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) seguendo questi passi: -1. Launch VS Code -2. Use Quick Open (press Ctrl/Cmd+P) -3. Paste in `ext install esbenp.prettier-vscode` -4. Press Enter +1. Lancia VS Code +2. Usa `Quick Open` (premendo Ctrl/Cmd+P) +3. Incolla `ext install esbenp.prettier-vscode` +4. Premi Invio -#### Formatting on save {/*formatting-on-save*/} +#### Formattazione automatica al salvataggio del file {/*formatting-on-save*/} -Ideally, you should format your code on every save. VS Code has settings for this! +Idealmente, dovresti riformattare il tuo codice ad ogni salvataggio. VS Code ha un settaggio apposito! -1. In VS Code, press `CTRL/CMD + SHIFT + P`. -2. Type "settings" -3. Hit Enter -4. In the search bar, type "format on save" -5. Be sure the "format on save" option is ticked! +1. In VS Code, premi `CTRL/CMD + SHIFT + P`. +2. Scrivi "settings" +3. Premi Invio +4. Nella barra di ricerca, scrivi "format on save" +5. Accertati che l'opzione "format on save" sia selezionata! -> If your ESLint preset has formatting rules, they may conflict with Prettier. We recommend to disable all formatting rules in your ESLint preset using [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) so that ESLint is *only* used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) for your continuous integration. +> Se il tuo preset ESLint ha regole di formattazione, potrebbero andare in conflitto con Prettier. Ti raccomandiamo di disabilitare tutte le regole di formattazione nel tuo preset ESLint usando [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) facendo si che ESLint venga usato *solo* per identificare errori. Se vuoi fare in modo che la formattazione sia forzata prima che una pull request sia "merged", usa [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) nella tua pipeline di continuous integration. diff --git a/beta/src/pages/learn/installation.md b/beta/src/pages/learn/installation.md index f5dc01e4b..c9c3ba58c 100644 --- a/beta/src/pages/learn/installation.md +++ b/beta/src/pages/learn/installation.md @@ -1,25 +1,25 @@ --- -title: Installation +title: Installazione --- -React has been designed from the start for gradual adoption. You can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to an HTML page, or start a complex React-powered app, this section will help you get started. +React è stato progettato sin dal principio per essere adottato gradualmente. A seconda dei tuoi gusti, puoi usare il minimo o il maggior numero di funzionalità offerte da React. Se vuoi avere un assaggio di React, aggiungere un po' di interattività ad una pagina HTML, o sviluppare una applicazione complessa basata su React, questa sezione ti aiuterà nei primi passi. -* [How to add React to an HTML page](/learn/add-react-to-a-website) -* [How to start a standalone React project](/learn/start-a-new-react-project) -* [How to set up your editor](/learn/editor-setup) -* [How to install React Developer Tools](/learn/react-developer-tools) +* [Come aggiungere React ad una pagina HTML](/learn/add-react-to-a-website) +* [Come iniziare un progetto React](/learn/start-a-new-react-project) +* [Come configurare il tuo editor](/learn/editor-setup) +* [Come installare i React Developer Tools](/learn/react-developer-tools) -## Try React {/*try-react*/} +## Prova React {/*try-react*/} -You don't need to install anything to play with React. Try editing this sandbox! +Non devi installare nulla se vuoi divertirti con React. Prova a modificare questa sandbox! @@ -35,23 +35,23 @@ export default function App() { -You can edit it directly or open it in a new tab by pressing the "Fork" button in the upper right corner. +Puoi modificarla direttamente o aprirla in un nuovo tab premendo il bottone "Fork" nell'angolo in alto a destra. -Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb). +La maggioranza delle pagine della documentazione di React contengono sandboxes come questa. Al di fuori della documentazione, esistono alcune sandboxes online che supportano React: ad esempio, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), o [CodePen](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb). -### Try React locally {/*try-react-locally*/} +### Prova React localmente {/*try-react-locally*/} -To try React locally on your computer, [download this HTML page](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html). Open it in your editor and in your browser! +Per provare React localmente sul suo computer, [scarica questa pagina HTML](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html). Aprila nel tuo editor e nel tuo browser! -## Add React to a page {/*add-react-to-a-page*/} +## Aggiungere React ad una pagina {/*add-react-to-a-page*/} -If you're working with an existing site and need to add a little bit of React, you can [add React with a script tag.](/learn/add-react-to-a-website) +Se stai lavorando con un sito esistente ed hai bisogno di aggiungere un po' di React, puoi [aggiungere React con uno script tag.](/learn/add-react-to-a-website) -## Start a React project {/*start-a-react-project*/} +## Iniziare un progetto React {/*start-a-react-project*/} -If you're ready to [start a standalone project](/learn/start-a-new-react-project) with React, you can set up a minimal toolchain for a pleasant developer experience. You can also start with a framework that makes a lot of decisions for you out of the box. +Se sei pronto per [iniziare un progetto a se stante](/learn/start-a-new-react-project) con React, puoi configurare gli strumenti minimi indispensabili per una esperienza di sviluppo piacevole. Puoi anche cominciare con un framework che prende decisioni per te sin dall'inizio. -## Next steps {/*next-steps*/} +## Passi successivi {/*next-steps*/} -Head to the [Quick Start](/learn) guide for a tour of the most important React concepts you will encounter every day. +Prosegui con la [Guida Rapida](/learn) per una panoramica dei concetti React più importanti che incontrerai ogni giorno. diff --git a/beta/src/pages/learn/start-a-new-react-project.md b/beta/src/pages/learn/start-a-new-react-project.md index 35819e158..dd3f1c124 100644 --- a/beta/src/pages/learn/start-a-new-react-project.md +++ b/beta/src/pages/learn/start-a-new-react-project.md @@ -1,35 +1,35 @@ --- -title: Start a New React Project +title: Iniziare un progetto React --- -If you're starting a new project, we recommend to use a toolchain or a framework. These tools provide a comfortable development environment but require a local Node.js installation. +Se stai iniziando un nuovo progetto, ti raccomandiamo di utilizzare una toolchain o un framework. Questi strumenti offrono un ambiente di sviluppo confortevole ma richiedono una installazione locale di Node.js. -* How toolchains are different from frameworks -* How to start a project with a minimal toolchain -* How to start a project with a fully-featured framework -* What's inside popular toolchains and frameworks +* In che modo le toolchains differiscono dai frameworks +* Come iniziare un progetto con una toolchain minimale +* Come iniziare un progetto con un framework che offre tutte le funzionalità +* Cosa è incluso nelle toolchain e frameworks più popolari -## Choose your own adventure {/*choose-your-own-adventure*/} +## Scegli la tua avventura {/*choose-your-own-adventure*/} -React is a library that lets you organize UI code by breaking it apart into pieces called components. React doesn't take care of routing or data management. This means there are several ways to start a new React project: +React è una libreria che ti permette di organizzare il codice UI spezzandolo in pezzi più piccoli chiamati componenti. React non si interessa di routing o gestione dei dati. Ciò significa che esistono diversi modi per iniziare un nuovo progetto React: -* [Start with an **HTML file and a script tag**.](/learn/add-react-to-a-website) This doesn't require Node.js setup but offers limited features. -* Start with a **minimal toolchain,** adding more features to your project as you go. (Great for learning!) -* Start with an **opinionated framework** that has common features like data fetching and routing built-in. +* [Iniziare con un **file HTML ed un tag script**.](/learn/add-react-to-a-website) Questo non richiede l'impostazione di Node.js ma offre funzionalità limitate. +* Iniziare con una **toolchain minimale,** aggiungendo più funzionalità al tuo progetto lungo la strada. (Ottimo per imparare!) +* Iniziare con un **framework supponente** che ha le funzionalità più comuni quali data fetching e routing già incluse. -## Getting started with a minimal toolchain {/*getting-started-with-a-minimal-toolchain*/} +## Iniziare con una toolchain minimale {/*getting-started-with-a-minimal-toolchain*/} -If you're **learning React,** we recommend [Create React App](https://create-react-app.dev/). It is the most popular way to try out React and build a new single-page, client-side application. It's made for React but isn't opinionated about routing or data fetching. +Se stai **imparando React,** ti raccomandiamo [Create React App](https://create-react-app.dev/). Si tratta del modo più popolare per provare React e sviluppare una nuova applicazione client-side a pagina singola. È fatto per React ma non è supponente relativamente al routing o al data fetching. -First, install [Node.js](https://nodejs.org/en/). Then open your terminal and run this line to create a project: +Prima di tutto, installa [Node.js](https://nodejs.org/en/). Poi apri il tuo terminale ed esegui questo comando per creare un progetto: @@ -37,7 +37,7 @@ npx create-react-app my-app -Now you can run your app with: +Adesso puoi lanciare la tua app con: @@ -46,38 +46,38 @@ npm start -For more information, [check out the official guide](https://create-react-app.dev/docs/getting-started). +Per maggiori informazioni, [dai uno sguardo alla guida ufficiale](https://create-react-app.dev/docs/getting-started). -> Create React App doesn't handle backend logic or databases. You can use it with any backend. When you build a project, you'll get a folder with static HTML, CSS and JS. Because Create React App can't take advantage of the server, it doesn't provide the best performance. If you're looking for faster loading times and built-in features like routing and server-side logic, we recommend using a framework instead. +> Create React App non gestisce logica backend o databases. Puoi usarlo con qualunque backend. Quando creerai un progetto, otterrai una cartella con HTML statico, CSS e JS. Dato che Create React App non fa uso di alcun server, non offre il meglio delle prestazioni. Se cerchi tempi di caricamento più veloci e funzionalità incluse quali routing e logica server-side, ti raccomandiamo l'uso di un framework. -### Popular alternatives {/*popular-alternatives*/} +### Alternative popolari {/*popular-alternatives*/} * [Vite](https://vitejs.dev/guide/) * [Parcel](https://parceljs.org/) -## Building with a full-featured framework {/*building-with-a-full-featured-framework*/} +## Iniziare con un framework completo {/*building-with-a-full-featured-framework*/} -If you're looking to **start a production-ready project,** [Next.js](https://nextjs.org/) is a great place to start. Next.js is a popular, lightweight framework for static and server‑rendered applications built with React. It comes pre-packaged with features like routing, styling, and server-side rendering, getting your project up and running quickly. +Se intendi **iniziare un progetto pronto al rilascio in produzione,** [Next.js](https://nextjs.org/) è un ottimo punto di partenza. Next.js è un popolare framework leggero per la generazione di contenuto statico generato server-side con React. Include funzioni quali routing, styling e server-side rendering, che ti permetteranno di lanciare il tuo progetto rapidamente. -The [Next.js Foundations](https://nextjs.org/learn/foundations/about-nextjs) tutorial is a great introduction to building with React and Next.js. +Il tutorial [Next.js Foundations](https://nextjs.org/learn/foundations/about-nextjs) rappresenta una ottima introduzione allo sviluppo con React e Next.js. -### Popular alternatives {/*popular-alternatives*/} +### Alternative popolari {/*popular-alternatives*/} * [Gatsby](https://www.gatsbyjs.org/) * [Remix](https://remix.run/) * [Razzle](https://razzlejs.org/) -## Custom toolchains {/*custom-toolchains*/} +## Toolchains personalizzate {/*custom-toolchains*/} -You may prefer to create and configure your own toolchain. A toolchain typically consists of: +Potresti preferire la creazione e configurazione di una tua toolchain. Una toolchain generalmente è composta da: -* A **package manager** lets you install, update, and manage third-party packages. Popular package managers: [npm](https://www.npmjs.com/) (built into Node.js), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/). -* A **compiler** lets you compile modern language features and additional syntax like JSX or type annotations for the browsers. Popular compilers: [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [swc](https://swc.rs/). -* A **bundler** lets you write modular code and bundle it together into small packages to optimize load time. Popular bundlers: [webpack](https://webpack.js.org/), [Parcel](https://parceljs.org/), [esbuild](https://esbuild.github.io/), [swc](https://swc.rs/). -* A **minifier** makes your code more compact so that it loads faster. Popular minifiers: [Terser](https://terser.org/), [swc](https://swc.rs/). -* A **server** handles server requests so that you can render components to HTML. Popular servers: [Express](https://expressjs.com/). -* A **linter** checks your code for common mistakes. Popular linters: [ESLint](https://eslint.org/). -* A **test runner** lets you run tests against your code. Popular test runners: [Jest](https://jestjs.io/). +* Un **package manager** che ti permette di installare, aggiornare e gestire pacchetti di terze parti. Package managers popolari: [npm](https://www.npmjs.com/) (incluso in Node.js), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/). +* Un **compiler** che ti permette di compilare funzioni moderne del linguaggio e sintassi addizionale come JSX o annotazioni dei tipi per i browsers. Compilers popolari: [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [swc](https://swc.rs/). +* Un **bundler** che ti permette di scrivere codice modulare e raggrupparlo a partire da pacchetti più piccoli per ottimizzare i tempi di caricamento. Bundlers popolari: [webpack](https://webpack.js.org/), [Parcel](https://parceljs.org/), [esbuild](https://esbuild.github.io/), [swc](https://swc.rs/). +* Un **minifier** che ti permette di rendere il tuo codice più compatto per far sì che si carichi più rapidamente. Minifiers popolari: [Terser](https://terser.org/), [swc](https://swc.rs/). +* Un **server** che gestisce le richieste server per far si che renderizzi i componenti in HTML. Servers popolari: [Express](https://expressjs.com/). +* Un **linter** che controlla che il codice non contenga errori comuni. Linters popolari: [ESLint](https://eslint.org/). +* Un **test runner** che ti permette di eseguire tests sul tuo codice. Test runners popolari: [Jest](https://jestjs.io/). -If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality. A framework will usually also provide a routing and a data fetching solution. In a larger project, you might also want to manage multiple packages in a single repository with a tool like [Nx](https://nx.dev/react) or [Turborepo](https://turborepo.org/). +Se preferisci impostare la tua toolchain JavaScript partendo da zero, [da uno sguardo a questa guida](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) che mostra come ricreare alcune delle funzionalità offerte da Create React App. Un framework offrirà inoltre anche soluzioni per il routing ed il data fetching. Per progetti più grandi, potresti aver bisogno di dover gestire pacchetti multipli in una repository singola usando tools come [Nx](https://nx.dev/react) o [Turborepo](https://turborepo.org/).