# Best way
react-webpack2-typescript-hmr

# Easy way
[create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript)

```
npm install -g create-react-app

create-react-app my-app --scripts-version=react-scripts-ts
cd my-app/
npm start
```

# Hard way

## references
http://blog.tomduncalf.com/posts/setting-up-typescript-and-react/
https://javascriptplayground.com/blog/2017/04/react-typescript/

## steps

### install typescript globally

> npm install -g typescript

### setup new project

```
> mkdir project-name
> cd project-name
> git init
> nano .gitignore

node_modules
dist
npm-debug.log

>npm init -y
```

### init typescript
```
> npm i -D typescript
> tsc --init
```

Edit `tsconfig.json`:

```
{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "moduleResolution": "node",
    "baseUrl": "src",
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "sourceMap": true,
    "outDir": "ts-build",
    "jsx": "preserve"
  },
  "exclude": [
    "node_modules"
  ]
}
```

### add react & react-dom
```
> npm i -S react
> npm i -D @types/react
> npm i -S react-dom
> npm i -D @types/react-dom
```
### setup up Webpack and Babel
```
> npm i -D webpack webpack-notifier
> npm i -D ts-loader
> npm i -D babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0
> nano .babelrc

{
  "presets": ["es2015", "react"]
}

> mkdir config
> nano `config/webpack.config.js`

const webpack = require('webpack')
const path = require('path')

module.exports = {
  // put sourcemaps inline
  devtool: 'eval',

  // entry point of our application, within the `src` directory (which we add to resolve.modules below):
  entry: [
    'index.tsx'
  ],

  // configure the output directory and publicPath for the devServer
  output: {
    filename: 'app.js',
    publicPath: 'dist',
    path: path.resolve('dist')
  },

  // configure the dev server to run
  devServer: {
    port: 3000,
    historyApiFallback: true,
    inline: true,
  },

  // tell Webpack to load TypeScript files
  resolve: {
    // Look for modules in .ts(x) files first, then .js
    extensions: ['.ts', '.tsx', '.js'],

    // add 'src' to the modules, so that when you import files you can do so with 'src' as the relative route
    modules: ['src', 'node_modules'],
  },

  module: {
    loaders: [
      // .ts(x) files should first pass through the Typescript loader, and then through babel
      { test: /\.tsx?$/, loaders: ['babel-loader', 'ts-loader'], include: path.resolve('src') }
    ]
  },
}
```

add scripts to `package.json`
```
 "scripts": {
    "build": "webpack --config config/webpack.config.js",
    "start": "webpack-dev-server"
  }
```


### defining globabls

https://blog.johnnyreilly.com/2016/07/using-webpacks-defineplugin-with-typescript.html