Use-TypeScript-to-develop-React-Applications.md

Use TypeScript to develop React Applications

• 1. Why use TypeScript with React
• 2. Bootstrap a TypeScript + React project
• 3. Create stateless React components using TypeScript
• 4. Create stateful React Components using TypeScript
• 5. Publish a React component with TypeScript

1. Why use TypeScript with React

You get excellent developer experience when using TypeScript with React. This is better when compared to many other frameworks that work off of simple template strings because JSX is embedded within TypeScript.

In this lesson we give a demonstration of the some of the powerful refactorings and type checks enabled by using TypeScript with React.

Pros

• Autocomplete
• Type Checking
• Refactoring
  • Rename component name, props
• Understanding Code

2. Bootstrap a TypeScript + React project

Learn how to setup a TypeScript + React project from scratch. Understand the reason behind every line involved in the configuration allowing you to customize it at will in the future.

$ npm install react react-dom
$ npm install --save-dev webpack webpack-dev-server typescript @types/react @types/react-dom ts-loader

{
  "scripts": {
    "build": "webpack ./webpack.config.js",
    "start": "webpack-dev-server ./webpack.config.js --content-base ./public"
  }
}

module.exports = {
  devtool: 'inline-source-map',
  entry: './src/app.tsx',
  output: {
    path: __dirname + './public',
    filename: 'build/app.js',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: 'ts-loader' }
    ]
  }
};

{
  "compilerOptions": {
    "sourceMap": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react"
  },
  "include": [
    "src"
  ],
  "compileOnSave": false
}

3. Create stateless React components using TypeScript

You can create a stateless React component in TypeScript as easily as creating a function.

But if you want to create high quality idiomatic React + TypeScript components we cover some improved patterns in this lesson.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

type AppProps = { message: string };
const App: React.SFC<AppProps> = ({ message }) => <div>{message}</div>;

ReactDOM.render(
  <App message="Hello world again" />,
  document.getElementById('root')
);

4. Create stateful React Components using TypeScript

You can create stateful React Components in TypeScript by extending from the React.Component class. This parent class takes two generic parameters, Props and State.

This lessons shows these generic parameters and React.Component in action.

import * as React from 'react';

type AppProps = {
  message: string;
}
type AppState = {
  count: number;
}

class App extends React.Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    this.increment = this.increment.bind(this);
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div onClick={this.increment}>
        {this.props.message} {this.state.count}
      </div>
    );
  }
}

5. Publish a React component with TypeScript

In this lesson we look at how to create a React Component package using TypeScript.

Creating a React Package is very similar to creating any other TypeScript Node package and we demonstrate that here.