diff --git a/content/home/examples/a-component-using-external-plugins.js b/content/home/examples/a-component-using-external-plugins.js
index 09868cfbb..df7cdaa9f 100644
--- a/content/home/examples/a-component-using-external-plugins.js
+++ b/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"
diff --git a/content/home/examples/a-component-using-external-plugins.md b/content/home/examples/a-component-using-external-plugins.md
index 1c50c8718..59bd9f171 100644
--- a/content/home/examples/a-component-using-external-plugins.md
+++ b/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.
diff --git a/content/home/examples/a-simple-component.js b/content/home/examples/a-simple-component.js
index 90c31b960..5cbf8045b 100644
--- a/content/home/examples/a-simple-component.js
+++ b/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')
);
\ No newline at end of file
diff --git a/content/home/examples/a-simple-component.md b/content/home/examples/a-simple-component.md
index d791856d4..2c2fd58ae 100644
--- a/content/home/examples/a-simple-component.md
+++ b/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.
diff --git a/content/home/examples/a-stateful-component.js b/content/home/examples/a-stateful-component.js
index 25d5a9145..e32296f45 100644
--- a/content/home/examples/a-stateful-component.js
+++ b/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>
);
}
diff --git a/content/home/examples/a-stateful-component.md b/content/home/examples/a-stateful-component.md
index a68ab0a51..a4ac0995a 100644
--- a/content/home/examples/a-stateful-component.md
+++ b/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.
diff --git a/content/home/examples/an-application.js b/content/home/examples/an-application.js
index 43f777dc2..e82fb95ad 100644
--- a/content/home/examples/an-application.js
+++ b/content/home/examples/an-application.js
@@ -13,7 +13,7 @@ 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"
@@ -21,7 +21,7 @@ class TodoApp extends React.Component {
value={this.state.text}
/>
<button>
- Add #{this.state.items.length + 1}
+ Aggiungi #{this.state.items.length + 1}
</button>
</form>
</div>
diff --git a/content/home/examples/an-application.md b/content/home/examples/an-application.md
index 227d0621b..438c3dbd8 100644
--- a/content/home/examples/an-application.md
+++ b/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.
diff --git a/content/home/marketing/component-based.md b/content/home/marketing/component-based.md
index aeb3c4de2..c340591c3 100644
--- a/content/home/marketing/component-based.md
+++ b/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.
diff --git a/content/home/marketing/declarative.md b/content/home/marketing/declarative.md
index c3b651902..755d94565 100644
--- a/content/home/marketing/declarative.md
+++ b/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.
diff --git a/content/home/marketing/learn-once-write-anywhere.md b/content/home/marketing/learn-once-write-anywhere.md
index 009edf5bc..79f75aac0 100644
--- a/content/home/marketing/learn-once-write-anywhere.md
+++ b/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/).
diff --git a/src/pages/index.js b/src/pages/index.js
index bc2d732fd..5ff6274ab 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -51,7 +51,7 @@ class Home extends Component {
return (
<Layout location={location}>
<TitleAndMetaTags
- title="React – A JavaScript library for building user interfaces"
+ title="React – 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>