Add ReactSpa template

templates/ReactSpa/ClientApp/boot.tsx

@@ -0,0 +1,12 @@
+import 'bootstrap/dist/css/bootstrap.css';
+import './css/site.css';
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { browserHistory, Router } from 'react-router';
+import { routes } from './routes';
+
+ReactDOM.render(
+    <Router history={ browserHistory } children={ routes } />,
+    document.getElementById('react-app')
+);

templates/ReactSpa/ClientApp/components/About.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export class About extends React.Component<void, void> {
+    public render() {
+        return <div>
+            <h2>About</h2>
+
+            <p>Use this area to provide additional information.</p>
+        </div>;
+    }
+}

templates/ReactSpa/ClientApp/components/Counter.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+interface CounterState {
+    currentCount: number;
+}
+
+export class Counter extends React.Component<void, CounterState> {
+    constructor() {
+        super();
+        this.state = { currentCount: 0 };
+    }
+    
+    public render() {
+        return <div>
+            <h2>Counter</h2>
+            
+            <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/ReactSpa/ClientApp/components/Home.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { carouselItems } from '../data/CarouselItems';
+import { linkLists } from '../data/HomepageLinkLists';
+
+export class Home extends React.Component<void, void> {
+    public render() {
+        return <div>
+            { /* Carousel */ }
+            <div id="myCarousel" className="carousel slide" data-ride="carousel" data-interval="6000">
+                <ol className="carousel-indicators">
+                    { carouselItems.map((item, index) =>
+                        <li key={ index } data-target="#myCarousel" data-slide-to={ index } className={ index == 0 ? "active" : "" }></li>
+                    )}
+                </ol>
+                <div className="carousel-inner" role="listbox">
+                    { carouselItems.map((item, index) =>
+                        <div key={ index } className={ "item " + (index == 0 ? "active" : "") }>
+                            <img src={ item.imageUrl } alt={ item.imageAlt } className="img-responsive" />
+                            <div className="carousel-caption">
+                                <p>
+                                    { item.text }
+                                    <a className="btn btn-default" href={ item.learnMoreUrl }>Learn More</a>
+                                </p>
+                            </div>
+                        </div>
+                    )}
+                </div>
+                <a className="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
+                    <span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+                    <span className="sr-only">Previous</span>
+                </a>
+                <a className="right carousel-control" href="#myCarousel" role="button" data-slide="next">
+                    <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+                    <span className="sr-only">Next</span>
+                </a>
+            </div>
+
+            { /* Lists of links */ }
+            <div className="row">
+                { linkLists.map((list, listIndex) =>
+                    <div key={listIndex} className="col-md-3">
+                        <h2>{ list.title }</h2>
+                        <ul>
+                            { list.entries.map((entry, entryIndex) => 
+                                <li key={ entryIndex }>{ entry }</li>
+                            )}
+                        </ul>
+                    </div>
+                )}
+            </div>
+        </div>;
+    }
+}

templates/ReactSpa/ClientApp/components/NavMenu.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Link } from 'react-router';
+export class NavMenu extends React.Component<void, void> {
+    public render() {
+        return <div className="navbar navbar-inverse navbar-fixed-top">
+            <div className="container">
+                <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="navbar-collapse collapse">
+                    <ul className="nav navbar-nav">
+                        <li><Link to={ '/' }>Home</Link></li>
+                        <li><Link to={ '/about' }>About</Link></li>
+                        <li><Link to={ '/counter' }>Counter</Link></li>
+                    </ul>
+                </div>
+            </div>
+        </div>;
+    }
+}

templates/ReactSpa/ClientApp/css/site.css

@@ -0,0 +1,24 @@
+body {
+    padding-top: 50px;
+    padding-bottom: 20px;
+}
+
+/* Wrapping element */
+/* Set some basic padding to keep content from hitting the edges */
+.body-content {
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+/* Set widths on the form inputs since otherwise they're 100% wide */
+input,
+select,
+textarea {
+    max-width: 280px;
+}
+
+/* Carousel */
+.carousel-caption p {
+    font-size: 20px;
+    line-height: 1.4;
+}

templates/ReactSpa/ClientApp/data/CarouselItems.ts

@@ -0,0 +1,28 @@
+export interface CarouselItem {
+    imageUrl: string;
+    imageAlt: string;
+    text: string;
+    learnMoreUrl: string;
+}
+
+export const carouselItems: CarouselItem[] = [{
+    imageUrl: "/images/ASP-NET-Banners-01.png",
+    imageAlt: "ASP.NET",
+    text: "Learn how to build ASP.NET apps that can run anywhere.",
+    learnMoreUrl: "http://go.microsoft.com/fwlink/?LinkID=525028&clcid=0x409"
+}, {
+    imageUrl: "/images/Banner-02-VS.png",
+    imageAlt: "Visual Studio",
+    text: "There are powerful new features in Visual Studio for building modern web apps.",
+    learnMoreUrl: "http://go.microsoft.com/fwlink/?LinkID=525030&clcid=0x409"
+}, {
+    imageUrl: "/images/ASP-NET-Banners-02.png",
+    imageAlt: "Package Management",
+    text: "Bring in libraries from NuGet, Bower, and npm, and automate tasks using Grunt or Gulp.",
+    learnMoreUrl: "http://go.microsoft.com/fwlink/?LinkID=525029&clcid=0x409"
+}, {
+    imageUrl: "/images/Banner-01-Azure.png",
+    imageAlt: "Microsoft Azure",
+    text: "Learn how Microsoft's Azure cloud platform allows you to build, deploy, and scale web apps.",
+    learnMoreUrl: "http://go.microsoft.com/fwlink/?LinkID=525027&clcid=0x409"
+}];

templates/ReactSpa/ClientApp/data/HomepageLinkLists.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+export interface LinkList {
+    title: string;
+    entries: JSX.Element[];
+}
+
+export const linkLists: LinkList[] = [{
+    title: "Application uses",
+    entries: [
+        <div>Sample pages using ASP.NET MVC 6</div>,
+        <div><a href="http://go.microsoft.com/fwlink/?LinkId=518007">Gulp</a> and <a href="http://go.microsoft.com/fwlink/?LinkId=518004">Bower</a> for managing client-side libraries</div>,
+        <div>Theming using <a href="http://go.microsoft.com/fwlink/?LinkID=398939">Bootstrap</a></div>
+    ]
+}, {
+    title: "How to",
+    entries: [
+        <div><a href="http://go.microsoft.com/fwlink/?LinkID=398600">Add a Controller and View</a></div>,
+        <div><a href="http://go.microsoft.com/fwlink/?LinkID=699314">Add an appsetting in config and access it in app.</a></div>,
+        <div><a href="http://go.microsoft.com/fwlink/?LinkId=699315">Manage User Secrets using Secret Manager.</a></div>,
+        <div><a href="http://go.microsoft.com/fwlink/?LinkId=699316">Use logging to log a message.</a></div>,
+        <div><a href="http://go.microsoft.com/fwlink/?LinkId=699317">Add packages using NuGet.</a></div>,
+        <div><a href="http://go.microsoft.com/fwlink/?LinkId=699318">Add client packages using Bower.</a></div>,
+        <div><a href="http://go.microsoft.com/fwlink/?LinkId=699319">Target development, staging or production environment.</a></div>
+    ]
+}, {
+    title: "Overview",
+    entries: [
+        <div><a href="http://go.microsoft.com/fwlink/?LinkId=518008">Conceptual overview of what is ASP.NET 5</a></div>,
+        <div><a href="http://go.microsoft.com/fwlink/?LinkId=699320">Fundamentals of ASP.NET 5 such as Startup and middleware.</a></div>,
+        <div><a href="http://go.microsoft.com/fwlink/?LinkId=398602">Working with Data</a></div>,
+        <div><a href="http://go.microsoft.com/fwlink/?LinkId=398603">Security</a></div>,
+        <div><a href="http://go.microsoft.com/fwlink/?LinkID=699321">Client side development</a></div>,
+        <div><a href="http://go.microsoft.com/fwlink/?LinkID=699322">Develop on different platforms</a></div>,
+        <div><a href="http://go.microsoft.com/fwlink/?LinkID=699323">Read more on the documentation site</a></div>
+    ]
+}, {
+    title: "Run & Deploy",
+    entries: [
+        <div><a href="http://go.microsoft.com/fwlink/?LinkID=517851">Run your app</a></div>,
+        <div><a href="http://go.microsoft.com/fwlink/?LinkID=517852">Run your app on .NET Core</a></div>,
+        <div><a href="http://go.microsoft.com/fwlink/?LinkID=517853">Run commands in your project.json</a></div>,
+        <div><a href="http://go.microsoft.com/fwlink/?LinkID=398609">Publish to Microsoft Azure Web Apps</a></div>
+    ]
+}];

templates/ReactSpa/ClientApp/routes.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Router, Route, HistoryBase } from 'react-router';
+import { NavMenu } from './components/NavMenu';
+import { Home } from './components/Home';
+import { About } from './components/About';
+import { Counter } from './components/Counter';
+
+class Layout extends React.Component<{ body: React.ReactElement<any> }, void> {
+    public render() {
+        return <div>
+            <NavMenu />
+            <div className="container body-content">
+                { this.props.body }
+                <hr />
+                <footer>
+                    <p>&copy; 2016 - WebApplicationBasic</p>
+                </footer>
+            </div>
+        </div>;
+    }
+}
+
+export const routes = <Route component={ Layout }>
+    <Route path="/" components={{ body: Home }} />
+    <Route path="/about" components={{ body: About }} />
+    <Route path="/counter" components={{ body: Counter }} />
+</Route>;