Typescript

Creating a New React App with TypeScript

npx create-react-app my-app --template typescript

Adding Typescript to an existing project

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Next, rename any file to be a TypeScript file (e.g. src/index.js to src/index.tsx)

VS Code TypeScript warnings

If you see TypeScript warnings in VS Code, try setting this…

References

• https://create-react-app.dev/docs/adding-typescript/
• https://www.typescriptlang.org/docs/handbook/react.html

Basic Component

When defining the class constructor, be sure to include the call to super(props).

Blog: ‘React.createClass’ vs ‘extends React.Component’: https://ultimatecourses.com/blog/react-create-class-versus-component

React.createClass

import * as React from "react";

const ComponentName= React.createClass({
  render() {
    return (
      <h1>Some Content</h1>
    );
  }
});

export default ComponentName;

React.Component

import * as React from "react";

class ComponentName extends React.Component {
  render() {
    return (
      <h1>Some Content</h1>
    );
  }
}

export default ComponentName;

import * as React from "react";

class Bookmark extends React.Component {
  render() {
    const url = this.props.url;

    // Conditional logic that builds the <a /> tag if a url has been specified
    let linkElem;

    if (typeof url === "string" && url.length) {
      const urlDisplayText =
        typeof this.props.urlDisplayText === "string" &&
        this.props.urlDisplayText.length
          ? this.props.urlDisplayText
          : url;

      linkElem = (
        <a href={url} target="_blank">
          {urlDisplayText}
        </a>
      );
    }

    return (
      <div className="bookmark">
        <h1>
          Bookmark: {this.props.bookmarkTitle || "No title specified"}
        </h1>
        {linkElem}
      </div>
    );
  }
}

export default Bookmark;

import * as React from "react";

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

Adding Properties

import * as React from "react";
import { Component } from "react";
import PropTypes from "prop-types";

class Controls extends Component {

  render() {
    const { resetLabel, incrementLabel, decrementLabel, increment, decrement, resetCount } = this.props;

    return (
      <div className="controls">
        <div onClick={() => {increment();}}>
          <span>{incrementLabel}</span>
        </div>
        <div onClick={() => {resetCount(0);}}>
          <span>{resetLabel}</span>
        </div>
        <div onClick={() => {decrement();}}>
          <span>{decrementLabel}</span>
        </div>
      </div>
    );
  }
}

Controls.propTypes = {
  increment: PropTypes.func,
  decrement: PropTypes.func,
  resetCount: PropTypes.func,
  resetLabel: PropTypes.string,
  incrementLabel: PropTypes.string,
  decrementLabel: PropTypes.string,
};

Controls.defaultProps = {
  resetLabel: "RESET",
  incrementLabel: "+",
  decrementLabel: "-"
};

export default Controls;