From f3529c09e53fdb9013d87e3078af61449828ea8a Mon Sep 17 00:00:00 2001 From: Dmitry Semigradsky Date: Fri, 26 Aug 2016 16:36:25 +0300 Subject: [PATCH 01/34] Update 2016-08-17-children-types.markdown Fix link --- _posts/2016-08-17-children-types.markdown | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_posts/2016-08-17-children-types.markdown b/_posts/2016-08-17-children-types.markdown index f8f8743..29b0cdb 100644 --- a/_posts/2016-08-17-children-types.markdown +++ b/_posts/2016-08-17-children-types.markdown @@ -22,7 +22,7 @@ React can render `children` of many types. In most cases it's either an `array` {% endhighlight %} -Functions may be used as children. However, it will required [coordination with the parent component](#Render callbacks) to be useful. +Functions may be used as children. However, it will required [coordination with the parent component](#Render callback) to be useful. `function` @@ -30,4 +30,4 @@ Functions may be used as children. However, it will required [coordination with
{() => { return "hello world!"}()}
-{% endhighlight %} \ No newline at end of file +{% endhighlight %} From cff20c3eb123f1ce95480bc4dbe253cb8a1eb453 Mon Sep 17 00:00:00 2001 From: Dmitry Semigradsky Date: Fri, 26 Aug 2016 16:40:53 +0300 Subject: [PATCH 02/34] Update 2016-08-17-jsx-spread-attributes.markdown Fix link --- _posts/2016-08-17-jsx-spread-attributes.markdown | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_posts/2016-08-17-jsx-spread-attributes.markdown b/_posts/2016-08-17-jsx-spread-attributes.markdown index 806bc51..a81eeb9 100644 --- a/_posts/2016-08-17-jsx-spread-attributes.markdown +++ b/_posts/2016-08-17-jsx-spread-attributes.markdown @@ -15,7 +15,7 @@ These two examples are equivalent.
{% endhighlight %} -There are a few cases this feature really shines. I use it all the time for my [#Stateless function] components. I get to apply `props` my component is concerned with, while keeping the component open other use cases. +There are a few cases this feature really shines. I use it all the time for my [stateless function components](#Stateless function). I get to apply `props` my component is concerned with, while keeping the component open other use cases. Look at this component that applies a className and fowards the remaining props. @@ -46,4 +46,4 @@ const FancyDiv = ({ className, ...props }) => className={["fancy", className].join(' ')} {...props} /> -{% endhighlight %} \ No newline at end of file +{% endhighlight %} From 2e25843c40cf84ab89c24d0daaf405f2ede04c94 Mon Sep 17 00:00:00 2001 From: Konstantin Mikhaylov Date: Sun, 28 Aug 2016 02:56:46 +1000 Subject: [PATCH 03/34] Fix typo in component name --- _posts/2016-08-23-layout-component.markdown | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_posts/2016-08-23-layout-component.markdown b/_posts/2016-08-23-layout-component.markdown index e8f8567..cd26bc3 100644 --- a/_posts/2016-08-23-layout-component.markdown +++ b/_posts/2016-08-23-layout-component.markdown @@ -20,7 +20,7 @@ We can aggressively optimize this component. While `HorizontalSplit` will be `parent` to both components, it will never be their `owner`. We can tell it to update never, without affecting the updating components inside. {% highlight ts %} -class HorizantalSplit extends React.Component { +class HorizontalSplit extends React.Component { shouldComponentUpdate() { return false } @@ -31,4 +31,4 @@ class HorizantalSplit extends React.Component {
{this.props.rightSide}
} -{% endhighlight %} \ No newline at end of file +{% endhighlight %} From b2b2548bd03dde096b82196c86f18fc57b6a6ea6 Mon Sep 17 00:00:00 2001 From: Alexander Kledal <201371052@iha.dk> Date: Mon, 29 Aug 2016 22:55:37 +0200 Subject: [PATCH 04/34] Fix typo in layout component --- _posts/2016-08-23-layout-component.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/2016-08-23-layout-component.markdown b/_posts/2016-08-23-layout-component.markdown index cd26bc3..5ddf557 100644 --- a/_posts/2016-08-23-layout-component.markdown +++ b/_posts/2016-08-23-layout-component.markdown @@ -4,7 +4,7 @@ title: "Layout component" date: 2016-08-23 08:19:00 --- -Layout components result in some for of static DOM element. It might not need to update frequently, if ever. +Layout components result in some form of static DOM element. It might not need to update frequently, if ever. Consider a component that renders two `children` side-by-side. From ee877da0c071bb154046eb7fb62886d745540bdf Mon Sep 17 00:00:00 2001 From: Michael Chan Date: Mon, 29 Aug 2016 14:12:23 -0700 Subject: [PATCH 05/34] grammer: fixes --- _posts/2016-08-17-array-as-chidren.markdown | 12 +++++----- _posts/2016-08-17-children-types.markdown | 2 +- ...016-08-17-destructuring-arguments.markdown | 6 ++--- .../2016-08-17-function-as-children.markdown | 6 ++--- .../2016-08-17-jsx-spread-attributes.markdown | 22 +++++++++++++------ _posts/2016-08-17-render-callback.markdown | 10 ++++----- _posts/2016-08-17-stateless-function.markdown | 4 ++-- .../2016-08-18-children-pass-through.markdown | 6 ++--- _posts/2016-08-18-proxy-component.markdown | 2 +- _posts/2016-08-18-style-component.markdown | 2 +- .../2016-08-23-container-component.markdown | 2 +- _posts/2016-08-23-event-switch.markdown | 10 ++++----- ...2016-08-23-higher-order-component.markdown | 2 +- _posts/2016-08-23-layout-component.markdown | 2 +- 14 files changed, 47 insertions(+), 41 deletions(-) diff --git a/_posts/2016-08-17-array-as-chidren.markdown b/_posts/2016-08-17-array-as-chidren.markdown index c1aff13..d102e49 100644 --- a/_posts/2016-08-17-array-as-chidren.markdown +++ b/_posts/2016-08-17-array-as-chidren.markdown @@ -4,14 +4,14 @@ title: "Array as children" date: 2016-08-17 17:27:00 --- -Providing an array as `children` is a very common pattern. It's how lists are drawn in React. +Providing an array as `children` is a very common. It's how lists are drawn in React. -We can use `map()` to create an array of React Elements for every value in the array. +We use `map()` to create an array of React Elements for every value in the array. {% highlight ts %}
    - {["first", "second"].map((item, i) => ( -
  • {item}
    • + {["first", "second"].map((item) => ( +
  • {item}
    • ))}
{% endhighlight %} @@ -21,8 +21,8 @@ That's equivalent to providing a literal `array`. {% highlight ts %}
    {[ -
  • first
    • , -
  • second
    • , +
  • first
    • , +
  • second
    • , ]}
{% endhighlight %} diff --git a/_posts/2016-08-17-children-types.markdown b/_posts/2016-08-17-children-types.markdown index 29b0cdb..6cf4dd1 100644 --- a/_posts/2016-08-17-children-types.markdown +++ b/_posts/2016-08-17-children-types.markdown @@ -22,7 +22,7 @@ React can render `children` of many types. In most cases it's either an `array` {% endhighlight %} -Functions may be used as children. However, it will required [coordination with the parent component](#Render callback) to be useful. +Functions may be used as children. However, it requires [coordination with the parent component](#Render callback) to be useful. `function` diff --git a/_posts/2016-08-17-destructuring-arguments.markdown b/_posts/2016-08-17-destructuring-arguments.markdown index a6e4abc..3f311f6 100644 --- a/_posts/2016-08-17-destructuring-arguments.markdown +++ b/_posts/2016-08-17-destructuring-arguments.markdown @@ -4,7 +4,7 @@ title: "Destructuring Arguments" date: 2016-08-17 14:48:00 --- -[Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) is an ES2015 feature. It pairs nicely with `props` in Stateless Funcions. +[Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) is an ES2015 feature. It pairs nicely with `props` in Stateless Functions. These examples are equivalent. {% highlight ts %} @@ -20,11 +20,11 @@ const Greeting = ({ name, ...props }) =>
Hi {name}!
{% endhighlight %} -We can use [JSX Spread Attributes](#JSX Spread Attributes) to forword these to the rendered component. +In turn, this object can use [JSX Spread Attributes](#JSX Spread Attributes) to forword `props` to the composed component. {% highlight ts %} const Greeting = ({ name, ...props }) =>
Hi {name}!
{% endhighlight %} -If your component is concerned with non-DOM `props`. It's important to "clean" `props` before passing them along. By destructuring `props`, we're making a new object **without** our component-specific `props`. \ No newline at end of file +Avoid forwarding non-DOM `props` to composed components. Destructuring makes this very easy because you can create a new `props` object **without** component-specific `props`. \ No newline at end of file diff --git a/_posts/2016-08-17-function-as-children.markdown b/_posts/2016-08-17-function-as-children.markdown index 317306a..c842205 100644 --- a/_posts/2016-08-17-function-as-children.markdown +++ b/_posts/2016-08-17-function-as-children.markdown @@ -4,14 +4,14 @@ title: "Function as children" date: 2016-08-17 17:27:00 --- -Using a function as `children` isn't inherantly useful. +Using a function as `children` isn't inherently useful. {% highlight ts %}
{() => { return "hello world!"}()}
{% endhighlight %} -However, it can be used in component authoring for some serious power. This technique is often referred to as `render callbacks` and powers libraries like [ReactMotion](https://github.com/chenglou/react-motion). +However, it can be used in component authoring for some serious power. This technique is commonly referred to as `render callbacks`. -This is a powerful technique used by libraries like ReactMotion. When applied, rendering logic can be kept in the owner component, instead of being delegated. +This is a powerful technique used by libraries like [ReactMotion](https://github.com/chenglou/react-motion). When applied, rendering logic can be kept in the owner component, instead of being delegated. See [Render callbacks](#Render callback), for more details. \ No newline at end of file diff --git a/_posts/2016-08-17-jsx-spread-attributes.markdown b/_posts/2016-08-17-jsx-spread-attributes.markdown index a81eeb9..beaf49a 100644 --- a/_posts/2016-08-17-jsx-spread-attributes.markdown +++ b/_posts/2016-08-17-jsx-spread-attributes.markdown @@ -15,22 +15,30 @@ These two examples are equivalent.
{% endhighlight %} -There are a few cases this feature really shines. I use it all the time for my [stateless function components](#Stateless function). I get to apply `props` my component is concerned with, while keeping the component open other use cases. - -Look at this component that applies a className and fowards the remaining props. +Use this to forward `props` to underlying components. {% highlight ts %} const FancyDiv = props =>
{% endhighlight %} -I can give any DOM properties I want to `FancyDiv` and they'll get forwarded to the underlying div. +Now, I can expect `FancyDiv` to add the attributes it's concerned with as well as those it's not. {% highlight ts %} -
So Fancy
+So Fancy + +// output:
So Fancy
+{% endhighlight %} + +Keep in mind that order matters. If `props.className` is defined, it'll clobber the `className` defined by `FancyDiv` + +{% highlight ts %} + + +// output:
{% endhighlight %} -Order matters here. If `props.className` is defined, it'll clobber the `className` definition (in the example above). If we want our component's `className` to win, it has to go after `{...props}`. +We can make `FancyDiv`s className always "win" by placing it after the spread props `({...props})`. {% highlight ts %} // my `className` clobbers your `className` @@ -38,7 +46,7 @@ const FancyDiv = props =>
{% endhighlight %} -In most cases, you're just gonna have to trust people. Make your component durable by gracefully handling the `props` your component cares about. +You should handle these types of props gracefully. In this case, I'll merge the author's `props.className` with the `className` needed to style my component. {% highlight ts %} const FancyDiv = ({ className, ...props }) => diff --git a/_posts/2016-08-17-render-callback.markdown b/_posts/2016-08-17-render-callback.markdown index 17ed768..734a633 100644 --- a/_posts/2016-08-17-render-callback.markdown +++ b/_posts/2016-08-17-render-callback.markdown @@ -4,7 +4,7 @@ title: "Render callback" date: 2016-08-17 17:27:00 --- -This a component that uses a Render callback. It does so a way that's not useful but it's good for illustration. +Here's a component that uses a Render callback. It's not useful, but it's an easy illustration to start with. {% highlight ts %} const Width = ({ children }) => children(500) @@ -20,13 +20,13 @@ To use this component, we give it a [function as `children`](#Function as childr {% endhighlight %} -We get output that looks like this. +We get this output. {% highlight ts %}
window is 500
{% endhighlight %} -We can use this `width` value to make rendering decisions. +With this setup, we can use this `width` to make rendering decisions. {% highlight ts %} @@ -52,7 +52,7 @@ const MinWidth = ({ width: minWidth, children }) => {% endhighlight %} -Obviously a static `Width` component isn't valuable but one that watches the browser window is. Here's a sample implementation. +Obviously a static `Width` component isn't useful but one that watches the browser window is. Here's a sample implementation. {% highlight ts %} class WindowWidth extends React.Component { @@ -78,4 +78,4 @@ class WindowWidth extends React.Component { } {% endhighlight %} -Alternatively, many developers favor [Higher Order Components](#Higher-order component) for this type of functionality. \ No newline at end of file +Many developers favor [Higher Order Components](#Higher-order component) for this type of functionality. It's a matter of preference. \ No newline at end of file diff --git a/_posts/2016-08-17-stateless-function.markdown b/_posts/2016-08-17-stateless-function.markdown index c8a5498..852707b 100644 --- a/_posts/2016-08-17-stateless-function.markdown +++ b/_posts/2016-08-17-stateless-function.markdown @@ -33,7 +33,7 @@ const Greeting = (props, context) => { } {% endhighlight %} -You could get the same affect with other functions. +But you you could get the same result by using another other functions. {% highlight ts %} const getStyle = context => ({ @@ -45,7 +45,7 @@ const Greeting = (props, context) =>
{props.name}
{% endhighlight %} -They can have `defaultProps`, `propTypes` and `contextTypes`. +They can have defined `defaultProps`, `propTypes` and `contextTypes`. {% highlight ts %} Greeting.propTypes = { diff --git a/_posts/2016-08-18-children-pass-through.markdown b/_posts/2016-08-18-children-pass-through.markdown index c5b91ea..b77fd24 100644 --- a/_posts/2016-08-18-children-pass-through.markdown +++ b/_posts/2016-08-18-children-pass-through.markdown @@ -4,7 +4,7 @@ title: "Children pass-through" date: 2016-08-18 10:03:00 --- -There are times you might create a component designed to apply `context` and render it's `children`. +You might create a component designed to apply `context` and render its `children`. {% highlight ts %} class SomeContextProvider extends React.Component { @@ -18,7 +18,7 @@ class SomeContextProvider extends React.Component { } {% endhighlight %} -You're faced with a decision. Wrap `children` in an extranious `
` or return `children` directly. The first options gives you extra markup (which can break some stylesheets). The second will result in unhelpful errors. +You're faced with a decision. Wrap `children` in an extraneous `
` or return `children` directly. The first options gives you extra markup (which can break some stylesheets). The second will result in unhelpful errors. {% highlight ts %} // option 1: extra div @@ -28,7 +28,7 @@ return
{children}
return children {% endhighlight %} -It's best to treat `children` as an opaque data type. React provides `React.Children` for dealing with `children` approprately and opting back into helpful errors. +It's best to treat `children` as an opaque data type. React provides `React.Children` for dealing with `children` appropriately and opting back into helpful errors. {% highlight ts %} return React.Children.only(this.props.children) diff --git a/_posts/2016-08-18-proxy-component.markdown b/_posts/2016-08-18-proxy-component.markdown index ce5fe9e..713de7a 100644 --- a/_posts/2016-08-18-proxy-component.markdown +++ b/_posts/2016-08-18-proxy-component.markdown @@ -6,7 +6,7 @@ date: 2016-08-18 10:03:00 *(I'm not sure if this name makes sense)* -Buttons are everywhere in webapps. And every one of them must have the `type` attribute set to "button". +Buttons are everywhere in web apps. And every one of them must have the `type` attribute set to "button". {% highlight ts %} +// +``` + +## Style component + +This is a [Proxy component](#Proxy component) applied to the practices of style. + +Say we have a button. It uses classes to be styled as a "primary" button. + +``` +' +``` + +Using these components, all of these result in the same output. +``` + + + -// -{% endhighlight %} \ No newline at end of file diff --git a/_posts/2016-08-18-style-component.markdown b/_posts/2016-08-18-style-component.markdown deleted file mode 100644 index f64c302..0000000 --- a/_posts/2016-08-18-style-component.markdown +++ /dev/null @@ -1,49 +0,0 @@ ---- -layout: post -title: "Style component" -date: 2016-08-18 10:03:00 ---- - -This is a [Proxy component](#Proxy component) applied to the practices of style. - -Say we have a button. It uses classes to be styled as a "primary" button. - -{% highlight ts %} -' -{% endhighlight %} - -Using these components, all of these result in the same output. -{% highlight ts %} - - -