Translation for the page 'Basics -> Thinking in React'

content/docs/design-principles.md

@@ -14,7 +14,7 @@ We wrote this document so that you have a better idea of how we decide what Reac
 >
 >This document assumes a strong understanding of React. It describes the design principles of *React itself*, not React components or applications.
 >
->For an introduction to React, check out [Thinking in React](/docs/thinking-in-react.html) instead.
+>For an introduction to React, check out [Pensare in React](/docs/thinking-in-react.html) instead.
 
 ### Composition {#composition}
 

content/docs/getting-started.md

@@ -89,9 +89,9 @@ If you prefer to **learn by doing,** check out our [practical tutorial](/tutoria
 
 If you prefer to **learn concepts step by step,** our [guide to main concepts](/docs/hello-world.html) is the best place to start. Every next chapter in it builds on the knowledge introduced in the previous chapters so you won't miss anything as you go along.
 
-### Thinking in React {#thinking-in-react}
+### Pensare in React {#thinking-in-react}
 
-Many React users credit reading [Thinking in React](/docs/thinking-in-react.html) as the moment React finally "clicked" for them. It's probably the oldest React walkthrough but it's still just as relevant.
+Many React users credit reading [Pensare in React](/docs/thinking-in-react.html) as the moment React finally "clicked" for them. It's probably the oldest React walkthrough but it's still just as relevant.
 
 ### Recommended Courses {#recommended-courses}
 

content/docs/nav.yml

@@ -34,7 +34,7 @@
     - id: composition-vs-inheritance
       title: Composition vs Inheritance
     - id: thinking-in-react
-      title: Thinking In React
+      title: Pensare in React
 - title: Advanced Guides
   items:
     - id: accessibility

examples/thinking-in-react/1/index.css

@@ -0,0 +1,3 @@
+body {
+    padding: 5px
+}

examples/thinking-in-react/1/index.html

@@ -0,0 +1,3 @@
+<div id="container">
+    <!-- This element's contents will be replaced with your component. -->
+</div>

examples/thinking-in-react/1/index.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class RigaCategoriaProdotti extends React.Component {
+  render() {
+    const categoria = this.props.categoria;
+    return (
+      <tr>
+        <th colSpan="2">{categoria}</th>
+      </tr>
+    );
+  }
+}
+
+class RigaProdotto extends React.Component {
+  render() {
+    const prodotto = this.props.prodotto;
+    const nome = prodotto.disponibile ? (
+      prodotto.nome
+    ) : (
+      <span style={{color: 'red'}}>{prodotto.nome}</span>
+    );
+
+    return (
+      <tr>
+        <td>{nome}</td>
+        <td>{prodotto.prezzo}</td>
+      </tr>
+    );
+  }
+}
+
+class TabellaProdotti extends React.Component {
+  render() {
+    const righe = [];
+    let ultimaCategoria = null;
+
+    this.props.prodotti.forEach(prodotto => {
+      if (prodotto.categoria !== ultimaCategoria) {
+        righe.push(
+          <RigaCategoriaProdotti
+            categoria={prodotto.categoria}
+            key={prodotto.categoria}
+          />
+        );
+      }
+      righe.push(
+        <RigaProdotto
+          prodotto={prodotto}
+          key={prodotto.nome}
+        />
+      );
+      ultimaCategoria = prodotto.categoria;
+    });
+
+    return (
+      <table>
+        <thead>
+          <tr>
+            <th>Nome</th>
+            <th>Prezzo</th>
+          </tr>
+        </thead>
+        <tbody>{righe}</tbody>
+      </table>
+    );
+  }
+}
+
+class BarraRicerca extends React.Component {
+  render() {
+    return (
+      <form>
+        <input type="text" placeholder="Cerca..." />
+        <p>
+          <input type="checkbox" /> Mostra solo disponibili
+        </p>
+      </form>
+    );
+  }
+}
+
+class TabellaProdottiRicercabile extends React.Component {
+  render() {
+    return (
+      <div>
+        <BarraRicerca />
+        <TabellaProdotti prodotti={this.props.prodotti} />
+      </div>
+    );
+  }
+}
+
+const PRODOTTI = [
+  {
+    categoria: 'Attrezzatura Sportiva',
+    prezzo: '$49.99',
+    disponibile: true,
+    nome: 'Palla da calcio',
+  },
+  {
+    categoria: 'Attrezzatura Sportiva',
+    prezzo: '$9.99',
+    disponibile: true,
+    nome: 'Palla da tennis',
+  },
+  {
+    categoria: 'Attrezzatura Sportiva',
+    prezzo: '$29.99',
+    disponibile: false,
+    nome: 'Palla da canestro',
+  },
+  {
+    categoria: 'Elettronica',
+    prezzo: '$99.99',
+    disponibile: true,
+    nome: 'iPod Touch',
+  },
+  {
+    categoria: 'Elettronica',
+    prezzo: '$399.99',
+    disponibile: false,
+    nome: 'iPhone 5',
+  },
+  {
+    categoria: 'Elettronica',
+    prezzo: '$199.99',
+    disponibile: true,
+    nome: 'Nexus 7',
+  },
+];
+
+ReactDOM.render(
+  <TabellaProdottiRicercabile prodotti={PRODOTTI} />,
+  document.getElementById('container')
+);

examples/thinking-in-react/1/package.json

@@ -0,0 +1,7 @@
+{
+    "name": "thinking-in-react_1",
+    "dependencies": {
+        "react": "16.8.3",
+        "react-dom": "16.8.3"
+    }
+}

examples/thinking-in-react/2/index.css

@@ -0,0 +1,3 @@
+body {
+    padding: 5px
+}

examples/thinking-in-react/2/index.html

@@ -0,0 +1,3 @@
+<div id="container">
+    <!-- This element's contents will be replaced with your component. -->
+</div>

examples/thinking-in-react/2/index.js

@@ -0,0 +1,171 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class RigaCategoriaProdotti extends React.Component {
+  render() {
+    const categoria = this.props.categoria;
+    return (
+      <tr>
+        <th colSpan="2">{categoria}</th>
+      </tr>
+    );
+  }
+}
+
+class RigaProdotto extends React.Component {
+  render() {
+    const prodotto = this.props.prodotto;
+    const nome = prodotto.disponibile ? (
+      prodotto.nome
+    ) : (
+      <span style={{color: 'red'}}>{prodotto.nome}</span>
+    );
+
+    return (
+      <tr>
+        <td>{nome}</td>
+        <td>{prodotto.prezzo}</td>
+      </tr>
+    );
+  }
+}
+
+class TabellaProdotti extends React.Component {
+  render() {
+    const testoRicerca = this.props.testoRicerca;
+    const soloDisponibili = this.props.soloDisponibili;
+
+    const righe = [];
+    let ultimaCategoria = null;
+
+    this.props.prodotti.forEach(prodotto => {
+      if (prodotto.nome.indexOf(testoRicerca) === -1) {
+        return;
+      }
+      if (soloDisponibili && !prodotto.disponibile) {
+        return;
+      }
+      if (prodotto.categoria !== ultimaCategoria) {
+        righe.push(
+          <RigaCategoriaProdotti
+            categoria={prodotto.categoria}
+            key={prodotto.categoria}
+          />
+        );
+      }
+      righe.push(
+        <RigaProdotto
+          prodotto={prodotto}
+          key={prodotto.nome}
+        />
+      );
+      ultimaCategoria = prodotto.categoria;
+    });
+
+    return (
+      <table>
+        <thead>
+          <tr>
+            <th>Nome</th>
+            <th>Prezzo</th>
+          </tr>
+        </thead>
+        <tbody>{righe}</tbody>
+      </table>
+    );
+  }
+}
+
+class BarraRicerca extends React.Component {
+  render() {
+    const testoRicerca = this.props.testoRicerca;
+    const soloDisponibili = this.props.soloDisponibili;
+
+    return (
+      <form>
+        <input
+          type="text"
+          placeholder="Cerca..."
+          value={testoRicerca}
+        />
+        <p>
+          <input
+            type="checkbox"
+            checked={soloDisponibili}
+          />{' '}
+          Mostra solo disponibili
+        </p>
+      </form>
+    );
+  }
+}
+
+class TabellaProdottiRicercabile extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      testoRicerca: '',
+      soloDisponibili: false,
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <BarraRicerca
+          testoRicerca={this.state.testoRicerca}
+          soloDisponibili={this.state.soloDisponibili}
+        />
+        <TabellaProdotti
+          prodotti={this.props.prodotti}
+          testoRicerca={this.state.testoRicerca}
+          soloDisponibili={this.state.soloDisponibili}
+        />
+      </div>
+    );
+  }
+}
+
+const PRODOTTI = [
+  {
+    categoria: 'Attrezzatura Sportiva',
+    prezzo: '$49.99',
+    disponibile: true,
+    nome: 'Palla da calcio',
+  },
+  {
+    categoria: 'Attrezzatura Sportiva',
+    prezzo: '$9.99',
+    disponibile: true,
+    nome: 'Palla da tennis',
+  },
+  {
+    categoria: 'Attrezzatura Sportiva',
+    prezzo: '$29.99',
+    disponibile: false,
+    nome: 'Palla da canestro',
+  },
+  {
+    categoria: 'Elettronica',
+    prezzo: '$99.99',
+    disponibile: true,
+    nome: 'iPod Touch',
+  },
+  {
+    categoria: 'Elettronica',
+    prezzo: '$399.99',
+    disponibile: false,
+    nome: 'iPhone 5',
+  },
+  {
+    categoria: 'Elettronica',
+    prezzo: '$199.99',
+    disponibile: true,
+    nome: 'Nexus 7',
+  },
+];
+
+ReactDOM.render(
+  <TabellaProdottiRicercabile prodotti={PRODOTTI} />,
+  document.getElementById('container')
+);

examples/thinking-in-react/2/package.json

@@ -0,0 +1,7 @@
+{
+    "name": "thinking-in-react_1",
+    "dependencies": {
+        "react": "16.8.3",
+        "react-dom": "16.8.3"
+    }
+}

examples/thinking-in-react/3/index.css

@@ -0,0 +1,3 @@
+body {
+    padding: 5px
+}

examples/thinking-in-react/3/index.html

@@ -0,0 +1,3 @@
+<div id="container">
+    <!-- This element's contents will be replaced with your component. -->
+</div>