add components, routing, cool navbar

Author: mdamyanova

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example.csproj

@@ -0,0 +1,73 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>netcoreapp2.0</TargetFramework>
+    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
+    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
+    <IsPackable>false</IsPackable>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.6" />
+    <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.0.3" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.3" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <!-- Files not to publish (note that the 'dist' subfolders are re-added below) -->
+    <Content Remove="ClientApp\**" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <None Remove="ClientApp\components\About.tsx" />
+    <None Remove="ClientApp\components\Users.tsx" />
+    <None Remove="ClientApp\empty.tsx" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Folder Include="Areas\Admin\Controllers\" />
+    <Folder Include="Areas\Admin\Data\" />
+    <Folder Include="Areas\Admin\Models\" />
+    <Folder Include="Areas\Admin\Views\" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <TypeScriptCompile Include="ClientApp\components\About.tsx" />
+    <TypeScriptCompile Include="ClientApp\components\Users.tsx" />
+    <TypeScriptCompile Include="ClientApp\empty.tsx" />
+  </ItemGroup>
+
+  <Target Name="DebugRunWebpack" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('wwwroot\dist') ">
+    <!-- Ensure Node.js is installed -->
+    <Exec Command="node --version" ContinueOnError="true">
+      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
+    </Exec>
+    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
+
+    <!-- In development, the dist files won't exist on the first run or when cloning to
+         a different machine, so rebuild them if not already present. -->
+    <Message Importance="high" Text="Performing first-run Webpack build..." />
+    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js" />
+    <Exec Command="node node_modules/webpack/bin/webpack.js" />
+  </Target>
+
+  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
+    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
+    <Exec Command="npm install" />
+    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
+    <Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
+
+    <!-- Include the newly-built files in the publish output -->
+    <ItemGroup>
+      <DistFiles Include="wwwroot\dist\**; ClientApp\dist\**" />
+      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
+        <RelativePath>%(DistFiles.Identity)</RelativePath>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </ResolvedFileToPublish>
+    </ItemGroup>
+  </Target>
+
+</Project>

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/boot.tsx

@@ -0,0 +1,30 @@
+import './css/site.css';
+import 'bootstrap';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
+import { BrowserRouter } from 'react-router-dom';
+import * as RoutesModule from './routes';
+let routes = RoutesModule.routes;
+
+function renderApp() {
+    // This code starts up the React app when it runs in a browser. It sets up the routing
+    // configuration and injects the app into a DOM element.
+    const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
+    ReactDOM.render(
+        <AppContainer>
+            <BrowserRouter children={routes} basename={baseUrl} />
+        </AppContainer>,
+        document.getElementById('react-app')
+    );
+}
+
+renderApp();
+
+// Allow Hot Module Replacement
+if (module.hot) {
+    module.hot.accept('./routes', () => {
+        routes = require<typeof RoutesModule>('./routes').routes;
+        renderApp();
+    });
+}

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/About.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export class About extends React.Component {
+    public render() {
+        return <div>alabala</div>
+    };
+}

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/Home.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
+
+export class Home extends React.Component<RouteComponentProps<{}>, {}> {
+    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 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 reactredux</code> instead of using this template.
+            </p>
+        </div>;
+    }
+}

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/Layout.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { NavMenu } from './NavMenu';
+
+export interface LayoutProps {
+    children?: React.ReactNode;
+}
+
+export class Layout extends React.Component<LayoutProps, {}> {
+    public render() {
+        return <div className='row'>
+                    <NavMenu />
+                {this.props.children}
+            </div>
+    };
+}

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/NavMenu.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Link, NavLink } from 'react-router-dom';
+import { Navbar, NavItem, Nav } from 'react-bootstrap';
+
+export class NavMenu extends React.Component<{}, {}> {
+    public render() {
+        return <Navbar inverse collapseOnSelect>
+            <Navbar.Header>
+                <Navbar.Brand>
+                    <a href="#brand">ASP.NET Core with ReactJS</a>
+                </Navbar.Brand>
+                <Navbar.Toggle />
+            </Navbar.Header>
+            <Navbar.Collapse>
+                <Nav>
+                    <NavItem eventKey={1} href="/users">Users</NavItem>
+                    <NavItem eventKey={2} href="/about">About</NavItem>
+                </Nav>
+                <Nav pullRight>
+                    <NavItem eventKey={1} href="#">example</NavItem>
+                    <NavItem eventKey={2} href="#">example</NavItem>
+                </Nav>
+            </Navbar.Collapse>
+        </Navbar>;
+    }
+}

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/Users.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
+
+interface UsersExampleState {
+
+}
+export class Users extends React.Component<RouteComponentProps<{}>, UsersExampleState> {
+    public render() {
+        return <div>wait a minute</div>
+    }
+}

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/css/components/nav-menu.css

@@ -0,0 +1 @@
+

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/css/main.css

@@ -0,0 +1 @@
+@import 'components/nav-menu.css';

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/css/site.css

@@ -0,0 +1,66 @@
+.main-nav li .glyphicon {
+    margin-right: 10px;
+}
+
+/* Highlighting rules for nav menu items */
+.main-nav li a.active,
+.main-nav li a.active:hover,
+.main-nav li a.active:focus {
+    background-color: #4189C7;
+    color: white;
+}
+
+/* Keep the nav menu independent of scrolling and on top of other items */
+.main-nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+}
+
+@media (max-width: 767px) {
+    /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
+    body {
+        padding-top: 50px;
+    }
+}
+
+@media (min-width: 768px) {
+    /* On small screens, convert the nav menu to a vertical sidebar */
+    .main-nav {
+        /*height: 100%;*/
+        /*width: calc(25% - 20px);*/
+    }
+    .main-nav .navbar {
+        border-radius: 0px;
+        border-width: 0px;
+        height: 100%;
+    }
+    .main-nav .navbar-header {
+        float: none;
+    }
+    .main-nav .navbar-collapse {
+        border-top: 1px solid #444;
+        padding: 0px;
+    }
+    .main-nav .navbar ul {
+        float: none;
+    }
+    .main-nav .navbar li {
+        float: none;
+        font-size: 15px;
+        margin: 6px;
+    }
+    .main-nav .navbar li a {
+        padding: 10px 16px;
+        border-radius: 4px;
+    }
+    .main-nav .navbar a {
+        /* If a menu item's text is too long, truncate it */
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/empty.tsx

@@ -0,0 +1 @@
+// This is our empty TypeScript file to "lie" the compilator and everything to run smooth. :)

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/routes.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Route } from 'react-router-dom';
+import { Layout } from './components/Layout';
+import { Home } from './components/Home';
+import { About } from './components/About';
+import { Users } from './components/Users';
+
+export const routes = <Layout>
+    <Route exact path='/' component={Home} />
+    <Route path='/users' component={Users} />
+</Layout>;

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/Controllers/HomeController.cs

@@ -0,0 +1,23 @@
+using System;
+using System.Collections.Generic;
+using System.Diagnostics;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+
+namespace ASPNETCoreReactJS_Example.Controllers
+{
+    public class HomeController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View();
+        }
+
+        public IActionResult Error()
+        {
+            ViewData["RequestId"] = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
+            return View();
+        }
+    }
+}

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/Controllers/SampleDataController.cs

@@ -0,0 +1,44 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+
+namespace ASPNETCoreReactJS_Example.Controllers
+{
+    [Route("api/[controller]")]
+    public class SampleDataController : Controller
+    {
+        private static string[] Summaries = new[]
+        {
+            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+        };
+
+        [HttpGet("[action]")]
+        public IEnumerable<WeatherForecast> WeatherForecasts()
+        {
+            var rng = new Random();
+            return Enumerable.Range(1, 5).Select(index => new WeatherForecast
+            {
+                DateFormatted = DateTime.Now.AddDays(index).ToString("d"),
+                TemperatureC = rng.Next(-20, 55),
+                Summary = Summaries[rng.Next(Summaries.Length)]
+            });
+        }
+
+        public class WeatherForecast
+        {
+            public string DateFormatted { get; set; }
+            public int TemperatureC { get; set; }
+            public string Summary { get; set; }
+
+            public int TemperatureF
+            {
+                get
+                {
+                    return 32 + (int)(TemperatureC / 0.5556);
+                }
+            }
+        }
+    }
+}

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/Program.cs

@@ -0,0 +1,18 @@
+namespace ASPNETCoreReactJS_Example
+{
+    using Microsoft.AspNetCore;
+    using Microsoft.AspNetCore.Hosting;
+
+    public class Program
+    {
+        public static void Main(string[] args)
+        {
+            BuildWebHost(args).Run();
+        }
+
+        public static IWebHost BuildWebHost(string[] args) =>
+            WebHost.CreateDefaultBuilder(args)
+                .UseStartup<Startup>()
+                .Build();
+    }
+}