Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix children to be a prop in the blog post example #5695

Merged
merged 2 commits into from
Dec 21, 2015
Merged

Fix children to be a prop in the blog post example #5695

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
421d177
Fix children to be a prop in the blog post example
gaearon Dec 18, 2015
89538d4
Fix minor typos in the blog post
gaearon Dec 18, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions docs/_posts/2015-12-18-react-components-elements-and-instances.md
View file
Open in desktop
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