Beginning React+Redux template as a direct copy of the React one

templates/ReactReduxSpa/ClientApp/components/Counter.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+interface CounterState {
+    currentCount: number;
+}
+
+export class Counter extends React.Component<any, CounterState> {
+    constructor() {
+        super();
+        this.state = { currentCount: 0 };
+    }
+
+    public render() {
+        return <div>
+            <h1>Counter</h1>
+
+            <p>This is a simple example of a React component.</p>
+
+            <p>Current count: <strong>{ this.state.currentCount }</strong></p>
+
+            <button onClick={ () => { this.incrementCounter() } }>Increment</button>
+        </div>;
+    }
+
+    incrementCounter() {
+        this.setState({
+            currentCount: this.state.currentCount + 1
+        });
+    }
+}

templates/ReactReduxSpa/ClientApp/components/FetchData.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+interface FetchDataExampleState {
+    forecasts: WeatherForecast[];
+    loading: boolean;
+}
+
+export class FetchData extends React.Component<any, FetchDataExampleState> {
+    constructor() {
+        super();
+        this.state = { forecasts: [], loading: true };
+
+        fetch('/api/SampleData/WeatherForecasts')
+            .then(response => response.json())
+            .then((data: WeatherForecast[]) => {
+                this.setState({ forecasts: data, loading: false });
+            });
+    }
+
+    public render() {
+        let contents = this.state.loading
+            ? <p><em>Loading...</em></p>
+            : FetchData.renderForecastsTable(this.state.forecasts);
+
+        return <div>
+            <h1>Weather forecast</h1>
+            <p>This component demonstrates fetching data from the server.</p>
+            { contents }
+            <p>For more sophisticated applications, consider an architecture such as Redux or Flux for managing state. You can generate an ASP.NET Core application with React and Redux using <code>dotnet new aspnet/spa/reactredux</code> instead of using this template.</p>
+        </div>;
+    }
+
+    private static renderForecastsTable(forecasts: WeatherForecast[]) {
+        return <table className='table'>
+            <thead>
+                <tr>
+                    <th>Date</th>
+                    <th>Temp. (C)</th>
+                    <th>Temp. (F)</th>
+                    <th>Summary</th>
+                </tr>
+            </thead>
+            <tbody>
+            {forecasts.map(forecast =>
+                <tr key={ forecast.dateFormatted }>
+                    <td>{ forecast.dateFormatted }</td>
+                    <td>{ forecast.temperatureC }</td>
+                    <td>{ forecast.temperatureF }</td>
+                    <td>{ forecast.summary }</td>
+                </tr>
+            )}
+            </tbody>
+        </table>;
+    }
+}
+
+interface WeatherForecast {
+    dateFormatted: string;
+    temperatureC: number;
+    temperatureF: number;
+    summary: string;
+}

templates/ReactReduxSpa/ClientApp/components/Home.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+export class Home extends React.Component<any, void> {
+    public render() {
+        return <div>
+            <h1>Hello, world!</h1>
+            <p>Welcome to your new single-page application, built with:</p>
+            <ul>
+                <li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>
+                <li><a href='https://facebook.github.io/react/'>React</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for client-side code</li>
+                <li><a href='https://webpack.github.io/'>Webpack</a> for building and bundling client-side resources</li>
+                <li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
+            </ul>
+            <p>To help you get started, we've also set up:</p>
+            <ul>
+                <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
+                <li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
+                <li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, rebuilt CSS and React components will be injected directly into your running application, preserving its live state.</li>
+                <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
+            </ul>
+            <h4>Going further</h4>
+            <p>
+                For larger applications, or for server-side prerendering (i.e., for <em>isomorphic</em> or <em>universal</em> applications), you should consider using a Flux/Redux-like architecture.
+                You can generate an ASP.NET Core application with React and Redux using <code>dotnet new aspnet/spa/reactredux</code> instead of using this template.
+            </p>
+        </div>;
+    }
+}

templates/ReactReduxSpa/ClientApp/components/Layout.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { NavMenu } from './NavMenu';
+
+export interface LayoutProps {
+    body: React.ReactElement<any>;
+}
+
+export class Layout extends React.Component<LayoutProps, void> {
+    public render() {
+        return <div className='container-fluid'>
+            <div className='row'>
+                <div className='col-sm-3'>
+                    <NavMenu />
+                </div>
+                <div className='col-sm-9'>
+                    { this.props.body }
+                </div>
+            </div>
+        </div>;
+    }
+}

templates/ReactReduxSpa/ClientApp/components/NavMenu.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Link } from 'react-router';
+
+export class NavMenu extends React.Component<any, void> {
+    public render() {
+        return <div className='main-nav'>
+                <div className='navbar navbar-inverse'>
+                <div className='navbar-header'>
+                    <button type='button' className='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
+                        <span className='sr-only'>Toggle navigation</span>
+                        <span className='icon-bar'></span>
+                        <span className='icon-bar'></span>
+                        <span className='icon-bar'></span>
+                    </button>
+                    <Link className='navbar-brand' to={ '/' }>WebApplicationBasic</Link>
+                </div>
+                <div className='clearfix'></div>
+                <div className='navbar-collapse collapse'>
+                    <ul className='nav navbar-nav'>
+                        <li>
+                            <Link to={ '/' } activeClassName='active'>
+                                <span className='glyphicon glyphicon-home'></span> Home
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to={ '/counter' } activeClassName='active'>
+                                <span className='glyphicon glyphicon-education'></span> Counter
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to={ '/fetchdata' } activeClassName='active'>
+                                <span className='glyphicon glyphicon-th-list'></span> Fetch data
+                            </Link>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>;
+    }
+}