Skip to content

Commit ec93377

Browse files
SteveSandersonMSSteveSandersonMS
committed
Beginning React+Redux template as a direct copy of the React one
1 parent 3ab3a1b commit ec93377

37 files changed

Lines changed: 4085 additions & 0 deletions

‎templates/ReactReduxSpa/.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015", "react"]
3+
}

‎templates/ReactReduxSpa/.gitignore‎

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
## Ignore Visual Studio temporary files, build results, and
2+
## files generated by popular Visual Studio add-ons.
3+
4+
# User-specific files
5+
*.suo
6+
*.user
7+
*.userosscache
8+
*.sln.docstates
9+
10+
# User-specific files (MonoDevelop/Xamarin Studio)
11+
*.userprefs
12+
13+
# Build results
14+
[Dd]ebug/
15+
[Dd]ebugPublic/
16+
[Rr]elease/
17+
[Rr]eleases/
18+
x64/
19+
x86/
20+
build/
21+
bld/
22+
[Bb]in/
23+
[Oo]bj/
24+
25+
# Visual Studio 2015 cache/options directory
26+
.vs/
27+
/wwwroot/dist/
28+
29+
# MSTest test Results
30+
[Tt]est[Rr]esult*/
31+
[Bb]uild[Ll]og.*
32+
33+
# NUNIT
34+
*.VisualState.xml
35+
TestResult.xml
36+
37+
# Build Results of an ATL Project
38+
[Dd]ebugPS/
39+
[Rr]eleasePS/
40+
dlldata.c
41+
42+
# DNX
43+
project.lock.json
44+
artifacts/
45+
46+
*_i.c
47+
*_p.c
48+
*_i.h
49+
*.ilk
50+
*.meta
51+
*.obj
52+
*.pch
53+
*.pdb
54+
*.pgc
55+
*.pgd
56+
*.rsp
57+
*.sbr
58+
*.tlb
59+
*.tli
60+
*.tlh
61+
*.tmp
62+
*.tmp_proj
63+
*.log
64+
*.vspscc
65+
*.vssscc
66+
.builds
67+
*.pidb
68+
*.svclog
69+
*.scc
70+
71+
# Chutzpah Test files
72+
_Chutzpah*
73+
74+
# Visual C++ cache files
75+
ipch/
76+
*.aps
77+
*.ncb
78+
*.opendb
79+
*.opensdf
80+
*.sdf
81+
*.cachefile
82+
83+
# Visual Studio profiler
84+
*.psess
85+
*.vsp
86+
*.vspx
87+
*.sap
88+
89+
# TFS 2012 Local Workspace
90+
$tf/
91+
92+
# Guidance Automation Toolkit
93+
*.gpState
94+
95+
# ReSharper is a .NET coding add-in
96+
_ReSharper*/
97+
*.[Rr]e[Ss]harper
98+
*.DotSettings.user
99+
100+
# JustCode is a .NET coding add-in
101+
.JustCode
102+
103+
# TeamCity is a build add-in
104+
_TeamCity*
105+
106+
# DotCover is a Code Coverage Tool
107+
*.dotCover
108+
109+
# NCrunch
110+
_NCrunch_*
111+
.*crunch*.local.xml
112+
nCrunchTemp_*
113+
114+
# MightyMoose
115+
*.mm.*
116+
AutoTest.Net/
117+
118+
# Web workbench (sass)
119+
.sass-cache/
120+
121+
# Installshield output folder
122+
[Ee]xpress/
123+
124+
# DocProject is a documentation generator add-in
125+
DocProject/buildhelp/
126+
DocProject/Help/*.HxT
127+
DocProject/Help/*.HxC
128+
DocProject/Help/*.hhc
129+
DocProject/Help/*.hhk
130+
DocProject/Help/*.hhp
131+
DocProject/Help/Html2
132+
DocProject/Help/html
133+
134+
# Click-Once directory
135+
publish/
136+
137+
# Publish Web Output
138+
*.[Pp]ublish.xml
139+
*.azurePubxml
140+
# TODO: Comment the next line if you want to checkin your web deploy settings
141+
# but database connection strings (with potential passwords) will be unencrypted
142+
*.pubxml
143+
*.publishproj
144+
145+
# NuGet Packages
146+
*.nupkg
147+
# The packages folder can be ignored because of Package Restore
148+
**/packages/*
149+
# except build/, which is used as an MSBuild target.
150+
!**/packages/build/
151+
# Uncomment if necessary however generally it will be regenerated when needed
152+
#!**/packages/repositories.config
153+
154+
# Microsoft Azure Build Output
155+
csx/
156+
*.build.csdef
157+
158+
# Microsoft Azure Emulator
159+
ecf/
160+
rcf/
161+
162+
# Microsoft Azure ApplicationInsights config file
163+
ApplicationInsights.config
164+
165+
# Windows Store app package directory
166+
AppPackages/
167+
BundleArtifacts/
168+
169+
# Visual Studio cache files
170+
# files ending in .cache can be ignored
171+
*.[Cc]ache
172+
# but keep track of directories ending in .cache
173+
!*.[Cc]ache/
174+
175+
# Others
176+
ClientBin/
177+
~$*
178+
*~
179+
*.dbmdl
180+
*.dbproj.schemaview
181+
*.pfx
182+
*.publishsettings
183+
node_modules/
184+
orleans.codegen.cs
185+
186+
# RIA/Silverlight projects
187+
Generated_Code/
188+
189+
# Backup & report files from converting an old project file
190+
# to a newer Visual Studio version. Backup files are not needed,
191+
# because we have git ;-)
192+
_UpgradeReport_Files/
193+
Backup*/
194+
UpgradeLog*.XML
195+
UpgradeLog*.htm
196+
197+
# SQL Server files
198+
*.mdf
199+
*.ldf
200+
201+
# Business Intelligence projects
202+
*.rdl.data
203+
*.bim.layout
204+
*.bim_*.settings
205+
206+
# Microsoft Fakes
207+
FakesAssemblies/
208+
209+
# GhostDoc plugin setting file
210+
*.GhostDoc.xml
211+
212+
# Node.js Tools for Visual Studio
213+
.ntvs_analysis.dat
214+
215+
# Visual Studio 6 build log
216+
*.plg
217+
218+
# Visual Studio 6 workspace options file
219+
*.opt
220+
221+
# Visual Studio LightSwitch build output
222+
**/*.HTMLClient/GeneratedArtifacts
223+
**/*.DesktopClient/GeneratedArtifacts
224+
**/*.DesktopClient/ModelManifest.xml
225+
**/*.Server/GeneratedArtifacts
226+
**/*.Server/ModelManifest.xml
227+
_Pvt_Extensions
228+
229+
# Paket dependency manager
230+
.paket/paket.exe
231+
232+
# FAKE - F# Make
233+
.fake/

‎templates/ReactReduxSpa/ClientApp/boot.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import 'bootstrap';
2+
import 'bootstrap/dist/css/bootstrap.css';
3+
import './css/site.css';
4+
5+
import * as React from 'react';
6+
import * as ReactDOM from 'react-dom';
7+
import { browserHistory, Router } from 'react-router';
8+
import routes from './routes';
9+
10+
// This code starts up the React app when it runs in a browser. It sets up the routing configuration
11+
// and injects the app into a DOM element.
12+
ReactDOM.render(
13+
<Router history={ browserHistory } children={ routes } />,
14+
document.getElementById('react-app')
15+
);

‎templates/ReactReduxSpa/ClientApp/components/Counter.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import * as React from 'react';
2+
3+
interface CounterState {
4+
currentCount: number;
5+
}
6+
7+
export class Counter extends React.Component<any, CounterState> {
8+
constructor() {
9+
super();
10+
this.state = { currentCount: 0 };
11+
}
12+
13+
public render() {
14+
return <div>
15+
<h1>Counter</h1>
16+
17+
<p>This is a simple example of a React component.</p>
18+
19+
<p>Current count: <strong>{ this.state.currentCount }</strong></p>
20+
21+
<button onClick={ () => { this.incrementCounter() } }>Increment</button>
22+
</div>;
23+
}
24+
25+
incrementCounter() {
26+
this.setState({
27+
currentCount: this.state.currentCount + 1
28+
});
29+
}
30+
}

‎templates/ReactReduxSpa/ClientApp/components/FetchData.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import * as React from 'react';
2+
3+
interface FetchDataExampleState {
4+
forecasts: WeatherForecast[];
5+
loading: boolean;
6+
}
7+
8+
export class FetchData extends React.Component<any, FetchDataExampleState> {
9+
constructor() {
10+
super();
11+
this.state = { forecasts: [], loading: true };
12+
13+
fetch('/api/SampleData/WeatherForecasts')
14+
.then(response => response.json())
15+
.then((data: WeatherForecast[]) => {
16+
this.setState({ forecasts: data, loading: false });
17+
});
18+
}
19+
20+
public render() {
21+
let contents = this.state.loading
22+
? <p><em>Loading...</em></p>
23+
: FetchData.renderForecastsTable(this.state.forecasts);
24+
25+
return <div>
26+
<h1>Weather forecast</h1>
27+
<p>This component demonstrates fetching data from the server.</p>
28+
{ contents }
29+
<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>
30+
</div>;
31+
}
32+
33+
private static renderForecastsTable(forecasts: WeatherForecast[]) {
34+
return <table className='table'>
35+
<thead>
36+
<tr>
37+
<th>Date</th>
38+
<th>Temp. (C)</th>
39+
<th>Temp. (F)</th>
40+
<th>Summary</th>
41+
</tr>
42+
</thead>
43+
<tbody>
44+
{forecasts.map(forecast =>
45+
<tr key={ forecast.dateFormatted }>
46+
<td>{ forecast.dateFormatted }</td>
47+
<td>{ forecast.temperatureC }</td>
48+
<td>{ forecast.temperatureF }</td>
49+
<td>{ forecast.summary }</td>
50+
</tr>
51+
)}
52+
</tbody>
53+
</table>;
54+
}
55+
}
56+
57+
interface WeatherForecast {
58+
dateFormatted: string;
59+
temperatureC: number;
60+
temperatureF: number;
61+
summary: string;
62+
}

‎templates/ReactReduxSpa/ClientApp/components/Home.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import * as React from 'react';
2+
3+
export class Home extends React.Component<any, void> {
4+
public render() {
5+
return <div>
6+
<h1>Hello, world!</h1>
7+
<p>Welcome to your new single-page application, built with:</p>
8+
<ul>
9+
<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>
10+
<li><a href='https://facebook.github.io/react/'>React</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for client-side code</li>
11+
<li><a href='https://webpack.github.io/'>Webpack</a> for building and bundling client-side resources</li>
12+
<li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
13+
</ul>
14+
<p>To help you get started, we've also set up:</p>
15+
<ul>
16+
<li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
17+
<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>
18+
<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>
19+
<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>
20+
</ul>
21+
<h4>Going further</h4>
22+
<p>
23+
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.
24+
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.
25+
</p>
26+
</div>;
27+
}
28+
}

‎templates/ReactReduxSpa/ClientApp/components/Layout.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import * as React from 'react';
2+
import { NavMenu } from './NavMenu';
3+
4+
export interface LayoutProps {
5+
body: React.ReactElement<any>;
6+
}
7+
8+
export class Layout extends React.Component<LayoutProps, void> {
9+
public render() {
10+
return <div className='container-fluid'>
11+
<div className='row'>
12+
<div className='col-sm-3'>
13+
<NavMenu />
14+
</div>
15+
<div className='col-sm-9'>
16+
{ this.props.body }
17+
</div>
18+
</div>
19+
</div>;
20+
}
21+
}

0 commit comments

Comments
 (0)