Merge pull request #31 from reactjs/composition-vs-inheritance

Composition vs inheritance

content/docs/composition-vs-inheritance.md

@@ -1,22 +1,22 @@
 ---
 id: composition-vs-inheritance
-title: Composition vs Inheritance
+title: Composició vs. herència
 permalink: docs/composition-vs-inheritance.html
 redirect_from:
   - "docs/multiple-components.html"
 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 té un model potent de composició, i recomanem usar composició en lloc d'herència per reusar codi entre components.
 
-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.
+En aquesta secció, considerem alguns problemes que desenvolupadors nous a React solucionen amb herència, i mostrem com podem resoldre'ls amb composició.
 
-## Containment {#containment}
+## Contenció {#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".
+Alguns components no conèixen els seus fills anticipadament. Això és especialment comú per components com `Sidebar` o `Dialog` que representen "capces" genèriques.
 
-We recommend that such components use the special `children` prop to pass children elements directly into their output:
+Recomanem que aquests components emprin la prop especial `children` per passar elements fill directament al seu resultat:
 
 ```js{4}
 function FancyBorder(props) {
@@ -28,7 +28,7 @@ function FancyBorder(props) {
 }
 ```
 
-This lets other components pass arbitrary children to them by nesting the JSX:
+Això permet que altres components els hi passin fills arbitraris niant JSX:
 
 ```js{4-9}
 function WelcomeDialog() {
@@ -45,11 +45,11 @@ function WelcomeDialog() {
 }
 ```
 
-**[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)**
+**[Prova-ho a CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)**
 
-Anything inside the `<FancyBorder>` JSX tag gets passed into the `FancyBorder` component as a `children` prop. Since `FancyBorder` renders `{props.children}` inside a `<div>`, the passed elements appear in the final output.
+Qualsevol cosa a dins l'etiqueta JSX `<FancyBorder>` és passat a dins el component `FancyBorder` com una propietat `children`. Com que `FancyBorder` renderitza `{props.children}` a dins un `<div>`, els elements que han estat passats apareixen en el resultat final.
 
-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`:
+Mentre que això és menys comú, a vegades pot ser que necessitis diversos "buits" en un component. En aquests casos pots inventar-te la teva convenció en lloc d'usar `children`:
 
 ```js{5,8,18,21}
 function SplitPane(props) {
@@ -78,15 +78,15 @@ function App() {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010)
+[**Prova-ho a CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010)
 
-React elements like `<Contacts />` and `<Chat />` 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.
+Elements de React com `<Contacts />` i `<Chat />` són només objectes, així que pots passar-los com props com qualsevol altra dada. Aquesta forma pot recordar-te a "forats" en altres llibreries però no hi ha limitacions en el que pots passar com props a React.
 
-## Specialization {#specialization}
+## Especialització {#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`.
+Alguns cops creiem que els components són "casos especials" d'altres components. Per exemple, podem dir que un `WelcomeDialog` és un cas especial de `Dialog`.
 
-In React, this is also achieved by composition, where a more "specific" component renders a more "generic" one and configures it with props:
+A React, això també es pot aconseguir per composició, on un component més "específic" en renderitza un de més "genèric" i el configura amb props:
 
 ```js{5,8,16-18}
 function Dialog(props) {
@@ -111,9 +111,9 @@ function WelcomeDialog() {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010)
+[**Prova-ho a CodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010)
 
-Composition works equally well for components defined as classes:
+La composició funciona igualment bé per a components definits com a classes:
 
 ```js{10,27-31}
 function Dialog(props) {
@@ -161,12 +161,12 @@ class SignUpDialog extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010)
+[**Prova-ho a CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010)
 
-## So What About Inheritance? {#so-what-about-inheritance}
+## Llavors què passa amb l'herència? {#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.
+A Facebook, usem React a mils de components, i no hem trobat cap cas on recomanaríem crear jerarquies d'herència de components.
 
-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.
+Props i composició et donen tota la flexibilitat que necessites per personalitzar l'aparença d'un component i el comportament d'una forma explícita i segura. Recorda que els components poden acceptar props arbitràries, inclosos valors primitius, elements de React, o funcions.
 
-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.
+Si vols reusar funcionalitat que no sigui d'interfície d'usuari entre components, suggerim extreure-la en un mòdul de JavaScript separat. Els components poden importar-lo i usar aquella funció, objecte, o classe, sense extendre'ls.