Added typesafe forward-ref component implementation

Author: piotrwitek

playground/src/components/fc-forward-ref.md

@@ -0,0 +1,11 @@
+Usage:
+```jsx { "filePath": "./fc-forward-ref.usage.tsx" }
+```
+
+Usage Demo:
+```jsx
+const Demo = require('./fc-forward-ref.usage').default;
+<Demo />
+```
+
+[⇦ back to guide](https://github.com/piotrwitek/react-redux-typescript-guide#--fc-counter)

playground/src/components/fc-forward-ref.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export type FancyButtonProps = {
+  className?: string;
+  children?: React.ReactNode;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+// using function DevTools will show "ForwardRef(FancyButton)" instead of just "ForwardRef"
+export const FancyButton = React.forwardRef<
+  HTMLButtonElement,
+  FancyButtonProps
+>(function FancyButton(props, ref) {
+  return (
+    <button ref={ref} className="FancyButton" {...props}>
+      {props.children}
+    </button>
+  );
+});
+

playground/src/components/fc-forward-ref.usage.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+import { FancyButton } from '.';
+
+const ref = React.createRef<HTMLButtonElement>();
+export default () => <FancyButton ref={ref}>Click me!</FancyButton>;

playground/src/routes/Home.tsx

@@ -1,17 +1,20 @@
-import React from 'react'
+import React from 'react';
+
+import ClassCounterWithDefaultPropsUsage from '../components/class-counter-with-default-props.usage';
+import ClassCounterUsage from '../components/class-counter.usage';
 import FCCounterUsage from '../components/fc-counter.usage';
+import FcForwardRefUsage from '../components/fc-forward-ref.usage';
 import FCSpreadAttributesUsage from '../components/fc-spread-attributes.usage';
-import ClassCounterUsage from '../components/class-counter.usage';
-import ClassCounterWithDefaultPropsUsage from '../components/class-counter-with-default-props.usage';
 import UserListUsage from '../components/generic-list.usage';
+import WithConnectedCountUsage from '../hoc/with-connected-count.usage';
 import WithErrorBoundaryUsage from '../hoc/with-error-boundary.usage';
 import WithStateUsage from '../hoc/with-state.usage';
-import WithConnectedCountUsage from '../hoc/with-connected-count.usage';
 
 export function Home() {
   return (
     <section>
       <FCCounterUsage />
+      <FcForwardRefUsage />
       <FCSpreadAttributesUsage />
       <ClassCounterUsage />
       <ClassCounterWithDefaultPropsUsage />