Skip to content

Commit

Permalink
Merge pull request #5695 from gaearon/patch-2
Browse files Browse the repository at this point in the history
Fix children to be a prop in the blog post example
(cherry picked from commit 50af034)
  • Loading branch information
gaearon committed Dec 21, 2015
1 parent b6dc868 commit a1decaf
Showing 1 changed file with 8 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ The difference between **components, their instances, and elements** confuses ma

If you’re new to React, you probably only worked with component classes and instances before. For example, you may declare a `Button` *component* by creating a class. When the app is running, you may have several *instances* of this component on screen, each with its own properties and local state. This is the traditional object-oriented UI programming. Why introduce *elements*?

In this traditional UI model, it is up to you take care of creating and destroying child component instances. If a `Form` component wants to render a `Button` component, it needs to create its instance, and manually keep it up to date with any new information.
In this traditional UI model, it is up to you to take care of creating and destroying child component instances. If a `Form` component wants to render a `Button` component, it needs to create its instance, and manually keep it up to date with any new information.

```js
class Form extends TraditionalObjectOrientedView {
Expand Down Expand Up @@ -70,7 +70,9 @@ When an element’s `type` is a string, it represents a DOM node with that tag n
className: 'button button-blue',
children: {
type: 'b',
children: 'OK!'
props: {
children: 'OK!'
}
}
}
}
Expand Down Expand Up @@ -160,7 +162,7 @@ const DeleteAccount = () => (
);
```
This mix and matching helps keep components decoupled from each other, as they can express both *is-a* () and *has-a* relationships exclusively through composition:
This mix and matching helps keep components decoupled from each other, as they can express both *is-a* and *has-a* relationships exclusively through composition:
* `Button` is a DOM `<button>` with specific properties.
* `DangerButton` is a `Button` with specific properties.
Expand Down Expand Up @@ -191,7 +193,9 @@ React will ask `Button` what it renders to. The `Button` will return this elemen
className: 'button button-blue',
children: {
type: 'b',
children: 'OK!'
props: {
children: 'OK!'
}
}
}
}
Expand Down

0 comments on commit a1decaf

Please sign in to comment.