Skip to content

Commit 0ff401b

Browse files
deblasisdeblasis
authored
Translation for the page 'Basics -> Thinking in React' (#122)
* thinking-in-react: references * thinking-in-react: page * thining-in-react: mocks * thinking-in-react: examples Tried to replicate externally hosted CodePens * thinking-in-react: prettier fix 🤓 * thinking-in-react: prettier... weirdness "--write" changed this file but it looks like that CircleCI doesn't like it... reverting * Update index.html
1 parent c65c8a0 commit 0ff401b

21 files changed

+1741
-115
lines changed

‎content/docs/design-principles.md

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

‎content/docs/getting-started.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,9 @@ If you prefer to **learn by doing,** check out our [practical tutorial](/tutoria
8989

9090
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.
9191

92-
### Thinking in React {#thinking-in-react}
92+
### Pensare in React {#thinking-in-react}
9393

94-
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.
94+
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.
9595

9696
### Recommended Courses {#recommended-courses}
9797

‎content/docs/nav.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
- id: composition-vs-inheritance
3535
title: Composizione vs Ereditarità
3636
- id: thinking-in-react
37-
title: Thinking In React
37+
title: Pensare in React
3838
- title: Advanced Guides
3939
items:
4040
- id: accessibility

‎content/docs/thinking-in-react.md

+80-81
Large diffs are not rendered by default.

‎content/images/blog/thinking-in-react-components.png

-8.9 KB
Loading

‎content/images/blog/thinking-in-react-mock.png

-7.91 KB
Loading

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
padding: 5px
3+
}

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div id="container">
2+
<!-- I contenuti di questo elemento verranno rimpiazzati dal tuo componente. -->
3+
</div>

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

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
4+
class RigaCategoriaProdotti extends React.Component {
5+
render() {
6+
const categoria = this.props.categoria;
7+
return (
8+
<tr>
9+
<th colSpan="2">{categoria}</th>
10+
</tr>
11+
);
12+
}
13+
}
14+
15+
class RigaProdotto extends React.Component {
16+
render() {
17+
const prodotto = this.props.prodotto;
18+
const nome = prodotto.disponibile ? (
19+
prodotto.nome
20+
) : (
21+
<span style={{color: 'red'}}>{prodotto.nome}</span>
22+
);
23+
24+
return (
25+
<tr>
26+
<td>{nome}</td>
27+
<td>{prodotto.prezzo}</td>
28+
</tr>
29+
);
30+
}
31+
}
32+
33+
class TabellaProdotti extends React.Component {
34+
render() {
35+
const righe = [];
36+
let ultimaCategoria = null;
37+
38+
this.props.prodotti.forEach(prodotto => {
39+
if (prodotto.categoria !== ultimaCategoria) {
40+
righe.push(
41+
<RigaCategoriaProdotti
42+
categoria={prodotto.categoria}
43+
key={prodotto.categoria}
44+
/>
45+
);
46+
}
47+
righe.push(
48+
<RigaProdotto
49+
prodotto={prodotto}
50+
key={prodotto.nome}
51+
/>
52+
);
53+
ultimaCategoria = prodotto.categoria;
54+
});
55+
56+
return (
57+
<table>
58+
<thead>
59+
<tr>
60+
<th>Nome</th>
61+
<th>Prezzo</th>
62+
</tr>
63+
</thead>
64+
<tbody>{righe}</tbody>
65+
</table>
66+
);
67+
}
68+
}
69+
70+
class BarraRicerca extends React.Component {
71+
render() {
72+
return (
73+
<form>
74+
<input type="text" placeholder="Cerca..." />
75+
<p>
76+
<input type="checkbox" /> Mostra solo disponibili
77+
</p>
78+
</form>
79+
);
80+
}
81+
}
82+
83+
class TabellaProdottiRicercabile extends React.Component {
84+
render() {
85+
return (
86+
<div>
87+
<BarraRicerca />
88+
<TabellaProdotti prodotti={this.props.prodotti} />
89+
</div>
90+
);
91+
}
92+
}
93+
94+
const PRODOTTI = [
95+
{
96+
categoria: 'Attrezzatura Sportiva',
97+
prezzo: '$49.99',
98+
disponibile: true,
99+
nome: 'Palla da calcio',
100+
},
101+
{
102+
categoria: 'Attrezzatura Sportiva',
103+
prezzo: '$9.99',
104+
disponibile: true,
105+
nome: 'Palla da tennis',
106+
},
107+
{
108+
categoria: 'Attrezzatura Sportiva',
109+
prezzo: '$29.99',
110+
disponibile: false,
111+
nome: 'Palla da canestro',
112+
},
113+
{
114+
categoria: 'Elettronica',
115+
prezzo: '$99.99',
116+
disponibile: true,
117+
nome: 'iPod Touch',
118+
},
119+
{
120+
categoria: 'Elettronica',
121+
prezzo: '$399.99',
122+
disponibile: false,
123+
nome: 'iPhone 5',
124+
},
125+
{
126+
categoria: 'Elettronica',
127+
prezzo: '$199.99',
128+
disponibile: true,
129+
nome: 'Nexus 7',
130+
},
131+
];
132+
133+
ReactDOM.render(
134+
<TabellaProdottiRicercabile prodotti={PRODOTTI} />,
135+
document.getElementById('container')
136+
);

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"name": "thinking-in-react_1",
3+
"dependencies": {
4+
"react": "16.8.3",
5+
"react-dom": "16.8.3"
6+
}
7+
}

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
padding: 5px
3+
}

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

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

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

+171
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
4+
class RigaCategoriaProdotti extends React.Component {
5+
render() {
6+
const categoria = this.props.categoria;
7+
return (
8+
<tr>
9+
<th colSpan="2">{categoria}</th>
10+
</tr>
11+
);
12+
}
13+
}
14+
15+
class RigaProdotto extends React.Component {
16+
render() {
17+
const prodotto = this.props.prodotto;
18+
const nome = prodotto.disponibile ? (
19+
prodotto.nome
20+
) : (
21+
<span style={{color: 'red'}}>{prodotto.nome}</span>
22+
);
23+
24+
return (
25+
<tr>
26+
<td>{nome}</td>
27+
<td>{prodotto.prezzo}</td>
28+
</tr>
29+
);
30+
}
31+
}
32+
33+
class TabellaProdotti extends React.Component {
34+
render() {
35+
const testoRicerca = this.props.testoRicerca;
36+
const soloDisponibili = this.props.soloDisponibili;
37+
38+
const righe = [];
39+
let ultimaCategoria = null;
40+
41+
this.props.prodotti.forEach(prodotto => {
42+
if (prodotto.nome.indexOf(testoRicerca) === -1) {
43+
return;
44+
}
45+
if (soloDisponibili && !prodotto.disponibile) {
46+
return;
47+
}
48+
if (prodotto.categoria !== ultimaCategoria) {
49+
righe.push(
50+
<RigaCategoriaProdotti
51+
categoria={prodotto.categoria}
52+
key={prodotto.categoria}
53+
/>
54+
);
55+
}
56+
righe.push(
57+
<RigaProdotto
58+
prodotto={prodotto}
59+
key={prodotto.nome}
60+
/>
61+
);
62+
ultimaCategoria = prodotto.categoria;
63+
});
64+
65+
return (
66+
<table>
67+
<thead>
68+
<tr>
69+
<th>Nome</th>
70+
<th>Prezzo</th>
71+
</tr>
72+
</thead>
73+
<tbody>{righe}</tbody>
74+
</table>
75+
);
76+
}
77+
}
78+
79+
class BarraRicerca extends React.Component {
80+
render() {
81+
const testoRicerca = this.props.testoRicerca;
82+
const soloDisponibili = this.props.soloDisponibili;
83+
84+
return (
85+
<form>
86+
<input
87+
type="text"
88+
placeholder="Cerca..."
89+
value={testoRicerca}
90+
/>
91+
<p>
92+
<input
93+
type="checkbox"
94+
checked={soloDisponibili}
95+
/>{' '}
96+
Mostra solo disponibili
97+
</p>
98+
</form>
99+
);
100+
}
101+
}
102+
103+
class TabellaProdottiRicercabile extends React.Component {
104+
constructor(props) {
105+
super(props);
106+
this.state = {
107+
testoRicerca: '',
108+
soloDisponibili: false,
109+
};
110+
}
111+
112+
render() {
113+
return (
114+
<div>
115+
<BarraRicerca
116+
testoRicerca={this.state.testoRicerca}
117+
soloDisponibili={this.state.soloDisponibili}
118+
/>
119+
<TabellaProdotti
120+
prodotti={this.props.prodotti}
121+
testoRicerca={this.state.testoRicerca}
122+
soloDisponibili={this.state.soloDisponibili}
123+
/>
124+
</div>
125+
);
126+
}
127+
}
128+
129+
const PRODOTTI = [
130+
{
131+
categoria: 'Attrezzatura Sportiva',
132+
prezzo: '$49.99',
133+
disponibile: true,
134+
nome: 'Palla da calcio',
135+
},
136+
{
137+
categoria: 'Attrezzatura Sportiva',
138+
prezzo: '$9.99',
139+
disponibile: true,
140+
nome: 'Palla da tennis',
141+
},
142+
{
143+
categoria: 'Attrezzatura Sportiva',
144+
prezzo: '$29.99',
145+
disponibile: false,
146+
nome: 'Palla da canestro',
147+
},
148+
{
149+
categoria: 'Elettronica',
150+
prezzo: '$99.99',
151+
disponibile: true,
152+
nome: 'iPod Touch',
153+
},
154+
{
155+
categoria: 'Elettronica',
156+
prezzo: '$399.99',
157+
disponibile: false,
158+
nome: 'iPhone 5',
159+
},
160+
{
161+
categoria: 'Elettronica',
162+
prezzo: '$199.99',
163+
disponibile: true,
164+
nome: 'Nexus 7',
165+
},
166+
];
167+
168+
ReactDOM.render(
169+
<TabellaProdottiRicercabile prodotti={PRODOTTI} />,
170+
document.getElementById('container')
171+
);

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"name": "thinking-in-react_1",
3+
"dependencies": {
4+
"react": "16.8.3",
5+
"react-dom": "16.8.3"
6+
}
7+
}

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
padding: 5px
3+
}

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

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

0 commit comments

Comments
 (0)