From c42bec9331b870eb9129828a06e50b0288b0d965 Mon Sep 17 00:00:00 2001 From: Zack Siri Date: Mon, 14 Aug 2017 11:48:59 +0700 Subject: [PATCH 1/6] Added modal-box post --- ...17-08-14-rendering-modal-box-in-the-layout | 75 +++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 _posts/2017-08-14-rendering-modal-box-in-the-layout diff --git a/_posts/2017-08-14-rendering-modal-box-in-the-layout b/_posts/2017-08-14-rendering-modal-box-in-the-layout new file mode 100644 index 0000000..2dd3183 --- /dev/null +++ b/_posts/2017-08-14-rendering-modal-box-in-the-layout @@ -0,0 +1,75 @@ +--- +layout: post +title: "Rendering Modal Box in the Layout" +date: 2017-08-14 12:00 +excerpt_separator: +author: Zack Siri +published: true +categories: react, es6, component, singleton, mobx +--- + +When building react applications we generally need to use modal boxes in our application, however it's not always clear how we render the modal box. Should we render it in the page? or render it once in our layout and re-use it? This is a companion post for a [video episode on youtube](https://www.youtube.com/watch?v=j5Kjtme9BNw&index=35&list=PLjQo0sojbbxU6Yl9l-38gOyeQYjqXefq7) + + +When building react applications we generally need to use modal boxes in our application, however it's not always clear how we render the modal box. Should we render it in the page? or render it once in our layout and re-use it? This is a companion post for a [video episode on youtube](https://www.youtube.com/watch?v=j5Kjtme9BNw&index=35&list=PLjQo0sojbbxU6Yl9l-38gOyeQYjqXefq7) + +Modal boxes are what I consider 'singletons' which means only 1 of it can be rendered at any time. There should not be many instances of it on the page, however if we render it locally in our component we could have mulitple modal boxes overlapping each other if they're not well managed. We eliminate this problem by rendering only 1 instance of the modal box and sharing it across multiple pages of our application. + +We start off by defining an observable like so. + +``` js +// in settings.js +import { observable } from 'mobx'; + +const layout = observable({ + modal: null, +}); + +export default { layout }; +``` + +We can then import the settings file and use it in our applicatin via the provider. + +``` js +// app index.js + +//... + +import settings from './settings'; + +render( + + {/* render app */} + +); +``` + +Then in our shared layout we just use `@inject` to get the settings in our layout component like so. + +``` js +@inject('settings') @observer +class Application extends React.PureComponent { + // ... + setModal = (node) => { + const { settings } = this.props; + settings.layout.modal = node; + } + + render() { + return ( + // ... + + ); + } +} +``` + +Once we render the `Modal` component we use the `ref` callback to set the modal node to the settings state we injected into the component. + +Now whenever we need to use the modal all we have to do is `@inject('settings')` in the component and we will have access to the modal node via the props. + +We can then call `modal.open()` or `modal.setContent()` whenever we need. + +This pattern is a much cleaner way to render components that need to be shared. We're using mobx's observable to set the reference to the node and then we can access it across components very easily. + +This is just one of the many episodes we have in the React Foundation series, have a look at our [playlist here on youtube](https://www.youtube.com/watch?v=j5Kjtme9BNw&index=35&list=PLjQo0sojbbxU6Yl9l-38gOyeQYjqXefq7) \ No newline at end of file From 105da41ec60f19955b2ee0e8b4fdaa41376f4a13 Mon Sep 17 00:00:00 2001 From: Zack Siri Date: Mon, 14 Aug 2017 11:54:01 +0700 Subject: [PATCH 2/6] improve usage code a bit --- .../2017-08-14-rendering-modal-box-in-the-layout | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/_posts/2017-08-14-rendering-modal-box-in-the-layout b/_posts/2017-08-14-rendering-modal-box-in-the-layout index 2dd3183..a607fa1 100644 --- a/_posts/2017-08-14-rendering-modal-box-in-the-layout +++ b/_posts/2017-08-14-rendering-modal-box-in-the-layout @@ -13,7 +13,7 @@ When building react applications we generally need to use modal boxes in our app When building react applications we generally need to use modal boxes in our application, however it's not always clear how we render the modal box. Should we render it in the page? or render it once in our layout and re-use it? This is a companion post for a [video episode on youtube](https://www.youtube.com/watch?v=j5Kjtme9BNw&index=35&list=PLjQo0sojbbxU6Yl9l-38gOyeQYjqXefq7) -Modal boxes are what I consider 'singletons' which means only 1 of it can be rendered at any time. There should not be many instances of it on the page, however if we render it locally in our component we could have mulitple modal boxes overlapping each other if they're not well managed. We eliminate this problem by rendering only 1 instance of the modal box and sharing it across multiple pages of our application. +Modal boxes are what I consider 'singletons' which means only 1 instance should be rendered at any time. There should not be many instances of it on the page, however if we render it locally in our component we could have mulitple modal boxes overlapping each other if they're not well managed. We eliminate this problem by rendering only 1 instance of the modal box and sharing it across multiple pages of our application. We start off by defining an observable like so. @@ -28,7 +28,7 @@ const layout = observable({ export default { layout }; ``` -We can then import the settings file and use it in our applicatin via the provider. +We can then import the settings file and use it in our application via the provider. ``` js // app index.js @@ -44,7 +44,7 @@ render( ); ``` -Then in our shared layout we just use `@inject` to get the settings in our layout component like so. +Then in our shared layout or main `Application` component we just use `@inject` to make the settings available in our layout component like so. ``` js @inject('settings') @observer @@ -68,7 +68,15 @@ Once we render the `Modal` component we use the `ref` callback to set the modal Now whenever we need to use the modal all we have to do is `@inject('settings')` in the component and we will have access to the modal node via the props. -We can then call `modal.open()` or `modal.setContent()` whenever we need. +Whenever we need to access the modal we can simply de-structure the `props` like so. + +```js + someFunction = (args) => { + const { modal } = this.props.settings.layout; + modal.setContent(); + modal.open(); + } +``` This pattern is a much cleaner way to render components that need to be shared. We're using mobx's observable to set the reference to the node and then we can access it across components very easily. From db3fe45233339c8813d7dab08828b02ed1f91d12 Mon Sep 17 00:00:00 2001 From: Zack Siri Date: Mon, 14 Aug 2017 11:55:04 +0700 Subject: [PATCH 3/6] added .md extension --- ...17-08-14-rendering-modal-box-in-the-layout | 83 ------------------- 1 file changed, 83 deletions(-) delete mode 100644 _posts/2017-08-14-rendering-modal-box-in-the-layout diff --git a/_posts/2017-08-14-rendering-modal-box-in-the-layout b/_posts/2017-08-14-rendering-modal-box-in-the-layout deleted file mode 100644 index a607fa1..0000000 --- a/_posts/2017-08-14-rendering-modal-box-in-the-layout +++ /dev/null @@ -1,83 +0,0 @@ ---- -layout: post -title: "Rendering Modal Box in the Layout" -date: 2017-08-14 12:00 -excerpt_separator: -author: Zack Siri -published: true -categories: react, es6, component, singleton, mobx ---- - -When building react applications we generally need to use modal boxes in our application, however it's not always clear how we render the modal box. Should we render it in the page? or render it once in our layout and re-use it? This is a companion post for a [video episode on youtube](https://www.youtube.com/watch?v=j5Kjtme9BNw&index=35&list=PLjQo0sojbbxU6Yl9l-38gOyeQYjqXefq7) - - -When building react applications we generally need to use modal boxes in our application, however it's not always clear how we render the modal box. Should we render it in the page? or render it once in our layout and re-use it? This is a companion post for a [video episode on youtube](https://www.youtube.com/watch?v=j5Kjtme9BNw&index=35&list=PLjQo0sojbbxU6Yl9l-38gOyeQYjqXefq7) - -Modal boxes are what I consider 'singletons' which means only 1 instance should be rendered at any time. There should not be many instances of it on the page, however if we render it locally in our component we could have mulitple modal boxes overlapping each other if they're not well managed. We eliminate this problem by rendering only 1 instance of the modal box and sharing it across multiple pages of our application. - -We start off by defining an observable like so. - -``` js -// in settings.js -import { observable } from 'mobx'; - -const layout = observable({ - modal: null, -}); - -export default { layout }; -``` - -We can then import the settings file and use it in our application via the provider. - -``` js -// app index.js - -//... - -import settings from './settings'; - -render( - - {/* render app */} - -); -``` - -Then in our shared layout or main `Application` component we just use `@inject` to make the settings available in our layout component like so. - -``` js -@inject('settings') @observer -class Application extends React.PureComponent { - // ... - setModal = (node) => { - const { settings } = this.props; - settings.layout.modal = node; - } - - render() { - return ( - // ... - - ); - } -} -``` - -Once we render the `Modal` component we use the `ref` callback to set the modal node to the settings state we injected into the component. - -Now whenever we need to use the modal all we have to do is `@inject('settings')` in the component and we will have access to the modal node via the props. - -Whenever we need to access the modal we can simply de-structure the `props` like so. - -```js - someFunction = (args) => { - const { modal } = this.props.settings.layout; - modal.setContent(); - modal.open(); - } -``` - -This pattern is a much cleaner way to render components that need to be shared. We're using mobx's observable to set the reference to the node and then we can access it across components very easily. - -This is just one of the many episodes we have in the React Foundation series, have a look at our [playlist here on youtube](https://www.youtube.com/watch?v=j5Kjtme9BNw&index=35&list=PLjQo0sojbbxU6Yl9l-38gOyeQYjqXefq7) \ No newline at end of file From 52026190baf4412883a125ac4ae422f357e82b4a Mon Sep 17 00:00:00 2001 From: Zack Siri Date: Mon, 14 Aug 2017 11:55:15 +0700 Subject: [PATCH 4/6] added .md extension --- ...08-14-rendering-modal-box-in-the-layout.md | 83 +++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 _posts/2017-08-14-rendering-modal-box-in-the-layout.md diff --git a/_posts/2017-08-14-rendering-modal-box-in-the-layout.md b/_posts/2017-08-14-rendering-modal-box-in-the-layout.md new file mode 100644 index 0000000..a607fa1 --- /dev/null +++ b/_posts/2017-08-14-rendering-modal-box-in-the-layout.md @@ -0,0 +1,83 @@ +--- +layout: post +title: "Rendering Modal Box in the Layout" +date: 2017-08-14 12:00 +excerpt_separator: +author: Zack Siri +published: true +categories: react, es6, component, singleton, mobx +--- + +When building react applications we generally need to use modal boxes in our application, however it's not always clear how we render the modal box. Should we render it in the page? or render it once in our layout and re-use it? This is a companion post for a [video episode on youtube](https://www.youtube.com/watch?v=j5Kjtme9BNw&index=35&list=PLjQo0sojbbxU6Yl9l-38gOyeQYjqXefq7) + + +When building react applications we generally need to use modal boxes in our application, however it's not always clear how we render the modal box. Should we render it in the page? or render it once in our layout and re-use it? This is a companion post for a [video episode on youtube](https://www.youtube.com/watch?v=j5Kjtme9BNw&index=35&list=PLjQo0sojbbxU6Yl9l-38gOyeQYjqXefq7) + +Modal boxes are what I consider 'singletons' which means only 1 instance should be rendered at any time. There should not be many instances of it on the page, however if we render it locally in our component we could have mulitple modal boxes overlapping each other if they're not well managed. We eliminate this problem by rendering only 1 instance of the modal box and sharing it across multiple pages of our application. + +We start off by defining an observable like so. + +``` js +// in settings.js +import { observable } from 'mobx'; + +const layout = observable({ + modal: null, +}); + +export default { layout }; +``` + +We can then import the settings file and use it in our application via the provider. + +``` js +// app index.js + +//... + +import settings from './settings'; + +render( + + {/* render app */} + +); +``` + +Then in our shared layout or main `Application` component we just use `@inject` to make the settings available in our layout component like so. + +``` js +@inject('settings') @observer +class Application extends React.PureComponent { + // ... + setModal = (node) => { + const { settings } = this.props; + settings.layout.modal = node; + } + + render() { + return ( + // ... + + ); + } +} +``` + +Once we render the `Modal` component we use the `ref` callback to set the modal node to the settings state we injected into the component. + +Now whenever we need to use the modal all we have to do is `@inject('settings')` in the component and we will have access to the modal node via the props. + +Whenever we need to access the modal we can simply de-structure the `props` like so. + +```js + someFunction = (args) => { + const { modal } = this.props.settings.layout; + modal.setContent(); + modal.open(); + } +``` + +This pattern is a much cleaner way to render components that need to be shared. We're using mobx's observable to set the reference to the node and then we can access it across components very easily. + +This is just one of the many episodes we have in the React Foundation series, have a look at our [playlist here on youtube](https://www.youtube.com/watch?v=j5Kjtme9BNw&index=35&list=PLjQo0sojbbxU6Yl9l-38gOyeQYjqXefq7) \ No newline at end of file From a9c2841f59f264ae94f2467c513ef03ad398bb7f Mon Sep 17 00:00:00 2001 From: Zack Siri Date: Mon, 14 Aug 2017 11:56:28 +0700 Subject: [PATCH 5/6] changed playlist link --- _posts/2017-08-14-rendering-modal-box-in-the-layout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/2017-08-14-rendering-modal-box-in-the-layout.md b/_posts/2017-08-14-rendering-modal-box-in-the-layout.md index a607fa1..c526b70 100644 --- a/_posts/2017-08-14-rendering-modal-box-in-the-layout.md +++ b/_posts/2017-08-14-rendering-modal-box-in-the-layout.md @@ -80,4 +80,4 @@ Whenever we need to access the modal we can simply de-structure the `props` like This pattern is a much cleaner way to render components that need to be shared. We're using mobx's observable to set the reference to the node and then we can access it across components very easily. -This is just one of the many episodes we have in the React Foundation series, have a look at our [playlist here on youtube](https://www.youtube.com/watch?v=j5Kjtme9BNw&index=35&list=PLjQo0sojbbxU6Yl9l-38gOyeQYjqXefq7) \ No newline at end of file +This is just one of the many episodes we have in the React Foundation series, have a look at our [playlist here on youtube](https://www.youtube.com/playlist?list=PLjQo0sojbbxU6Yl9l-38gOyeQYjqXefq7) \ No newline at end of file From 1642c8fedbde17536db63343191f121e929649e7 Mon Sep 17 00:00:00 2001 From: Zack Siri Date: Mon, 14 Aug 2017 12:03:37 +0700 Subject: [PATCH 6/6] Added link to Codemy.net instead --- _posts/2017-08-14-rendering-modal-box-in-the-layout.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_posts/2017-08-14-rendering-modal-box-in-the-layout.md b/_posts/2017-08-14-rendering-modal-box-in-the-layout.md index c526b70..34fe560 100644 --- a/_posts/2017-08-14-rendering-modal-box-in-the-layout.md +++ b/_posts/2017-08-14-rendering-modal-box-in-the-layout.md @@ -8,10 +8,10 @@ published: true categories: react, es6, component, singleton, mobx --- -When building react applications we generally need to use modal boxes in our application, however it's not always clear how we render the modal box. Should we render it in the page? or render it once in our layout and re-use it? This is a companion post for a [video episode on youtube](https://www.youtube.com/watch?v=j5Kjtme9BNw&index=35&list=PLjQo0sojbbxU6Yl9l-38gOyeQYjqXefq7) +When building react applications we generally need to use modal boxes in our application, however it's not always clear how we render the modal box. Should we render it in the page? or render it once in our layout and re-use it? This is a companion post for a [free video episode](https://www.codemy.net/posts/react-rendering-the-modal-in-the-layout) -When building react applications we generally need to use modal boxes in our application, however it's not always clear how we render the modal box. Should we render it in the page? or render it once in our layout and re-use it? This is a companion post for a [video episode on youtube](https://www.youtube.com/watch?v=j5Kjtme9BNw&index=35&list=PLjQo0sojbbxU6Yl9l-38gOyeQYjqXefq7) +When building react applications we generally need to use modal boxes in our application, however it's not always clear how we render the modal box. Should we render it in the page? or render it once in our layout and re-use it? This is a companion post for a [free video episode](https://www.codemy.net/posts/react-rendering-the-modal-in-the-layout) Modal boxes are what I consider 'singletons' which means only 1 instance should be rendered at any time. There should not be many instances of it on the page, however if we render it locally in our component we could have mulitple modal boxes overlapping each other if they're not well managed. We eliminate this problem by rendering only 1 instance of the modal box and sharing it across multiple pages of our application. @@ -80,4 +80,4 @@ Whenever we need to access the modal we can simply de-structure the `props` like This pattern is a much cleaner way to render components that need to be shared. We're using mobx's observable to set the reference to the node and then we can access it across components very easily. -This is just one of the many episodes we have in the React Foundation series, have a look at our [playlist here on youtube](https://www.youtube.com/playlist?list=PLjQo0sojbbxU6Yl9l-38gOyeQYjqXefq7) \ No newline at end of file +This is just one of the many episodes we have in the [React Foundation](https://www.codemy.net/channels/react-foundation) series. \ No newline at end of file