TypeScript React Sample

app.tsx

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

import Person from "./Person";

function flashUser(fname: string, lname: string, isOnline: boolean) {
  alert(`${fname} ${lname} ${isOnline ? "теперь онлайн" : "теперь офлайн"}`);
}

ReactDOM.render(
  <PersonComponent
    firstName="Леонид"
    lastName="Якубович"
    gender="male"
    onToggleOnline={flashUser} />
, document.getElementById("root"));

Person.css

.root {
  position: relative;
}

.isActive {
  background: green;
}

.gender_male {
  border: 1px solid #00f;
}

.gender_female {
  border: 1px solid #0f0;
}

Person.css.d.ts

export const root: string;
export const isActive: string;
export const gender_male: string;
export const gender_female: string;

Person.tsx

import * as cx from "classnames";
import * as React from "react";
import * as styles from "./Person.css";

export interface PersonProps {
  firstName: string;
  lastName: string;
  gender: "male" | "female";
  onToggleOnline: (fname: string, lname: string, isOnline: boolean) => void;
  age?: number;
  email?: string;
  defaultMessage?: string;
}

export interface PersonState {
  isOnline: boolean;
  statusMessage: string;
}

class PersonComponent extends React.Component<PersonProps, PersonState> {
  public static defaultProps: Partial<PersonProps> = {
    email: "[email protected]",
  };

  constructor(props: PersonProps) {
    super(props);
    this.state = {
      isOnline: false,
      statusMessage: props.defaultMessage || "Hello, World!",
    };
  }

  public render() {
    const { age, email, firstName, gender, lastName } = this.props;
    const { isOnline, statusMessage } = this.state;

    const classSet = cx(styles.root, {
      [styles.isActive]: isOnline,
      [styles.gender_male]: gender === "male",
      [styles.gender_female]: gender === "female",
    });

    return (
      <div className={classSet}>
        <h3>{firstName} {lastName} ({email})</h3>
        {age
          ? (<div>{age}</div>)
          : null}
        <div>
          <input
            value={statusMessage}
            onChange={this.handleStatusChange} />
        </div>
        <div>
          <button onClick={this.handleButtonClick}>
            {isOnline ? "go offline" : "go online"}
          </button>
        </div>
      </div>
    );
  }

  private handleButtonClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
    const { onToggleOnline, firstName, lastName } =  this.props;
    this.setState({
      isOnline: !this.state.isOnline,
    }, () => {
      alert("🙈🙉🙊");
      onToggleOnline(firstName, lastName, this.state.isOnline);
    });
  }

  private handleStatusChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = event.target;
    this.setState({
      statusMessage: value,
    });
  }
}

export default PersonComponent;

webpack.config.js

const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: {
    index: "./src/app.tsx"
  },
  output: {
    path: "./lib",
    filename: "[name].js"
  },
  resolve: {
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"]
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "typings-for-css-modules-loader",
              options: {
                localIdentName: "[hash:10]",
                exclude: ["node_modules"],
                modules: true,
                namedExport: true,
              },
            },
            {
              loader: "postcss-loader",
            },
          ]
        })
      },
      {
        test: /\.(ts|tsx)$/,
        loader: "ts-loader",
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /(node_modules)/
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify(
        process.env.NODE_ENV || "production"
      )
    }),
    new ExtractTextPlugin({
      filename: "[name].css"
    }),
    new webpack.EnvironmentPlugin(["NODE_ENV"])
  ]
};