maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #5695 from gaearon/patch-2 

Fix children to be a prop in the blog post example
This commit is contained in:
Dan Abramov 2015-12-21 20:04:52 +00:00
parent dae1152e66 89538d44a9
commit 50af034108
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/_posts/2015-12-18-react-components-elements-and-instances.md
View File

@ -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 {
@ -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!'
}
}
}
}
@ -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.
@ -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!'
}
}
}
}