Prepare mods collection

2021-05-03 14:47:07 +02:00
parent 6758c61c00
commit e8ae55611a
16 changed files with 5 additions and 0 deletions
--- a/collections/_posts/react-component-with-dot-notation/2018-04-07-react-component-with-dot-notation.md
+++ b/collections/_posts/react-component-with-dot-notation/2018-04-07-react-component-with-dot-notation.md
@@ -0,0 +1,112 @@
+---
+title: React Component with Dot Notation
+date: 2018-04-07 23:04:00 +07:00
+tags: [javascript, react]
+description: Learn how to define a React component that is accessible through the dot notation. A common component pattern to show a parent-child relation.
+---
+
+**This article is for Demo purpose**
+
+The article was originally on [this repo](https://github.com/risan/risanb.com/blob/master/content/posts/react-component-with-dot-notation/index.md)
+
+This is my answer to someone's question on [StackOverflow](https://stackoverflow.com/questions/49256472/react-how-to-extend-a-component-that-has-child-components-and-keep-them/49258038#answer-49258038). How can we define a React component that is accessible through the dot notation?
+
+Take a look at the following code. We have the `Menu` component and its three children `Menu.Item`:
+
+```jsx
+const App = () => (
+  <Menu>
+    <Menu.Item>Home</Menu.Item>
+    <Menu.Item>Blog</Menu.Item>
+    <Menu.Item>About</Menu.Item>
+  </Menu>
+);
+```
+
+How can we define a component like `Menu`? Where it has some kind of "sub-component" that is accessible through a dot notation.
+
+Well, it's actually a pretty common pattern. And it's not really a sub-component, it's just another component being attached to another one.
+
+Let's use the above `Menu` component for example. We'll put this component to its own dedicated file: `menu.js`. First, let's define these two components separately on this module file:
+
+```jsx
+// menu.js
+import React from 'react';
+
+export const MenuItem = ({ children }) => <li>{children}</li>;
+
+export default const Menu = ({ children }) => <ul>{children}</ul>;
+```
+
+It's just a simple functional component. The `Menu` is the parent with `ul` tag. And the `MenuItem` will act as its children. Now we can use these two components like so:
+
+```jsx
+import React from "react";
+import { render } from "react-dom";
+import Menu, { MenuItem } from "./menu";
+
+const App = () => (
+  <Menu>
+    <MenuItem>Home</MenuItem>
+    <MenuItem>Blog</MenuItem>
+    <MenuItem>About</MenuItem>
+  </Menu>
+);
+
+render(<App />, document.getElementById("root"));
+```
+
+Where's the dot notation? To make our `MenuItem` component accessible through the dot nation, we can simply attach it to the `Menu` component as a static property. To do so, we can no longer use the functional component for `Menu` and switch to the class component instead:
+
+```jsx
+// menu.js
+import React, { Component } from 'react';
+
+export default const MenuItem = ({ children }) => <li>{children}</li>;
+
+export default class Menu extends Component {
+  static Item = MenuItem;
+
+  render() {
+    return (
+      <ul>{this.props.children}</ul>
+    );
+  }
+}
+```
+
+Now we can use the dot notation to declare the `MenuItem` component:
+
+```jsx
+import React from "react";
+import { render } from "react-dom";
+import Menu from "./menu";
+
+const App = () => (
+  <Menu>
+    <Menu.Item>Home</Menu.Item>
+    <Menu.Item>Blog</Menu.Item>
+    <Menu.Item>About</Menu.Item>
+  </Menu>
+);
+
+render(<App />, document.getElementById("root"));
+```
+
+You can also put the `MenuItem` component definition directly within the `Menu` class. But this way you can no longer import `MenuItem` individually.
+
+```jsx
+import React, { Component } from "react";
+
+export default class Menu extends Component {
+  static Item = ({ children }) => <li>{children}</li>;
+
+  render() {
+    return <ul>{this.props.children}</ul>;
+  }
+}
+```
+
+**This article is for Demo purpose**
+
+The article was originally on [this repo](https://github.com/risan/risanb.com/blob/master/content/posts/react-component-with-dot-notation/index.md)