diff --git a/blog/2013/11/05/thinking-in-react.html b/blog/2013/11/05/thinking-in-react.html index eafb7ab4d6..c68b3c0502 100644 --- a/blog/2013/11/05/thinking-in-react.html +++ b/blog/2013/11/05/thinking-in-react.html @@ -194,16 +194,22 @@

Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. This is often the most challenging part for newcomers to understand, so follow these steps to figure it out:

-

For each piece of state in your application: - * Identify every component that renders something based on that state. - * Find a common owner component (a single component above all the components that need the state in the hierarchy). - * Either the common owner or another component higher up in the hierarchy should own the state. - * If you can't find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.

+

For each piece of state in your application:

-

Let's run through this strategy for our application: - * ProductTable needs to filter the product list based on state and SearchBar needs to display the search text and checked state. - * The common owner component is FilterableProductTable. - * It conceptually makes sense for the filter text and checked value to live in FilterableProductTable

+ + +

Let's run through this strategy for our application:

+ +

Cool, so we've decided that our state lives in FilterableProductTable. First, add a getInitialState() method to FilterableProductTable that returns {filterText: '', inStockOnly: false} to reflect the initial state of your application. Then pass filterText and inStockOnly to ProductTable and SearchBar as a prop. Finally, use these props to filter the rows in ProductTable and set the values of the form fields in SearchBar.

diff --git a/blog/index.html b/blog/index.html index 49014bc513..5da03a2ef0 100644 --- a/blog/index.html +++ b/blog/index.html @@ -194,16 +194,22 @@

Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. This is often the most challenging part for newcomers to understand, so follow these steps to figure it out:

-

For each piece of state in your application: - * Identify every component that renders something based on that state. - * Find a common owner component (a single component above all the components that need the state in the hierarchy). - * Either the common owner or another component higher up in the hierarchy should own the state. - * If you can't find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.

+

For each piece of state in your application:

-

Let's run through this strategy for our application: - * ProductTable needs to filter the product list based on state and SearchBar needs to display the search text and checked state. - * The common owner component is FilterableProductTable. - * It conceptually makes sense for the filter text and checked value to live in FilterableProductTable

+ + +

Let's run through this strategy for our application:

+ +

Cool, so we've decided that our state lives in FilterableProductTable. First, add a getInitialState() method to FilterableProductTable that returns {filterText: '', inStockOnly: false} to reflect the initial state of your application. Then pass filterText and inStockOnly to ProductTable and SearchBar as a prop. Finally, use these props to filter the rows in ProductTable and set the values of the form fields in SearchBar.

diff --git a/feed.xml b/feed.xml index b74f48d088..cc9a5bb793 100644 --- a/feed.xml +++ b/feed.xml @@ -112,16 +112,22 @@ <p>Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. <strong>This is often the most challenging part for newcomers to understand,</strong> so follow these steps to figure it out:</p> -<p>For each piece of state in your application: - * Identify every component that renders something based on that state. - * Find a common owner component (a single component above all the components that need the state in the hierarchy). - * Either the common owner or another component higher up in the hierarchy should own the state. - * If you can&#39;t find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.</p> +<p>For each piece of state in your application:</p> -<p>Let&#39;s run through this strategy for our application: - * <code>ProductTable</code> needs to filter the product list based on state and <code>SearchBar</code> needs to display the search text and checked state. - * The common owner component is <code>FilterableProductTable</code>. - * It conceptually makes sense for the filter text and checked value to live in <code>FilterableProductTable</code></p> +<ul> +<li>Identify every component that renders something based on that state.</li> +<li>Find a common owner component (a single component above all the components that need the state in the hierarchy).</li> +<li>Either the common owner or another component higher up in the hierarchy should own the state.</li> +<li>If you can&#39;t find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.</li> +</ul> + +<p>Let&#39;s run through this strategy for our application:</p> + +<ul> +<li><code>ProductTable</code> needs to filter the product list based on state and <code>SearchBar</code> needs to display the search text and checked state.</li> +<li>The common owner component is <code>FilterableProductTable</code>.</li> +<li>It conceptually makes sense for the filter text and checked value to live in <code>FilterableProductTable</code></li> +</ul> <p>Cool, so we&#39;ve decided that our state lives in <code>FilterableProductTable</code>. First, add a <code>getInitialState()</code> method to <code>FilterableProductTable</code> that returns <code>{filterText: &#39;&#39;, inStockOnly: false}</code> to reflect the initial state of your application. Then pass <code>filterText</code> and <code>inStockOnly</code> to <code>ProductTable</code> and <code>SearchBar</code> as a prop. Finally, use these props to filter the rows in <code>ProductTable</code> and set the values of the form fields in <code>SearchBar</code>.</p>