Skip to content

Commit a553946

Browse files
SteveSandersonMSSteveSandersonMS
committed
Add ReactSpa template
1 parent 0c5eabc commit a553946

39 files changed

+3871
-0
lines changed

‎templates/ReactSpa/.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/ReactSpa/.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/ReactSpa/ClientApp/boot.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import 'bootstrap/dist/css/bootstrap.css';
2+
import './css/site.css';
3+
4+
import * as React from 'react';
5+
import * as ReactDOM from 'react-dom';
6+
import { browserHistory, Router } from 'react-router';
7+
import { routes } from './routes';
8+
9+
ReactDOM.render(
10+
<Router history={ browserHistory } children={ routes } />,
11+
document.getElementById('react-app')
12+
);

‎templates/ReactSpa/ClientApp/components/About.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import * as React from 'react';
2+
3+
export class About extends React.Component<void, void> {
4+
public render() {
5+
return <div>
6+
<h2>About</h2>
7+
8+
<p>Use this area to provide additional information.</p>
9+
</div>;
10+
}
11+
}

‎templates/ReactSpa/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<void, CounterState> {
8+
constructor() {
9+
super();
10+
this.state = { currentCount: 0 };
11+
}
12+
13+
public render() {
14+
return <div>
15+
<h2>Counter</h2>
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/ReactSpa/ClientApp/components/Home.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import * as React from 'react';
2+
import { carouselItems } from '../data/CarouselItems';
3+
import { linkLists } from '../data/HomepageLinkLists';
4+
5+
export class Home extends React.Component<void, void> {
6+
public render() {
7+
return <div>
8+
{ /* Carousel */ }
9+
<div id="myCarousel" className="carousel slide" data-ride="carousel" data-interval="6000">
10+
<ol className="carousel-indicators">
11+
{ carouselItems.map((item, index) =>
12+
<li key={ index } data-target="#myCarousel" data-slide-to={ index } className={ index == 0 ? "active" : "" }></li>
13+
)}
14+
</ol>
15+
<div className="carousel-inner" role="listbox">
16+
{ carouselItems.map((item, index) =>
17+
<div key={ index } className={ "item " + (index == 0 ? "active" : "") }>
18+
<img src={ item.imageUrl } alt={ item.imageAlt } className="img-responsive" />
19+
<div className="carousel-caption">
20+
<p>
21+
{ item.text }
22+
<a className="btn btn-default" href={ item.learnMoreUrl }>Learn More</a>
23+
</p>
24+
</div>
25+
</div>
26+
)}
27+
</div>
28+
<a className="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
29+
<span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
30+
<span className="sr-only">Previous</span>
31+
</a>
32+
<a className="right carousel-control" href="#myCarousel" role="button" data-slide="next">
33+
<span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
34+
<span className="sr-only">Next</span>
35+
</a>
36+
</div>
37+
38+
{ /* Lists of links */ }
39+
<div className="row">
40+
{ linkLists.map((list, listIndex) =>
41+
<div key={listIndex} className="col-md-3">
42+
<h2>{ list.title }</h2>
43+
<ul>
44+
{ list.entries.map((entry, entryIndex) =>
45+
<li key={ entryIndex }>{ entry }</li>
46+
)}
47+
</ul>
48+
</div>
49+
)}
50+
</div>
51+
</div>;
52+
}
53+
}

‎templates/ReactSpa/ClientApp/components/NavMenu.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import * as React from 'react';
2+
import { Link } from 'react-router';
3+
export class NavMenu extends React.Component<void, void> {
4+
public render() {
5+
return <div className="navbar navbar-inverse navbar-fixed-top">
6+
<div className="container">
7+
<div className="navbar-header">
8+
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
9+
<span className="sr-only">Toggle navigation</span>
10+
<span className="icon-bar"></span>
11+
<span className="icon-bar"></span>
12+
<span className="icon-bar"></span>
13+
</button>
14+
<Link className="navbar-brand" to={ '/' }>WebApplicationBasic</Link>
15+
</div>
16+
<div className="navbar-collapse collapse">
17+
<ul className="nav navbar-nav">
18+
<li><Link to={ '/' }>Home</Link></li>
19+
<li><Link to={ '/about' }>About</Link></li>
20+
<li><Link to={ '/counter' }>Counter</Link></li>
21+
</ul>
22+
</div>
23+
</div>
24+
</div>;
25+
}
26+
}

‎templates/ReactSpa/ClientApp/css/site.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
body {
2+
padding-top: 50px;
3+
padding-bottom: 20px;
4+
}
5+
6+
/* Wrapping element */
7+
/* Set some basic padding to keep content from hitting the edges */
8+
.body-content {
9+
padding-left: 15px;
10+
padding-right: 15px;
11+
}
12+
13+
/* Set widths on the form inputs since otherwise they're 100% wide */
14+
input,
15+
select,
16+
textarea {
17+
max-width: 280px;
18+
}
19+
20+
/* Carousel */
21+
.carousel-caption p {
22+
font-size: 20px;
23+
line-height: 1.4;
24+
}

0 commit comments

Comments
 (0)