· react

Use React with TypeScript

This article provides code examples on how to type your React web application using TypeScript. It covers different scenarios such as function components, class components, components with props, components with HTML props, and more.

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.

Contents

Function component

Typings for a stateless functional React component in TypeScript:

PostPreview.tsx
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
<PostPreview />

Function component with props

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

PostPreview.tsx
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
<PostPreview
  author={'Author'}
  description='Description'
  title="Title"
/>

Function component with props and HTML props

PostPreview.tsx
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
<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
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
<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
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
<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:

  • The css-loader to interpret import statements with .css extensions
  • The style-loader to process styles from CSS files
PostPreview.css
.PostPreview {
  background-color: darkred;
}
 
.PostPreviewText {
  color: white;
}
PostPreview.tsx
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
<PostPreview author={'Author'} description={'Description'} title={'Title'} />

Function component with props, style sheet and state

PostPreview.css
.PostPreview {
  background-color: darkred;
}
 
.PostPreviewText {
  color: white;
}
PostPreview.tsx
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)

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)

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
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
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
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
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
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

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
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
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;
Back to Blog