Home Page Translation

content/home/examples/a-component-using-external-plugins.js

@@ -2,7 +2,7 @@ class MarkdownEditor extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
-    this.state = { value: 'Hello, **world**!' };
+    this.state = { value: 'Ciao, **mondo**!' };
   }
 
   handleChange(e) {
@@ -19,7 +19,7 @@ class MarkdownEditor extends React.Component {
       <div className="MarkdownEditor">
         <h3>Input</h3>
         <label htmlFor="markdown-content">
-          Enter some markdown
+          Inserisci codice markdown
         </label>
         <textarea
           id="markdown-content"

content/home/examples/a-component-using-external-plugins.md

@@ -1,7 +1,7 @@
 ---
-title: A Component Using External Plugins
+title: Un Componente con Plugin Esterni
 order: 3
 domid: markdown-example
 ---
 
-React allows you to interface with other libraries and frameworks. This example uses **remarkable**, an external Markdown library, to convert the `<textarea>`'s value in real time.
+React ti permette di interfacciarti con altre librerie e frameworks. Questo esempio usa **remarkable**, una libreria esterna Markdown, per convertire il contenuto di una `<textarea>` in tempo reale.

content/home/examples/a-simple-component.js

@@ -2,13 +2,13 @@ class HelloMessage extends React.Component {
   render() {
     return (
       <div>
-        Hello {this.props.name}
+        Ciao {this.props.name}
       </div>
     );
   }
 }
 
 ReactDOM.render(
-  <HelloMessage name="Taylor" />,
+  <HelloMessage name="Claudia" />,
   document.getElementById('hello-example')
 );

content/home/examples/a-simple-component.md

@@ -1,9 +1,9 @@
 ---
-title: A Simple Component
+title: Un Componente Semplice
 order: 0
 domid: hello-example
 ---
 
-React components implement a `render()` method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by `render()` via `this.props`.
+I componenti React implementano un metodo `render()` che riceve dati in input e ritorna cosa deve visualizzare. Questo esempio usa una sintassi simile ad XML chiamata JSX. I dati passati in input al componente possono essere acceduti da  `render()` via `this.props`.
 
-**JSX is optional and not required to use React.** Try the [Babel REPL](babel://es5-syntax-example) to see the raw JavaScript code produced by the JSX compilation step.
+**JSX é opzionale e non richiesto per utilizzare React.** Prova il tool [Babel REPL](babel://es5-syntax-example) per vedere il codice JavaScript grezzo generato nel processo di compilazione JSX.

content/home/examples/a-stateful-component.js

@@ -21,7 +21,7 @@ class Timer extends React.Component {
   render() {
     return (
       <div>
-        Seconds: {this.state.seconds}
+        Secondi: {this.state.seconds}
       </div>
     );
   }

content/home/examples/a-stateful-component.md

@@ -1,7 +1,7 @@
 ---
-title: A Stateful Component
+title: Un Componente Stateful
 order: 1
 domid: timer-example
 ---
 
-In addition to taking input data (accessed via `this.props`), a component can maintain internal state data (accessed via `this.state`). When a component's state data changes, the rendered markup will be updated by re-invoking `render()`.
+Oltre a ricevere dati in input (accessibili via `this.props`), un componente può mantenere i dati del suo stato interno (accessibili via `this.state`). Quando lo stato di un componente cambia, il codice markup generato viene aggiornato invocando di nuovo `render()`, ciò avviene automaticamente.

content/home/examples/an-application.js

@@ -13,15 +13,15 @@ class TodoApp extends React.Component {
         <TodoList items={this.state.items} />
         <form onSubmit={this.handleSubmit}>
           <label htmlFor="new-todo">
-            What needs to be done?
+            Cosa bisogna fare?
           </label>
           <input
             id="new-todo"
             onChange={this.handleChange}
             value={this.state.text}
           />
           <button>
-            Add #{this.state.items.length + 1}
+            Aggiungi #{this.state.items.length + 1}
           </button>
         </form>
       </div>

content/home/examples/an-application.md

@@ -1,7 +1,7 @@
 ---
-title: An Application
+title: Una Applicazione
 order: 2
 domid: todos-example
 ---
 
-Using `props` and `state`, we can put together a small Todo application. This example uses `state` to track the current list of items as well as the text that the user has entered. Although event handlers appear to be rendered inline, they will be collected and implemented using event delegation.
+Usando `props` e `state`, possiamo costruire una piccola applicazione Todo (lista delle cose da fare). Questo esempio usa `state` per tracciare la lista corrente degli elementi oltre a cosa ha inserito l'utente. Anche se gli event handlers sembrano renderizzati inline, essi vengono raccolti ed implementati mediante delegati.

content/home/marketing/component-based.md

@@ -1,8 +1,8 @@
 ---
-title: Component-Based
+title: Componentizzato
 order: 1
 ---
 
-Build encapsulated components that manage their own state, then compose them to make complex UIs.
+Costruisci componenti che incapsulano e gestiscono il proprio stato interno, componili in modo da creare UI complesse.
 
-Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
+Dato che la logica dei componenti è scritta in JavaScript e non semplicemente in templates, puoi passare strutture dati ricche mantenendo lo stato fuori dal DOM.

content/home/marketing/declarative.md

@@ -1,8 +1,8 @@
 ---
-title: Declarative
+title: Dichiarativo
 order: 0
 ---
 
-React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
+React rende indolore la creazione di UI interattive. Costruisci semplici viste per ogni stato nella tua applicazione e React aggiornerà e renderizzerà efficientemente i componenti affetti dai cambiamenti quando essi avvengono.
 
-Declarative views make your code more predictable and easier to debug.
+Le viste dichiarative rendono il tuo codice più prevedibile e facile da debuggare.

content/home/marketing/learn-once-write-anywhere.md

@@ -1,8 +1,8 @@
 ---
-title: Learn Once, Write Anywhere
+title: Imparalo una volta, usalo ovunque
 order: 2
 ---
 
-We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
+Non facciamo presupposizioni riguardo le tecnologie che usi, in questo modo puoi sviluppare nuove funzionalità in React senza riscrivere codice esistente.
 
-React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
+React può inoltre effettuare il render lato server mediante Node e in apps mobili usando [React Native](https://facebook.github.io/react-native/).

src/pages/index.js

@@ -51,7 +51,7 @@ class Home extends Component {
     return (
       <Layout location={location}>
         <TitleAndMetaTags
-          title="React &ndash; A JavaScript library for building user interfaces"
+          title="React &ndash; Una libreria JavaScript per costruire interfacce utente"
           ogUrl={createOgUrl('index.html')}
         />
         <div css={{width: '100%'}}>
@@ -134,7 +134,7 @@ class Home extends Component {
                         fontSize: 30,
                       },
                     }}>
-                    A JavaScript library for building user interfaces
+                    Una libreria JavaScript per costruire interfacce utente
                   </p>
                   <Flex
                     valign="center"
@@ -149,12 +149,12 @@ class Home extends Component {
                       <ButtonLink
                         to="/docs/getting-started.html"
                         type="primary">
-                        Get Started
+                        Inizia qui
                       </ButtonLink>
                     </CtaItem>
                     <CtaItem>
                       <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                        Take the Tutorial
+                        Segui il Tutorial
                       </ButtonLink>
                     </CtaItem>
                   </Flex>
@@ -286,12 +286,12 @@ class Home extends Component {
               <Flex valign="center">
                 <CtaItem>
                   <ButtonLink to="/docs/getting-started.html" type="primary">
-                    Get Started
+                    Inizia qui
                   </ButtonLink>
                 </CtaItem>
                 <CtaItem>
                   <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                    Take the Tutorial
+                    Segui il Tutorial
                   </ButtonLink>
                 </CtaItem>
               </Flex>