Skip to content

📖Update to use FC and not SFC #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

📖Update to use FC and not SFC #113

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7b63ed9
📖Update to use FC and not SFC
Pau1fitz Dec 7, 2018
9c496f2
Update README.md
Pau1fitz Dec 7, 2018
05808f9
Update README.md
Pau1fitz Dec 7, 2018
2b7a20a
Update README.md
Pau1fitz Dec 12, 2018
6c7e19c
Update README.md
Pau1fitz Dec 12, 2018
4fb66fb
Update README.md
Pau1fitz Dec 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 29 additions & 29 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ 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)
- [Stateful Components - Class](#stateful-components---class) 📝 __UPDATED__
- [Function Components - FC](#function-components---ffc)
- [Class Components ](#class-components) 📝 __UPDATED__
- [Generic Components](#generic-components)
- [Render Props](#render-props) 🌟 __NEW__
- [Higher-Order Components](#higher-order-components) 📝 __UPDATED__
Expand Down Expand Up @@ -104,22 +104,22 @@ npm i -D @types/react @types/react-dom @types/react-redux

# React Types Cheatsheet

#### `React.StatelessComponent<P>` or `React.SFC<P>`
Type representing stateless functional component
#### `React.FunctionComponent<P>` or `React.FC<P>`
Type representing a functional component
```tsx
const MyComponent: React.SFC<MyComponentProps> = ...
const MyComponent: React.FC<MyComponentProps> = ...
```
[⇧ back to top](#table-of-contents)

#### `React.Component<P, S>`
Type representing stateful class component
Type representing a class component
```tsx
class MyComponent extends React.Component<MyComponentProps, State> { ...
```
[⇧ back to top](#table-of-contents)

#### `React.ComponentType<P>`
Type representing union type of (SFC | Component)
Type representing union type of (FC | Component)
```tsx
const withState = <P extends WrappedComponentProps>(
WrappedComponent: React.ComponentType<P>,
Expand Down Expand Up @@ -172,20 +172,20 @@ const handleChange = (ev: React.MouseEvent<HTMLDivElement>) => { ... }

# Component Typing Patterns

## Stateless Components - SFC
## Function Components - FC

#### - stateless counter
#### - counter component

```tsx
import * as React from 'react';

export interface SFCCounterProps {
export interface FCCounterProps {
label: string;
count: number;
onIncrement: () => any;
}

export const SFCCounter: React.SFC<SFCCounterProps> = (props) => {
export const FCCounter: React.FC<FCCounterProps> = (props) => {
const { label, count, onIncrement } = props;

const handleIncrement = () => { onIncrement(); };
Expand All @@ -211,12 +211,12 @@ export const SFCCounter: React.SFC<SFCCounterProps> = (props) => {
```tsx
import * as React from 'react';

export interface SFCSpreadAttributesProps {
export interface FCSpreadAttributesProps {
className?: string;
style?: React.CSSProperties;
}

export const SFCSpreadAttributes: React.SFC<SFCSpreadAttributesProps> = (props) => {
export const FCSpreadAttributes: React.FC<FCSpreadAttributesProps> = (props) => {
const { children, ...restProps } = props;

return (
Expand All @@ -234,22 +234,22 @@ export const SFCSpreadAttributes: React.SFC<SFCSpreadAttributesProps> = (props)

---

## Stateful Components - Class
## Class Components

#### - stateful counter
#### - class counter

```tsx
import * as React from 'react';

export interface StatefulCounterProps {
export interface ClassCounterProps {
label: string;
}

interface State {
readonly count: number;
}

export class StatefulCounter extends React.Component<StatefulCounterProps, State> {
export class ClassCounter extends React.Component<ClassCounterProps, State> {
readonly state: State = {
count: 0,
};
Expand All @@ -276,7 +276,7 @@ export class StatefulCounter extends React.Component<StatefulCounterProps, State

```

[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#statefulcounter)
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#classcounter)

[⇧ back to top](#table-of-contents)

Expand All @@ -285,7 +285,7 @@ export class StatefulCounter extends React.Component<StatefulCounterProps, State
```tsx
import * as React from 'react';

export interface StatefulCounterWithDefaultProps {
export interface ClassCounterWithDefaultProps {
label: string;
initialCount?: number;
}
Expand All @@ -298,8 +298,8 @@ interface State {
readonly count: number;
}

export const StatefulCounterWithDefault: React.ComponentClass<StatefulCounterWithDefaultProps> =
class extends React.Component<StatefulCounterWithDefaultProps & DefaultProps> {
export const ClassCounterWithDefault: React.ComponentClass<ClassCounterWithDefaultProps> =
class extends React.Component<ClassCounterWithDefaultProps & DefaultProps> {
// to make defaultProps strictly typed we need to explicitly declare their type
// @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11640
static defaultProps: DefaultProps = {
Expand All @@ -310,7 +310,7 @@ export const StatefulCounterWithDefault: React.ComponentClass<StatefulCounterWit
count: this.props.initialCount,
};

componentWillReceiveProps({ initialCount }: StatefulCounterWithDefaultProps) {
componentWillReceiveProps({ initialCount }: ClassCounterWithDefaultProps) {
if (initialCount != null && initialCount !== this.props.initialCount) {
this.setState({ count: initialCount });
}
Expand Down Expand Up @@ -338,7 +338,7 @@ export const StatefulCounterWithDefault: React.ComponentClass<StatefulCounterWit

```

[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#statefulcounterwithdefault)
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#classcounterwithdefault)

[⇧ back to top](#table-of-contents)

Expand Down Expand Up @@ -519,13 +519,13 @@ export const withState = <WrappedProps extends InjectedProps>(
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 () => (
<SFCCounterWithState label={'SFCCounterWithState'} />
<FCCounterWithState label={'FCCounterWithState'} />
);

```
Expand Down Expand Up @@ -1450,7 +1450,7 @@ Related `ts-lint` rule: https://palantir.github.io/tslint/rules/interface-over-t
### - how to best initialize class instance or static properties?
> Prefered modern style is to use class Property Initializers
```tsx
class StatefulCounterWithInitialCount extends React.Component<Props, State> {
class ClassCounterWithInitialCount extends React.Component<Props, State> {
// default props using Property Initializers
static defaultProps: DefaultProps = {
className: 'default-class',
Expand All @@ -1470,7 +1470,7 @@ class StatefulCounterWithInitialCount extends React.Component<Props, State> {
### - how to best declare component handler functions?
> Prefered modern style is to use Class Fields with arrow functions
```tsx
class StatefulCounter extends React.Component<Props, State> {
class ClassCounter extends React.Component<Props, State> {
// handlers using Class Fields with arrow functions
handleIncrement = () => {
this.setState({ count: this.state.count + 1 });
Expand Down