diff --git a/GLOSSARY.md b/GLOSSARY.md index 4a98d6f62..9f2a41104 100644 --- a/GLOSSARY.md +++ b/GLOSSARY.md @@ -5,6 +5,8 @@ Glossary of the translations of technical and React-specific terms. ## Untranslatable terms - props (**core concept**) - state (**core concept**) +- hooks (**core concept**) +- ref (**core concept**) - footer - bug - browser @@ -21,6 +23,10 @@ Glossary of the translations of technical and React-specific terms. - console - warning - form/forms +- render props +- strict mode +- web components +- build steps # Common Translations diff --git a/content/blog/2015-12-18-react-components-elements-and-instances.md b/content/blog/2015-12-18-react-components-elements-and-instances.md index dd71836d0..9cb4ea25b 100644 --- a/content/blog/2015-12-18-react-components-elements-and-instances.md +++ b/content/blog/2015-12-18-react-components-elements-and-instances.md @@ -350,7 +350,7 @@ React will ask the `Form` component what element tree it returns, given those `p } ``` -This is a part of the process that React calls [reconciliation](/docs/reconciliation.html) which starts when you call [`ReactDOM.render()`](/docs/top-level-api.html#reactdom.render) or [`setState()`](/docs/component-api.html#setstate). By the end of the reconciliation, React knows the result DOM tree, and a renderer like `react-dom` or `react-native` applies the minimal set of changes necessary to update the DOM nodes (or the platform-specific views in case of React Native). +This is a part of the process that React calls [riconciliazione](/docs/reconciliation.html) which starts when you call [`ReactDOM.render()`](/docs/top-level-api.html#reactdom.render) or [`setState()`](/docs/component-api.html#setstate). By the end of the reconciliation, React knows the result DOM tree, and a renderer like `react-dom` or `react-native` applies the minimal set of changes necessary to update the DOM nodes (or the platform-specific views in case of React Native). This gradual refining process is also the reason React apps are easy to optimize. If some parts of your component tree become too large for React to visit efficiently, you can tell it to [skip this “refining” and diffing certain parts of the tree if the relevant props have not changed](/docs/advanced-performance.html). It is very fast to calculate whether the props have changed if they are immutable, so React and immutability work great together, and can provide great optimizations with the minimal effort. diff --git a/content/blog/2017-09-08-dom-attributes-in-react-16.md b/content/blog/2017-09-08-dom-attributes-in-react-16.md index 31c66e53e..54c091fec 100644 --- a/content/blog/2017-09-08-dom-attributes-in-react-16.md +++ b/content/blog/2017-09-08-dom-attributes-in-react-16.md @@ -80,7 +80,7 @@ Just like before, React lets you pass `data-` and `aria-` attributes freely: This has not changed. -[Accessibility](/docs/accessibility.html) is very important, so even though React 16 passes any attributes through, it still validates that `aria-` props have correct names in development mode, just like React 15 did. +[Accessibilità](/docs/accessibility.html) is very important, so even though React 16 passes any attributes through, it still validates that `aria-` props have correct names in development mode, just like React 15 did. ## Migration Path {#migration-path} diff --git a/content/community/conferences.md b/content/community/conferences.md index 2bf1dcb3d..cc3639324 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -52,12 +52,7 @@ June 21, 2019 Chicago, Illinois USA [Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop) -### React Week '19 {#RWNY19} -July 15-21, 2019. New York City, USA - -[Website](https://reactweek.nyc) - [Twitter](https://twitter.com/ReactWeek) - -### React Rally 2019 +### React Rally 2019 {#react-rally-2019} August 22-23, 2019. Salt Lake City, USA. [Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/) diff --git a/content/community/meetups.md b/content/community/meetups.md index d397a4535..8bd1155d0 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -88,6 +88,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet ## Pakistan {#pakistan} * [Karachi](https://www.facebook.com/groups/902678696597634/) +* [Lahore](https://www.facebook.com/groups/ReactjsLahore/) ## Peru {#peru} * [Lima](https://www.meetup.com/ReactJS-Peru/) @@ -130,8 +131,8 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [New York, NY - ReactJS](https://www.meetup.com/NYC-Javascript-React-Group/) * [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/) * [New York, NY - React Native](https://www.meetup.com/React-Native-NYC/) -* [New York, NY - ReactNYC](https://www.meetup.com/ReactNYC/) * [Palo Alto, CA - React Native](https://www.meetup.com/React-Native-Silicon-Valley/) +* [Philadelphia, PA - ReactJS](https://www.meetup.com/RQ-React/) * [Phoenix, AZ - ReactJS](https://www.meetup.com/ReactJS-Phoenix/) * [Pittsburgh, PA - ReactJS/React Native](https://www.meetup.com/ReactPgh/) * [Portland, OR - ReactJS](https://www.meetup.com/Portland-ReactJS/) diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md index e6cacba3b..c4056da1a 100644 --- a/content/docs/accessibility.md +++ b/content/docs/accessibility.md @@ -1,6 +1,6 @@ --- id: accessibility -title: Accessibility +title: Accessibilità permalink: docs/accessibility.html --- diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index a97b44d45..ed4057085 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -1,6 +1,6 @@ --- id: add-react-to-a-website -title: Add React to a Website +title: Aggiungere React Ad Un Sito permalink: docs/add-react-to-a-website.html redirect_from: - "docs/add-react-to-an-existing-app.html" @@ -8,195 +8,194 @@ prev: getting-started.html next: create-a-new-react-app.html --- -Use as little or as much React as you need. +Utilizza React quel poco o quel tanto che ti basta. -React has been designed from the start for gradual adoption, and **you can use as little or as much React as you need**. Perhaps you only want to add some "sprinkles of interactivity" to an existing page. React components are a great way to do that. +React è stato progettato fin dall'inizio per essere adottato gradualmente e **puoi utilizzarlo quel poco o quel tanto che ti basta**. Forse devi solamente aggiungere un "pizzico di interattività" a una pagina esistente. I componenti React sono un ottimo modo per farlo. -The majority of websites aren't, and don't need to be, single-page apps. With **a few lines of code and no build tooling**, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets. +La maggior parte dei siti non sono applicazioni single-page e non hanno bisogno di esserlo. Prova ad utilizzare React in una piccola parte del tuo sito, con **poche righe di codice e nessuno strumento di build**. In seguito, puoi espandere gradualmente la sua presenza, oppure puoi mantenerlo confinato ad alcuni widget dinamici. --- -- [Add React in One Minute](#add-react-in-one-minute) -- [Optional: Try React with JSX](#optional-try-react-with-jsx) (no bundler necessary!) +- [Aggiungi React in Un Minuto](#add-react-in-one-minute) +- [Opzionale: Prova React con JSX](#optional-try-react-with-jsx) (non è necessario alcun bundler!) -## Add React in One Minute {#add-react-in-one-minute} +## Aggiungi React in Un Minuto {#add-react-in-one-minute} -In this section, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice. +In questa sezione, ti mostreremo come aggiungere un componente React ad una pagina HTML esistente. Per allenarti, puoi utilizzare il tuo sito oppure creare una pagina HTML vuota di prova. -There will be no complicated tools or install requirements -- **to complete this section, you only need an internet connection, and a minute of your time.** +Non ci saranno requisiti di installazione da soddisfare o strumenti complicati da utilizzare -- **per completare questa sezione, ti servono solamente una connessione a internet e un minuto del tuo tempo.** -Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) +Opzionale: [Scarica l'esempio completo (2KB zippato)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) -### Step 1: Add a DOM Container to the HTML {#step-1-add-a-dom-container-to-the-html} +### Passo 1: Aggiungi un Contenitore DOM all'HTML {#step-1-add-a-dom-container-to-the-html} -First, open the HTML page you want to edit. Add an empty `
` tag to mark the spot where you want to display something with React. For example: +Per prima cosa, apri la pagina HTML che vuoi modificare. Aggiungi un tag `
` vuoto per contrassegnare il punto in cui vuoi visualizzare qualcosa con React. Ad esempio: ```html{3} - + -
+
- + ``` -We gave this `
` a unique `id` HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it. +Abbiamo assegnato a questo `
` un attributo HTML `id` univoco. Questo ci consentirà più tardi di trovarlo con il codice JavaScript e di visualizzare un componente React al suo interno. ->Tip +>Consiglio > ->You can place a "container" `
` like this **anywhere** inside the `` tag. You may have as many independent DOM containers on one page as you need. They are usually empty -- React will replace any existing content inside DOM containers. +>Puoi posizionare un `
` "contenitore" come questo **ovunque** all'interno del tag ``. Puoi inserire tutti i contenitori DOM indipendenti di cui hai bisogno in una pagina. Solitamente vengono lasciati vuoti -- React sostituirebbe comunque qualsiasi cosa si trovasse all'interno dei contenitori DOM. -### Step 2: Add the Script Tags {#step-2-add-the-script-tags} +### Passo 2: Aggiungi i Tag Script {#step-2-add-the-script-tags} -Next, add three ` - - + + ``` -The first two tags load React. The third one will load your component code. +I primi due tag caricano React. Il terzo carica il codice del tuo componente. -### Step 3: Create a React Component {#step-3-create-a-react-component} +### Passo 3: Crea un Componente React {#step-3-create-a-react-component} -Create a file called `like_button.js` next to your HTML page. +Crea un file chiamato `bottone_like.js` accanto alla tua pagina HTML. -Open **[this starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** and paste it into the file you created. +Apri questo **[codice iniziale](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** e incollalo nel file appena creato. ->Tip +>Consiglio > ->This code defines a React component called `LikeButton`. Don't worry if you don't understand it yet -- we'll cover the building blocks of React later in our [hands-on tutorial](/tutorial/tutorial.html) and [main concepts guide](/docs/hello-world.html). For now, let's just get it showing on the screen! +>Questo codice definisce un componente React chiamato `LikeButton` (bottone "Mi Piace"). Non preoccuparti se non lo capisci subito -- illustreremo i concetti fondamentali di React nel [tutorial "mani in pasta"](/tutorial/tutorial.html) e nella [guida ai concetti fondamentali](/docs/hello-world.html). Per ora, limitiamoci a fare in modo che il componente venga mostrato sullo schermo! -After **[the starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`: +Dopo il **[codice iniziale](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, aggiungi due linee in fondo a `bottone_like.js`: ```js{3,4} -// ... the starter code you pasted ... +// ... il codice iniziale che hai incollato ... -const domContainer = document.querySelector('#like_button_container'); -ReactDOM.render(e(LikeButton), domContainer); +const contenitoreDom = document.querySelector('#contenitore_bottone_like'); +ReactDOM.render(e(LikeButton), contenitoreDom); ``` -These two lines of code find the `
` we added to our HTML in the first step, and then display our "Like" button React component inside of it. +Queste due linee di codice servono a trovare il `
` che abbiamo aggiunto al nostro HTML nel passo 1 e a visualizzare il nostro componente React del bottone "Mi Piace" al suo interno. -### That's It! {#thats-it} +### Tutto qua! {#thats-it} -There is no step four. **You have just added the first React component to your website.** +Non c'è nessun passo 4. **Hai appena aggiunto il primo componente React al tuo sito internet!** -Check out the next sections for more tips on integrating React. +Leggi le sezioni successive per avere più consigli su come integrare React. -**[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** +**[Guarda il codice completo dell'esempio](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** -**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** +**[Scarica l'esempio completo (2KB zippato)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** -### Tip: Reuse a Component {#tip-reuse-a-component} +### Consiglio: Riutilizza i Componenti {#tip-reuse-a-component} -Commonly, you might want to display React components in multiple places on the HTML page. Here is an example that displays the "Like" button three times and passes some data to it: +Di solito, vorrai visualizzare i componenti React in più punti nella pagina HTML. Ecco un esempio che visualizza il bottone "Mi Piace" tre volte e gli passa alcuni dati: -[View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) +[Guarda il codice completo dell'esempio](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) -[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) +[Scarica l'esempio completo (2KB zippato)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) ->Note +>Nota > ->This strategy is mostly useful while React-powered parts of the page are isolated from each other. Inside React code, it's easier to use [component composition](/docs/components-and-props.html#composing-components) instead. +>Questa strategia è utile soprattutto quando le parti della pagina realizzate con React sono isolate l'una dall'altra. All'interno del codice React, è più semplice invece utilizzare la [composizione di componenti](/docs/components-and-props.html#composing-components). -### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production} +### Consiglio: Minimizza il JavaScript per la Produzione {#tip-minify-javascript-for-production} -Before deploying your website to production, be mindful that unminified JavaScript can significantly slow down the page for your users. +Prima di rilasciare il tuo sito in produzione, ricordati che il codice JavaScript non minimizzato può rallentare significativamente la pagina per i tuoi utenti. -If you already minify the application scripts, **your site will be production-ready** if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`: +Se minimizzi già gli script dell'applicazione, **il tuo sito sarà pronto per la produzione** se ti assicuri che l'HTML rilasciato carichi le versioni degli script di React che finiscono con `production.min.js`: ```js ``` -If you don't have a minification step for your scripts, [here's one way to set it up](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). +Se invece non hai già un passaggio di minimizzazione dei tuoi script, [ecco un modo per introdurlo](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). -## Optional: Try React with JSX {#optional-try-react-with-jsx} +## Opzionale: Prova React con JSX {#optional-try-react-with-jsx} -In the examples above, we only relied on features that are natively supported by the browsers. This is why we used a JavaScript function call to tell React what to display: +Negli esempi precedenti, abbiamo utilizzato solamente caratteristiche supportate nativamente dai browser. Ecco perché abbiamo utilizzato una funzione JavaScript per dire a React cosa visualizzare: ```js const e = React.createElement; -// Display a "Like" ); ``` -These two code snippets are equivalent. While **JSX is [completely optional](/docs/react-without-jsx.html)**, many people find it helpful for writing UI code -- both with React and with other libraries. +Questi due frammenti di codice sono equivalenti. Anche se **JSX è [completamente opzionale](/docs/react-without-jsx.html)**, molte persone trovano che sia utile per scrivere il codice della UI -- non solo con React ma anche con altre librerie! -You can play with JSX using [this online converter](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=). +Puoi fare esperimenti con JSX utilizzando [questo convertitore online](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=). -### Quickly Try JSX {#quickly-try-jsx} +### Prova JSX Velocemente {#quickly-try-jsx} -The quickest way to try JSX in your project is to add this ` ``` -Now you can use JSX in any `