Table of contents

  1. 1. Function component
  2. 2. Function component with props
  3. 3. Function component with props and HTML props
  4. 4. Function component with props and multiple HTML props
  5. 5. Function component with props and inline-style
  6. 6. Function component with props and style sheet
  7. 7. Function component with props, style sheet and state
  8. 8. Function component using HOC (withStyles)
  9. 9. Function component using Hook (useStyles)
  10. 10. Class component without JSX
  11. 11. Class component with JSX
  12. 12. Class component with props
  13. 13. Class component with props and state
  14. 14. Template: Function Component
  15. 15. Conditionally render React components
  16. 16. Component Children (Containment)

React and TypeScript are a great team because TypeScript supports the JSX syntax. This tutorial will show you code examples on how to type your React web application, so that you can benefit from strong typing in your UI components.

Function component

Typings for a stateless functional React component in TypeScript:

PostPreview.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react';

const PostPreview: React.FC = (): JSX.Element => {
  return (
    <div>
      <h2>Title</h2>
      <p>Description</p>
      <span>Author</span>
    </div>
  );
};

export default PostPreview;

The React component from above can be used as follows:

main.tsx
1
<PostPreview />

Function component with props

Typings for a functional React component in TypeScript that received props:

PostPreview.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';

interface Props {
  author: string;
  description: string;
  title: string;
}

const PostPreview: React.FC<Props> = (props: Props): JSX.Element => {
  const {author, description, title} = props;

  return (
    <div>
      <h2>{title}</h2>
      <p>{description}</p>
      <span>{author}</span>
    </div>
  );
};

export default PostPreview;

The shown React component can receive properties (props) in three different ways:

main.tsx
1
2
3
4
5
<PostPreview
  author={'Author'}
  description='Description'
  title="Title"
/>

Function component with props and HTML props

PostPreview.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';

interface Props extends React.HTMLProps<HTMLDivElement> {
  author: string;
  description: string;
  title: string;
}

const PostPreview: React.FC<Props> = (props: Props): JSX.Element => {
  const {author, title, description} = props;

  return (
    <div style={props.style}>
      <h2>{title}</h2>
      <p>{description}</p>
      <span>{author}</span>
    </div>
  );
};

export default PostPreview;
PostPreview.tsx
1
2
3
4
5
6
<PostPreview
  style={{backgroundColor: 'fuchsia'}}
  author={'Author'}
  description={'Description'}
  title={'Title'}
/>

Function component with props and multiple HTML props

Here is a code recipe to style different HTML tags inside of your React component by providing just one set of styles from the calling component:

PostPreview.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React from 'react';

interface Props {
  author: string;
  description: string;
  title: string;
  h2Props?: React.HTMLProps<HTMLHeadingElement>;
  pProps?: React.HTMLProps<HTMLParagraphElement>;
}

const PostPreview: React.FC<Props> = (props: Props): JSX.Element => {
  const {author, title, description} = props;

  return (
    <div>
      <h2 {...props.h2Props}>{title}</h2>
      <p {...props.pProps}>{description}</p>
      <span>{author}</span>
    </div>
  );
};

export default PostPreview;
main.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<PostPreview

  // Use red font color for the heading
  h2Props={{
    style: {
      color: 'red'
    }
  }}

  // Use blue font color for the paragraph
  pProps={{
    style: {
      color: 'blue'
    }
  }}

  // Render the following content
  author={'Author'}
  description={'Description'}
  title={'Title'}

/>

Function component with props and inline-style

PostPreview.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React, {CSSProperties} from 'react';

interface Props {
  author: string;
  description: string;
  title: string;
}

const PostPreview: React.FC<Props> = (props: Props): JSX.Element => {
  const {author, title, description} = props;

  const style: CSSProperties = {
    backgroundColor: 'lightgreen'
  };

  return (
    <div style={style}>
      <h2>{title}</h2>
      <p>{description}</p>
      <span>{author}</span>
    </div>
  );
};

export default PostPreview;
main.tsx
1
<PostPreview author={'Author'} description={'Description'} title={'Title'} />

Function component with props and style sheet

In order to import Cascading Style Sheets (CSS) in a React Component, you will have to update your webpack configuration with the following loaders:

PostPreview.css
1
2
3
4
5
6
7
.PostPreview {
  background-color: darkred;
}

.PostPreviewText {
  color: white;
}
PostPreview.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React from 'react';

import './PostPreview.css';

interface Props {
  author: string;
  description: string;
  title: string;
}

const PostPreview: React.FC<Props> = (props: Props): JSX.Element => {
  const {author, title, description} = props;

  return (
    <div className={'PostPreview PostPreviewText'}>
      <h2>{title}</h2>
      <p>{description}</p>
      <span>{author}</span>
    </div>
  );
};

export default PostPreview;
main.tsx
1
<PostPreview author={'Author'} description={'Description'} title={'Title'} />

Function component with props, style sheet and state

PostPreview.css
1
2
3
4
5
6
7
.PostPreview {
  background-color: darkred;
}

.PostPreviewText {
  color: white;
}
PostPreview.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import React, {useState} from 'react';

import './PostPreview.css';

interface Props {
  author: string;
  description: string;
  title: string;
}

const PostPreview: React.FC<Props> = (props: Props): JSX.Element => {
  const {author, title, description} = props;

  const [clicked, setClicked] = useState<boolean>(false);

  const clickHandler = (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    event.preventDefault();
    setClicked(!clicked);
  };

  const className = 'PostPreview PostPreviewText';

  return (
    <div
      className={clicked ? className : null}
      onClick={clickHandler}
    >
      <h2>{title}</h2>
      <p>{description}</p>
      <span>{author}</span>
    </div>
  );
};

export default PostPreview;

Function component using HOC (withStyles)

react-material-ui-hoc.tsxview raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React from 'react';
import {CircularProgress, createStyles, Theme, withStyles, WithStyles} from '@material-ui/core';

const styles = (theme: Theme) =>
  createStyles({
    ProgressIndicator: {
      margin: theme.spacing(2),
    },
  });

interface Props extends WithStyles<typeof styles> {}

const ProgressIndicator: React.FC<Props> = (props: Props): JSX.Element => {
  const {classes} = props;
  return (
    <div
      style={{
        alignItems: 'center',
        display: 'flex',
        justifyContent: 'center',
      }}>
      <CircularProgress className={classes.ProgressIndicator} />
    </div>
  );
};

export default withStyles(styles)(ProgressIndicator);

Function component using Hook (useStyles)

react-material-ui-hook.tsxview raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React from 'react';
import {CircularProgress, makeStyles} from '@material-ui/core';

const useStyles = makeStyles(theme => ({
  ProgressIndicator: () => ({
    margin: theme.spacing(2),
  }),
}));

const ProgressIndicator: React.FC = (): JSX.Element => {
  const classes = useStyles();

  return (
    <div
      style={{
        alignItems: 'center',
        display: 'flex',
        justifyContent: 'center',
      }}>
      <CircularProgress className={classes.ProgressIndicator} />
    </div>
  );
};

export default ProgressIndicator;

Class component without JSX

PostPreview.ts
1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';

class PostPreview extends React.Component {
  render() {
    const h2 = React.createElement('h2', null, 'Title');
    const span = React.createElement('span', null, 'Author');
    const p = React.createElement('p', null, 'Description');
    return React.createElement('div', null, [h2, span, p]);
  }
}

export default PostPreview;

Class component with JSX

JSX is an extension to JavaScript, so that you can write HTML tags inside of JavaScript. In the TypeScript ecosystem, this technology is called TSX. If you want to use JSX syntax in your TypeScript code, you will have to add "jsx": "react" inside of the compilerOptions section of your tsconfig.json file.

PostPreview.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';

class PostPreview extends React.Component {
  render(): JSX.Element {
    return (
      <div>
        <h2>Title</h2>
        <p>Description</p>
        <span>Author</span>
      </div>
    );
  }
}

export default PostPreview;

Class component with props

PostPreview.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React from 'react';

interface Props {
  author: string;
  description: string;
  title: string;
}

class PostPreview extends React.Component<Props> {
  render(): JSX.Element {
    const {author, description, title} = this.props;

    return (
      <div>
        <div>
          <h2>{title}</h2>
          <p>{description}</p>
          <span>{author}</span>
        </div>
      </div>
    );
  }
}

export default PostPreview;

Class component with props and state

PostPreview.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import React from 'react';

interface Props {
  author: string;
  description: string;
  title: string;
}

interface State {
  title: string;
}

class PostPreview extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      title: 'Placeholder'
    };
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => {
        this.setState({
          title: json.title
        });
      });
  }

  render(): JSX.Element {
    const {author, description} = this.props;

    return (
      <div>
        <div>
          <h2>{this.state.title}</h2>
          <p>{description}</p>
          <span>{author}</span>
        </div>
      </div>
    );
  }
}

export default PostPreview;

Template: Function Component

YourComponent.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';

interface YourProps {

}

const YourComponent: React.FC<YourProps> = (props: YourProps): JSX.Element => {
  return (
    <>
      {
        // Your code here...
      }
    </>
  );
};

export default YourComponent;

Conditionally render React components

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const showPerformanceChart = (): JSX.Element => (
  <>
    {candleImport.candles.length ? (
      <PerformanceChart
        backtestResults={backtestResults}
        candleImport={candleImport}
        selectedInterval={selectedInterval}
        zoomTo={zoomTo}
      />
    ) : (
     <p style={{textAlign: 'center'}}>No candles for selected timespan.</p>
    )}
  </>
);

Component Children (Containment)

React components can contain other React components. By using the props.children property, these contained React components can be rendered from their wrapping component:

PostPage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';
import PostPreview from './PostPreview';

const PostPage: React.FC = (): JSX.Element => {
  return (
    <div>
      <PostPreview title={'Breaking News'}>
        <p>This is some text rendered inside.</p>
      </PostPreview>
    </div>
  );
};

export default PostPage;
PostPreview.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react';

interface Props extends React.HTMLProps<HTMLDivElement> {
  title: string;
}

const PostPreview: React.FC<Props> = (props: Props): JSX.Element => {
  const {title} = props;

  return (
    <>
      <h2>{title}</h2>
      ${props.children}
    </>
  );
};

export default PostPreview;