convert to typescript - react-router upgrade to 4

.eslintrc.js

@@ -1,49 +0,0 @@
-module.exports = {
-    "env": {
-        "browser": true,
-        "commonjs": true,
-        "es6": true,
-        "node": true
-    },
-    "extends": "eslint:recommended",
-    "installedESLint": true,
-    "parserOptions": {
-        "ecmaFeatures": {
-            "experimentalObjectRestSpread": true,
-            "jsx": true
-        },
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react"
-    ],
-    "rules": {
-        "indent": [
-            "error",
-            4
-        ],
-        "quotes": [
-            "error",
-            "single"
-        ],
-        "semi": [
-            "error",
-            "always"
-        ],
-
-        "react/display-name": 0, // Prevent missing displayName in a React component definition
-        "react/jsx-no-undef": 2, // Disallow undeclared variables in JSX
-        "react/jsx-sort-props": 0, // Enforce props alphabetical sorting
-        "react/jsx-uses-react": 2, // Prevent React to be incorrectly marked as unused
-        "react/jsx-uses-vars": 2, // Prevent variables used in JSX to be incorrectly marked as unused
-        "react/no-did-mount-set-state": 2, // Prevent usage of setState in componentDidMount
-        "react/no-did-update-set-state": 2, // Prevent usage of setState in componentDidUpdate
-        "react/no-multi-comp": 0, // Prevent multiple component definition per file
-        "react/no-unknown-property": 2, // Prevent usage of unknown DOM property
-        "react/prop-types": 2, // Prevent missing props validation in a React component definition
-        "react/react-in-jsx-scope": 2, // Prevent missing React when using JSX
-        "react/self-closing-comp": 2, // Prevent extra closing tags for components without children
-        "react/wrap-multilines": 2 // Prevent missing parentheses around multilines JSX
-    }
-
-};

.jsbeautifyrc

@@ -1,15 +0,0 @@
-{
-    "indent_size": 4,
-    "beautify.language": {
-        "js": {
-            "type": ["javascript", "json", "jsx"],
-            "filename": [".jshintrc", ".jsbeautify"],
-            "e4x": true
-                // "ext": ["js", "json"]
-                // ^^ to set extensions to be beautified using the javascript beautifier
-        },
-        "css": ["css", "scss"],
-        "html": ["htm", "html"]
-            // ^^ providing just an array sets the VS Code file type
-    }
-}

@types/all/index.d.ts

@@ -0,0 +1 @@
+declare module 'this-is-a-test-module';

README.md

@@ -1,13 +1,17 @@
-# A starter project for React with Webpack 2
+# Starter project for React
+
+- Typescript
+- React
+- React Router 4
+- Webpack 2
+- Yarn
+
+Install yarn
+https://yarnpkg.com/lang/en/docs/install/
 
 ## Commands
 
 - yarn install
 - yarn run dev
 
-http://localhost:3000
-
-npm may be used, but I prefer yarn
-
-`npm install -g yarn`
-
+http://localhost:8080

app/Wrapper.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import Navbar from './components/Navbar/Navbar';
-
-//styling
-import './scss/index.scss';
-
-export default class Wrapper extends React.Component {
-
-    render() {
-        return (
-            <div>
-                <Navbar/>
-                {this.props.children}
-            </div>
-        );
-    }
-}
-
-Wrapper.propTypes = {
-    children: React.PropTypes.node,
-};

app/Wrapper.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+
+import Navbar from './components/Navbar/Navbar';
+import Home from './pages/Home/Home';
+import NotFound from './pages/NotFound/NotFound';
+
+//styling
+import './scss/index.scss';
+
+interface Props {
+    
+}
+
+interface State {
+    
+}
+
+export default class Wrapper extends React.Component<Props, State> {
+
+    render() {
+        return (
+            <BrowserRouter>
+                <div>
+                    <Navbar/>
+                    <Switch>
+                        <Route exact path="/" component={Home}/>
+                        <Route component={NotFound}/>
+                    </Switch>
+                </div>
+            </BrowserRouter>
+        );
+    }
+}

app/app.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Router, Route, IndexRoute, browserHistory } from 'react-router';
-
-import Wrapper from './Wrapper';
-import NotFound from './pages/NotFound/NotFound';
-
-//pages
-import Home from './pages/Home/Home';
-
-ReactDOM.render(
-    <Router history={browserHistory}>
-        <Route path="/" component={Wrapper}>
-            <IndexRoute component={Home}/>
-            <Route path="*" component={NotFound}/>
-        </Route>
-    </Router>
-, document.getElementById('app'));

app/app.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Wrapper from './Wrapper';
+
+ReactDOM.render( <Wrapper/>
+, document.getElementById('app'));

app/components/Navbar/Navbar.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router';
-
-import './Navbar.scss';
-
-export default class Navbar extends React.Component {
-
-    render() {
-        return (
-            <div className="Navbar">
-                <div className="Navbar__header">
-                    <span>React Webpack 2 Seed</span>
-                    <a href="https://github.com/mgerb/react-webpack2-seed">GitHub
-                        <i className="fa fa-github" aria-hidden="true"/>
-                    </a>
-                </div>
-                
-                <div className="Navbar__nav">
-                    <Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="Navbar__item--active">Home</Link>
-                    <Link to="/new" className="Navbar__item" activeClassName="Navbar__item--active">New</Link>
-                </div>
-            </div>
-        );
-    }
-}
-
-Navbar.propTypes = {
-    children: React.PropTypes.node,
-};

app/components/Navbar/Navbar.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+import './Navbar.scss';
+
+interface Props {
+    
+}
+
+interface State {
+    
+}
+
+export default class Navbar extends React.Component<Props, State> {
+
+    constructor(props: Props) {
+        super(props);
+    }    
+
+    render() {
+        return (
+            <div className="Navbar">
+                <div className="Navbar__header">
+                    <span>React Starter</span>
+                    <a href="https://github.com/mgerb/react-webpack2-seed">GitHub
+                        <i className="fa fa-github" aria-hidden="true"/>
+                    </a>
+                </div>
+                
+                <div className="Navbar__nav">
+                    <NavLink to="/" className="Navbar__item" exact activeClassName="Navbar__item--active">Home</NavLink>
+                    <NavLink to="/new" className="Navbar__item" exact activeClassName="Navbar__item--active">New</NavLink>
+                </div>
+            </div>
+        );
+    }
+}
+

app/pages/Home/Home.js

@@ -1,15 +0,0 @@
-import React from 'react';
-
-import './Home.scss';
-
-export default class Home extends React.Component {
-
-    render() {
-        return (
-            <div className="Home">
-                test 123
-            </div>
-        );
-    }
-}
-

app/pages/Home/Home.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+
+import './Home.scss';
+
+interface Props extends RouteComponentProps<any> {
+
+}
+
+interface State {
+
+}
+
+export default class Home extends React.Component<Props, State> {
+
+    constructor(props: Props){
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className="Home">
+                test 123
+            </div>
+        );
+    }
+}
+

app/pages/NotFound/NotFound.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import './NotFound.scss';
-
-export default class Default extends React.Component {
-    render() {
-        return (
-            <div className="NotFound">
-                404 Not Found
-            </div>
-        );
-    }
-}

app/pages/NotFound/NotFound.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+
+import './NotFound.scss';
+
+interface Props extends RouteComponentProps<any> {
+
+}
+
+
+interface State {
+
+}
+
+export default class NotFound extends React.Component<Props, State> {
+
+    constructor(props: Props){
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className="NotFound">
+                404 Not Found
+            </div>
+        );
+    }
+}

package.json

@@ -4,12 +4,16 @@
   "description": "A seed for a simple react application",
   "scripts": {
     "build": "webpack -p --progress --colors",
+    "c9": "webpack-dev-server --host 0.0.0.0 --port 8080 --inline --hot --history-api-fallback",
     "dev": "webpack-dev-server --inline --hot --history-api-fallback",
-    "c9": "webpack-dev-server --host 0.0.0.0 --port 8080 --inline --hot --history-api-fallback"
+    "watch": "webpack --watch"
   },
   "author": "Mitchell Gerber",
   "license": "MIT",
   "devDependencies": {
+    "@types/react": "^15.0.20",
+    "@types/react-dom": "^0.14.23",
+    "@types/react-router-dom": "^4.0.2",
     "autoprefixer": "^6.6.0",
     "babel-core": "^6.21.0",
     "babel-loader": "^6.2.10",
@@ -19,20 +23,21 @@
     "babel-preset-stage-0": "^6.16.0",
     "clean-webpack-plugin": "^0.1.14",
     "css-loader": "^0.26.1",
-    "eslint": "^3.12.2",
-    "eslint-plugin-react": "^6.8.0",
     "extract-text-webpack-plugin": "2.0.0-rc.1",
     "file-loader": "^0.10.0",
     "html-webpack-plugin": "^2.24.1",
     "node-sass": "^4.5.0",
     "postcss-loader": "^1.2.1",
     "react": "^15.4.1",
-    "react-dom": "^15.4.1",
-    "react-router": "^3.0.0",
+    "react-dom": "^15.4.2",
+    "react-router-dom": "^4.0.0",
     "sass-loader": "^4.1.1",
     "style-loader": "^0.13.1",
+    "ts-loader": "^2.0.3",
+    "tslint": "^4.5.1",
+    "typescript": "^2.2.2",
     "url-loader": "^0.5.7",
-    "webpack": "2.2.1",
+    "webpack": "2.3.2",
     "webpack-dev-server": "2.2.0"
   }
 }

tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "es2015",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "jsx": "react",
+    "allowSyntheticDefaultImports": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "preserveConstEnums": true,
+    "allowJs": false,
+    "sourceMap": true,
+    "noImplicitReturns": true,
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "alwaysStrict": true,
+    "typeRoots": [
+      "./node_modules/@types",
+      "./@types"
+    ]
+  },
+  "filesGlob": [
+    "typings/index.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "include": [
+    "app"
+  ],
+  "exclude": [
+    "android",
+    "ios",
+    "build",
+    "node_modules"
+  ],
+  "compileOnSave": false
+}

tslint.json

@@ -0,0 +1 @@
+{}

webpack.config.js

@@ -6,18 +6,24 @@ const webpack = require('webpack');
 
 module.exports = {
     entry: {
-        app: './app/app.js',
+        app: './app/app.tsx',
         vendor: ['react', 'react-dom']
     },
     output: {
         path: path.resolve(__dirname, 'dist'),
         filename: '[name].[hash].js'
     },
+    resolve: {
+        extensions: ['.ts', '.tsx', '.js']
+    },
     module: {
         rules: [{
             test: /\.(js|jsx)$/,
             loaders: ['babel-loader']
         }, {
+            test: /\.ts(x)?$/,
+            loaders: ['babel-loader', 'ts-loader']
+        },{
             test: /\.scss$/,
             loader: ExtractTextPlugin.extract({
                 fallbackLoader: 'style-loader',