diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index c86735ef7..b02020ee7 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -1,6 +1,6 @@ --- id: composition-vs-inheritance -title: Composition vs Inheritance +title: Composizione vs Ereditarità permalink: docs/composition-vs-inheritance.html redirect_from: - "docs/multiple-components.html" @@ -8,129 +8,120 @@ prev: lifting-state-up.html next: thinking-in-react.html --- -React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components. +React ha un potente modello di composizione, raccomandiamo che lo si usi in alternativa all'ereditarietà per riutilizzare codice tra componenti. -In this section, we will consider a few problems where developers new to React often reach for inheritance, and show how we can solve them with composition. +In questa sezione, considereremo alcuni problemi nei quali gli sviluppatori che sono ancora agli inizi in React utilizzano l'ereditarietà, mostreremo come si possa invece risolverli con la composizione. -## Containment {#containment} +## Contentimento {#containment} -Some components don't know their children ahead of time. This is especially common for components like `Sidebar` or `Dialog` that represent generic "boxes". +Esistono componenti che si comportano da contenitori per altri componenti, non possono quindi sapere a priori quali componenti avranno come figli. Si pensi ad esempio a `Sidebar` (barra laterale) oppure `Dialog` (finestra di dialogo) che rappresentano "scatole" generiche. -We recommend that such components use the special `children` prop to pass children elements directly into their output: +Raccomandiamo che questi componenti facciano uso della prop speciale `children` per passare elementi figli direttamente nell'output: ```js{4} -function FancyBorder(props) { +function BordoFigo(props) { return ( -
+
{props.children}
); } ``` -This lets other components pass arbitrary children to them by nesting the JSX: +Ciò permette di passare componenti figli arbitrariamente annidandoli nel codice JSX: -```js{4-9} -function WelcomeDialog() { +```js{4-8} +function FinestraBenvenuto() { return ( - -

- Welcome -

-

- Thank you for visiting our spacecraft! + +

Benvenuto/a!

+

+ Ti ringraziamo per questa tua visita nella nostra + nave spaziale!

- + ); } ``` -**[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** +**[Prova su CodeSandbox](codesandbox://composition-vs-inheritance/1.js,composition-vs-inheritance/1.css)** -Anything inside the `` JSX tag gets passed into the `FancyBorder` component as a `children` prop. Since `FancyBorder` renders `{props.children}` inside a `
`, the passed elements appear in the final output. +Il contenuto del tag JSX `` viene passato nel componente `BordoFigo` come prop `children`. Dato che `BordoFigo` renderizza `{props.children}` all'interndo di un `
`, gli elementi passati appaiono nell'output finale. -While this is less common, sometimes you might need multiple "holes" in a component. In such cases you may come up with your own convention instead of using `children`: +Anche se si tratta di un approccio meno comune, a volte potresti ritrovarti ad aver bisongno di più di un "buco" all'interno di un componente. In questi casi potresti creare una tua convenzione invece di ricorrere all'uso di `children`: -```js{5,8,18,21} -function SplitPane(props) { +```js{5,7,14} +function Pannello(props) { return ( -
-
- {props.left} -
-
- {props.right} +
+
+ {props.sinistra}
+
{props.destra}
); } function App() { return ( - - } - right={ - - } /> + } destra={} /> ); } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010) +**[Prova su CodeSandbox](codesandbox://composition-vs-inheritance/2.js,composition-vs-inheritance/2.css)** + -React elements like `` and `` are just objects, so you can pass them as props like any other data. This approach may remind you of "slots" in other libraries but there are no limitations on what you can pass as props in React. +Gli elementi React `` e `` sono dei semplici oggetti, quindi puoi passarli come props esattamente come faresti con altri dati. Questo approccio potrebbe ricordarti il concetto di "slots" in altre librerie, ma non ci sono limitazioni su cosa puoi passare come props in React. -## Specialization {#specialization} +## Specializzazioni {#specialization} -Sometimes we think about components as being "special cases" of other components. For example, we might say that a `WelcomeDialog` is a special case of `Dialog`. +A volte pensiamo ai componenti come se fossero "casi speciali" di altri componenti. Ad esempio, potremmo dire che `FinestraBenvenuto` è una specializzazione di `Finestra`. -In React, this is also achieved by composition, where a more "specific" component renders a more "generic" one and configures it with props: +In React, ciò si ottiene mediante composizione, dove componenti più "specifici" renderizzano la versione più "generica" configurandola mediante props: -```js{5,8,16-18} -function Dialog(props) { +```js{4,6,15,16} +function Finestra(props) { return ( - -

- {props.title} -

-

- {props.message} + +

{props.titolo}

+

+ {props.messaggio}

- + ); } -function WelcomeDialog() { +function FinestraBenvenuto() { return ( - + ); } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010) +**[Prova su CodeSandbox](codesandbox://composition-vs-inheritance/3.js,composition-vs-inheritance/3.css)** -Composition works equally well for components defined as classes: -```js{10,27-31} -function Dialog(props) { +La composizione funziona ugualmente bene per i componenti definiti come classi: + +```js{8,26-32} +function Finestra(props) { return ( - -

- {props.title} -

-

- {props.message} + +

{props.titolo}

+

+ {props.messaggio}

{props.children} - + ); } -class SignUpDialog extends React.Component { +class FinestraRegistrazione extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); @@ -140,14 +131,17 @@ class SignUpDialog extends React.Component { render() { return ( - - + + - + ); } @@ -156,17 +150,18 @@ class SignUpDialog extends React.Component { } handleSignUp() { - alert(`Welcome aboard, ${this.state.login}!`); + alert(`Benvenuto/a a bordo, ${this.state.login}!`); } } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010) +**[Prova su CodeSandbox](codesandbox://composition-vs-inheritance/4.js,composition-vs-inheritance/4.css)** + -## So What About Inheritance? {#so-what-about-inheritance} +## E per quanto riguarda l'ereditarietà? {#so-what-about-inheritance} -At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies. +In Facebook, usiamo React in migliaia di componenti ma non abbiamo mai avuto alcun caso in cui sarebbe raccomandabile utilizzare gerarchie di ereditarietà per i componenti. -Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions. +Le props e la composizione ti offrono tutta la flessibilità di cui hai bisogno per personalizzare l'aspetto ed il comportamento di un componente in modo esplicito e sicuro. Ricorda che i componenti possono accettare props arbitrarie, inclusi valori primitivi, elementi React o funzioni. -If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it. +Se vuoi riutilizzare le funzionalità non strettamente legate alla UI tra componenti, suggeriamo di estrarre tali logiche all'interno di un modulo JavaScript separato. I componenti potranno quindi importarlo ed utilizzare quella funzione, oggetto o classe di cui hanno bisogno, senza dover estendere tale modulo. diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 570f004bf..45b93cd49 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -32,7 +32,7 @@ - id: lifting-state-up title: Lifting State Up - id: composition-vs-inheritance - title: Composition vs Inheritance + title: Composizione vs Ereditarità - id: thinking-in-react title: Thinking In React - title: Advanced Guides diff --git a/examples/composition-vs-inheritance/1.css b/examples/composition-vs-inheritance/1.css new file mode 100644 index 000000000..28df7fefa --- /dev/null +++ b/examples/composition-vs-inheritance/1.css @@ -0,0 +1,17 @@ +.BordoFigo { + padding: 10px 10px; + border: 10px solid; +} + +.BordoFigo-blue { + border-color: blue; +} + +.Finestra-titolo { + margin: 0; + font-family: sans-serif; +} + +.Finestra-messaggio { + font-size: larger; +} \ No newline at end of file diff --git a/examples/composition-vs-inheritance/1.js b/examples/composition-vs-inheritance/1.js new file mode 100644 index 000000000..1dd339c83 --- /dev/null +++ b/examples/composition-vs-inheritance/1.js @@ -0,0 +1,28 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './1.css'; + +function BordoFigo(props) { + return ( +
+ {props.children} +
+ ); +} + +function FinestraBenvenuto() { + return ( + +

Benvenuto/a!

+

+ Ti ringraziamo per questa tua visita nella nostra + nave spaziale! +

+ + ); +} + +ReactDOM.render( + , + document.getElementById('root') +); diff --git a/examples/composition-vs-inheritance/2.css b/examples/composition-vs-inheritance/2.css new file mode 100644 index 000000000..22eea2c29 --- /dev/null +++ b/examples/composition-vs-inheritance/2.css @@ -0,0 +1,33 @@ +html, body, #root { + width: 100%; + height: 100%; +} + +.Pannello { + width: 100%; + height: 100%; +} + +.Pannello-sinistra { + float: left; + width: 30%; + height: 100%; +} + +.Pannello-destra { + float: left; + width: 70%; + height: 100%; +} + +.Contatti { + width: 100%; + height: 100%; + background: lightblue; +} + +.Chat { + width: 100%; + height: 100%; + background: pink; +} \ No newline at end of file diff --git a/examples/composition-vs-inheritance/2.js b/examples/composition-vs-inheritance/2.js new file mode 100644 index 000000000..b9845eb41 --- /dev/null +++ b/examples/composition-vs-inheritance/2.js @@ -0,0 +1,30 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './2.css'; + +function Contatti() { + return
; +} + +function Chat() { + return
; +} + +function Pannello(props) { + return ( +
+
+ {props.sinistra} +
+
{props.destra}
+
+ ); +} + +function App() { + return ( + } destra={} /> + ); +} + +ReactDOM.render(, document.getElementById('root')); diff --git a/examples/composition-vs-inheritance/3.css b/examples/composition-vs-inheritance/3.css new file mode 100644 index 000000000..28df7fefa --- /dev/null +++ b/examples/composition-vs-inheritance/3.css @@ -0,0 +1,17 @@ +.BordoFigo { + padding: 10px 10px; + border: 10px solid; +} + +.BordoFigo-blue { + border-color: blue; +} + +.Finestra-titolo { + margin: 0; + font-family: sans-serif; +} + +.Finestra-messaggio { + font-size: larger; +} \ No newline at end of file diff --git a/examples/composition-vs-inheritance/3.js b/examples/composition-vs-inheritance/3.js new file mode 100644 index 000000000..0a716d018 --- /dev/null +++ b/examples/composition-vs-inheritance/3.js @@ -0,0 +1,37 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './3.css'; + +function BordoFigo(props) { + return ( +
+ {props.children} +
+ ); +} + +function Finestra(props) { + return ( + +

{props.titolo}

+

+ {props.messaggio} +

+ + ); +} + +function FinestraBenvenuto() { + return ( + + ); +} + +ReactDOM.render( + , + document.getElementById('root') +); diff --git a/examples/composition-vs-inheritance/4.css b/examples/composition-vs-inheritance/4.css new file mode 100644 index 000000000..28df7fefa --- /dev/null +++ b/examples/composition-vs-inheritance/4.css @@ -0,0 +1,17 @@ +.BordoFigo { + padding: 10px 10px; + border: 10px solid; +} + +.BordoFigo-blue { + border-color: blue; +} + +.Finestra-titolo { + margin: 0; + font-family: sans-serif; +} + +.Finestra-messaggio { + font-size: larger; +} \ No newline at end of file diff --git a/examples/composition-vs-inheritance/4.js b/examples/composition-vs-inheritance/4.js new file mode 100644 index 000000000..e64b3410f --- /dev/null +++ b/examples/composition-vs-inheritance/4.js @@ -0,0 +1,61 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './4.css'; + +function BordoFigo(props) { + return ( +
+ {props.children} +
+ ); +} + +function Finestra(props) { + return ( + +

{props.titolo}

+

+ {props.messaggio} +

+ {props.children} + + ); +} + +class FinestraRegistrazione extends React.Component { + constructor(props) { + super(props); + this.handleChange = this.handleChange.bind(this); + this.handleSignUp = this.handleSignUp.bind(this); + this.state = {login: ''}; + } + + render() { + return ( + + + + + ); + } + + handleChange(e) { + this.setState({login: e.target.value}); + } + + handleSignUp() { + alert(`Benvenuto/a a bordo, ${this.state.login}!`); + } +} + +ReactDOM.render( + , + document.getElementById('root') +);