From 421d177dd272ff0f0b1cb5cc695ae273f84a9d0b Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 18 Dec 2015 21:32:32 +0000 Subject: [PATCH 1/2] Fix children to be a prop in the blog post example --- .../2015-12-18-react-components-elements-and-instances.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/_posts/2015-12-18-react-components-elements-and-instances.md b/docs/_posts/2015-12-18-react-components-elements-and-instances.md index a69abdaae4..29ce23addc 100644 --- a/docs/_posts/2015-12-18-react-components-elements-and-instances.md +++ b/docs/_posts/2015-12-18-react-components-elements-and-instances.md @@ -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!' + } } } } @@ -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!' + } } } } From 89538d44a957cc5b4470fe37376cfcaa05dfb2f1 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 18 Dec 2015 23:24:07 +0000 Subject: [PATCH 2/2] Fix minor typos in the blog post --- .../2015-12-18-react-components-elements-and-instances.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/_posts/2015-12-18-react-components-elements-and-instances.md b/docs/_posts/2015-12-18-react-components-elements-and-instances.md index 29ce23addc..68800aa17f 100644 --- a/docs/_posts/2015-12-18-react-components-elements-and-instances.md +++ b/docs/_posts/2015-12-18-react-components-elements-and-instances.md @@ -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 { @@ -162,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 `