From 7b63ed952ad6d8ef01caec3fcac7d0faa4681b13 Mon Sep 17 00:00:00 2001 From: Paul Fitzgerald Date: Fri, 7 Dec 2018 09:54:09 +0000 Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=93=96Update=20to=20use=20FC=20and=20?= =?UTF-8?q?not=20SFC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit DefinitelyTyped/DefinitelyTyped#30364 --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 1a261b9..1e6e5ea 100644 --- a/README.md +++ b/README.md @@ -104,10 +104,10 @@ npm i -D @types/react @types/react-dom @types/react-redux # React Types Cheatsheet -#### `React.StatelessComponent

` or `React.SFC

` -Type representing stateless functional component +#### `React.FunctionComponent

` or `React.FC

` +Type representing a functional component ```tsx -const MyComponent: React.SFC = ... +const MyComponent: React.FC = ... ``` [⇧ back to top](#table-of-contents) From 9c496f2e0f86d031793dd80dc996456f73b9eecb Mon Sep 17 00:00:00 2001 From: Paul Fitzgerald Date: Fri, 7 Dec 2018 09:58:34 +0000 Subject: [PATCH 2/6] Update README.md --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 1e6e5ea..2ea4e81 100644 --- a/README.md +++ b/README.md @@ -119,7 +119,7 @@ class MyComponent extends React.Component { ... [⇧ back to top](#table-of-contents) #### `React.ComponentType

` -Type representing union type of (SFC | Component) +Type representing union type of (FC | Component) ```tsx const withState =

( WrappedComponent: React.ComponentType

, @@ -179,13 +179,13 @@ const handleChange = (ev: React.MouseEvent) => { ... } ```tsx import * as React from 'react'; -export interface SFCCounterProps { +export interface FCCounterProps { label: string; count: number; onIncrement: () => any; } -export const SFCCounter: React.SFC = (props) => { +export const FCCounter: React.FC = (props) => { const { label, count, onIncrement } = props; const handleIncrement = () => { onIncrement(); }; @@ -211,12 +211,12 @@ export const SFCCounter: React.SFC = (props) => { ```tsx import * as React from 'react'; -export interface SFCSpreadAttributesProps { +export interface FCSpreadAttributesProps { className?: string; style?: React.CSSProperties; } -export const SFCSpreadAttributes: React.SFC = (props) => { +export const FCSpreadAttributes: React.FC = (props) => { const { children, ...restProps } = props; return ( From 05808f9c50e0b547190818f243a615df4502cad9 Mon Sep 17 00:00:00 2001 From: Paul Fitzgerald Date: Fri, 7 Dec 2018 10:01:48 +0000 Subject: [PATCH 3/6] Update README.md --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 2ea4e81..126b267 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ This gives you the power to prioritize our work and support the project contribu - [Type Definitions & Complementary Libraries](#type-definitions--complementary-libraries) - [React Types Cheatsheet](#react-types-cheatsheet) 🌟 __NEW__ - [Component Typing Patterns](#component-typing-patterns) - - [Stateless Components - SFC](#stateless-components---sfc) + - [Function Components - FC](#function-components---ffc) - [Stateful Components - Class](#stateful-components---class) 📝 __UPDATED__ - [Generic Components](#generic-components) - [Render Props](#render-props) 🌟 __NEW__ @@ -172,9 +172,9 @@ const handleChange = (ev: React.MouseEvent) => { ... } # Component Typing Patterns -## Stateless Components - SFC +## Function Components - FC -#### - stateless counter +#### - functional counter ```tsx import * as React from 'react'; @@ -519,13 +519,13 @@ export const withState = ( import * as React from 'react'; import { withState } from '../hoc'; -import { SFCCounter } from '../components'; +import { FCCounter } from '../components'; -const SFCCounterWithState = - withState(SFCCounter); +const FCCounterWithState = + withState(FCCounter); export default () => ( - + ); ``` From 2b7a20a41c77f378143eba0209b57450f03ad75e Mon Sep 17 00:00:00 2001 From: Paul Fitzgerald Date: Wed, 12 Dec 2018 15:51:22 +0000 Subject: [PATCH 4/6] Update README.md --- README.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 126b267..6907c15 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ This gives you the power to prioritize our work and support the project contribu - [React Types Cheatsheet](#react-types-cheatsheet) 🌟 __NEW__ - [Component Typing Patterns](#component-typing-patterns) - [Function Components - FC](#function-components---ffc) - - [Stateful Components - Class](#stateful-components---class) 📝 __UPDATED__ + - [Class Components - Class](#class-components---class) 📝 __UPDATED__ - [Generic Components](#generic-components) - [Render Props](#render-props) 🌟 __NEW__ - [Higher-Order Components](#higher-order-components) 📝 __UPDATED__ @@ -112,7 +112,7 @@ const MyComponent: React.FC = ... [⇧ back to top](#table-of-contents) #### `React.Component` -Type representing stateful class component +Type representing a class component ```tsx class MyComponent extends React.Component { ... ``` @@ -174,7 +174,7 @@ const handleChange = (ev: React.MouseEvent) => { ... } ## Function Components - FC -#### - functional counter +#### - counter component ```tsx import * as React from 'react'; @@ -234,14 +234,14 @@ export const FCSpreadAttributes: React.FC = (props) => --- -## Stateful Components - Class +## Class Components - Class -#### - stateful counter +#### - class counter ```tsx import * as React from 'react'; -export interface StatefulCounterProps { +export interface ClassCounterProps { label: string; } @@ -249,7 +249,7 @@ interface State { readonly count: number; } -export class StatefulCounter extends React.Component { +export class ClassCounter extends React.Component { readonly state: State = { count: 0, }; @@ -276,7 +276,7 @@ export class StatefulCounter extends React.Component = - class extends React.Component { +export const ClassCounterWithDefault: React.ComponentClass = + class extends React.Component { // to make defaultProps strictly typed we need to explicitly declare their type // @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11640 static defaultProps: DefaultProps = { @@ -310,7 +310,7 @@ export const StatefulCounterWithDefault: React.ComponentClass Prefered modern style is to use class Property Initializers ```tsx -class StatefulCounterWithInitialCount extends React.Component { +class ClassCounterWithInitialCount extends React.Component { // default props using Property Initializers static defaultProps: DefaultProps = { className: 'default-class', @@ -1470,7 +1470,7 @@ class StatefulCounterWithInitialCount extends React.Component { ### - how to best declare component handler functions? > Prefered modern style is to use Class Fields with arrow functions ```tsx -class StatefulCounter extends React.Component { +class ClassCounter extends React.Component { // handlers using Class Fields with arrow functions handleIncrement = () => { this.setState({ count: this.state.count + 1 }); From 6c7e19c5eb1a173ef22390a151cf0c46ade0bc65 Mon Sep 17 00:00:00 2001 From: Paul Fitzgerald Date: Wed, 12 Dec 2018 15:52:47 +0000 Subject: [PATCH 5/6] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6907c15..9a33def 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ This gives you the power to prioritize our work and support the project contribu - [React Types Cheatsheet](#react-types-cheatsheet) 🌟 __NEW__ - [Component Typing Patterns](#component-typing-patterns) - [Function Components - FC](#function-components---ffc) - - [Class Components - Class](#class-components---class) 📝 __UPDATED__ + - [Class Components ](#class-components---class) 📝 __UPDATED__ - [Generic Components](#generic-components) - [Render Props](#render-props) 🌟 __NEW__ - [Higher-Order Components](#higher-order-components) 📝 __UPDATED__ @@ -234,7 +234,7 @@ export const FCSpreadAttributes: React.FC = (props) => --- -## Class Components - Class +## Class Components #### - class counter From 4fb66fb5819ccaced167bd74ea8a94f511eaef7c Mon Sep 17 00:00:00 2001 From: Paul Fitzgerald Date: Wed, 12 Dec 2018 15:53:24 +0000 Subject: [PATCH 6/6] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9a33def..b373db8 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ This gives you the power to prioritize our work and support the project contribu - [React Types Cheatsheet](#react-types-cheatsheet) 🌟 __NEW__ - [Component Typing Patterns](#component-typing-patterns) - [Function Components - FC](#function-components---ffc) - - [Class Components ](#class-components---class) 📝 __UPDATED__ + - [Class Components ](#class-components) 📝 __UPDATED__ - [Generic Components](#generic-components) - [Render Props](#render-props) 🌟 __NEW__ - [Higher-Order Components](#higher-order-components) 📝 __UPDATED__