mirror of
https://github.com/aspnet/JavaScriptServices.git
synced 2025-12-22 17:47:53 +00:00
Update ReactGrid sample to use newer server-side rendering APIs
This commit is contained in:
SteveSandersonMS
@@ -1,3 +1,3 @@
|
||||
{
|
||||
presets: ["es2015", "react"]
|
||||
"presets": ["es2015", "react"]
|
||||
}
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import createBrowserHistory from 'history/lib/createBrowserHistory';
|
||||
import ReactApp from './components/ReactApp.jsx';
|
||||
import { browserHistory } from 'react-router';
|
||||
import { ReactApp } from './components/ReactApp.jsx';
|
||||
import 'bootstrap/dist/css/bootstrap.css';
|
||||
|
||||
// In the browser, we render into a DOM node and hook up to the browser's history APIs
|
||||
var history = createBrowserHistory();
|
||||
ReactDOM.render(<ReactApp history={ history } />, document.getElementById('react-app'));
|
||||
ReactDOM.render(<ReactApp history={ browserHistory } />, document.getElementById('react-app'));
|
||||
|
||||
25
samples/react/ReactGrid/ReactApp/boot-server.jsx
Normal file
25
samples/react/ReactGrid/ReactApp/boot-server.jsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import { renderToString } from 'react-dom/server';
|
||||
import { match, RouterContext } from 'react-router';
|
||||
import createMemoryHistory from 'history/lib/createMemoryHistory';
|
||||
import { routes } from './components/ReactApp';
|
||||
React;
|
||||
|
||||
export default function renderApp (params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// Match the incoming request against the list of client-side routes
|
||||
match({ routes, location: params.location }, (error, redirectLocation, renderProps) => {
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
// Build an instance of the application
|
||||
const history = createMemoryHistory(params.url);
|
||||
const app = <RouterContext {...renderProps} />;
|
||||
|
||||
// Render it as an HTML string which can be injected into the response
|
||||
const html = renderToString(app);
|
||||
resolve({ html });
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -3,14 +3,16 @@ import { Router, Route } from 'react-router';
|
||||
import { PeopleGrid } from './PeopleGrid.jsx';
|
||||
import { PersonEditor } from './PersonEditor.jsx';
|
||||
|
||||
export default class ReactApp extends React.Component {
|
||||
export const routes = <Route>
|
||||
<Route path="/" component={ PeopleGrid } />
|
||||
<Route path="/:pageIndex" component={ PeopleGrid } />
|
||||
<Route path="/edit/:personId" component={ PersonEditor } />
|
||||
</Route>;
|
||||
|
||||
export class ReactApp extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Router history={this.props.history}>
|
||||
<Route path="/" component={PeopleGrid} />
|
||||
<Route path="/:pageIndex" component={PeopleGrid} />
|
||||
<Route path="/edit/:personId" component={PersonEditor} />
|
||||
</Router>
|
||||
<Router history={this.props.history} children={ routes } />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,77 +1,77 @@
|
||||
using Microsoft.AspNet.Builder;
|
||||
using Microsoft.AspNet.Hosting;
|
||||
using Microsoft.AspNet.SpaServices;
|
||||
using Microsoft.Extensions.Configuration;
|
||||
using Microsoft.Extensions.DependencyInjection;
|
||||
using Microsoft.Extensions.Logging;
|
||||
using Microsoft.Extensions.PlatformAbstractions;
|
||||
|
||||
namespace ReactExample
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
public Startup(IHostingEnvironment env, IApplicationEnvironment appEnv)
|
||||
{
|
||||
// Setup configuration sources.
|
||||
var builder = new ConfigurationBuilder()
|
||||
.SetBasePath(appEnv.ApplicationBasePath)
|
||||
.AddJsonFile("appsettings.json")
|
||||
.AddEnvironmentVariables();
|
||||
Configuration = builder.Build();
|
||||
}
|
||||
|
||||
public IConfigurationRoot Configuration { get; set; }
|
||||
|
||||
// This method gets called by the runtime.
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
// Add MVC services to the services container.
|
||||
services.AddMvc();
|
||||
}
|
||||
|
||||
// Configure is called after ConfigureServices is called.
|
||||
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
|
||||
{
|
||||
loggerFactory.MinimumLevel = LogLevel.Warning;
|
||||
loggerFactory.AddConsole();
|
||||
loggerFactory.AddDebug();
|
||||
|
||||
// Configure the HTTP request pipeline.
|
||||
|
||||
// Add the platform handler to the request pipeline.
|
||||
app.UseIISPlatformHandler();
|
||||
|
||||
// Add the following to the request pipeline only in development environment.
|
||||
if (env.IsDevelopment())
|
||||
{
|
||||
app.UseDeveloperExceptionPage();
|
||||
}
|
||||
else
|
||||
{
|
||||
// Add Error handling middleware which catches all application specific errors and
|
||||
// send the request to the following path or controller action.
|
||||
app.UseExceptionHandler("/Home/Error");
|
||||
}
|
||||
|
||||
// In dev mode, the JS/TS/etc is compiled and served dynamically and supports hot replacement.
|
||||
// In production, we assume you've used webpack to emit the prebuilt content to disk.
|
||||
if (env.IsDevelopment()) {
|
||||
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
|
||||
HotModuleReplacement = true,
|
||||
ReactHotModuleReplacement = true
|
||||
});
|
||||
}
|
||||
|
||||
// Add static files to the request pipeline.
|
||||
app.UseStaticFiles();
|
||||
|
||||
// Add MVC to the request pipeline.
|
||||
app.UseMvc(routes =>
|
||||
{
|
||||
routes.MapSpaFallbackRoute(
|
||||
name: "default",
|
||||
defaults: new { controller="Home", action = "Index" });
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
using Microsoft.AspNet.Builder;
|
||||
using Microsoft.AspNet.Hosting;
|
||||
using Microsoft.AspNet.SpaServices.Webpack;
|
||||
using Microsoft.Extensions.Configuration;
|
||||
using Microsoft.Extensions.DependencyInjection;
|
||||
using Microsoft.Extensions.Logging;
|
||||
using Microsoft.Extensions.PlatformAbstractions;
|
||||
|
||||
namespace ReactExample
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
public Startup(IHostingEnvironment env, IApplicationEnvironment appEnv)
|
||||
{
|
||||
// Setup configuration sources.
|
||||
var builder = new ConfigurationBuilder()
|
||||
.SetBasePath(appEnv.ApplicationBasePath)
|
||||
.AddJsonFile("appsettings.json")
|
||||
.AddEnvironmentVariables();
|
||||
Configuration = builder.Build();
|
||||
}
|
||||
|
||||
public IConfigurationRoot Configuration { get; set; }
|
||||
|
||||
// This method gets called by the runtime.
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
// Add MVC services to the services container.
|
||||
services.AddMvc();
|
||||
}
|
||||
|
||||
// Configure is called after ConfigureServices is called.
|
||||
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
|
||||
{
|
||||
loggerFactory.MinimumLevel = LogLevel.Warning;
|
||||
loggerFactory.AddConsole();
|
||||
loggerFactory.AddDebug();
|
||||
|
||||
// Configure the HTTP request pipeline.
|
||||
|
||||
// Add the platform handler to the request pipeline.
|
||||
app.UseIISPlatformHandler();
|
||||
|
||||
// Add the following to the request pipeline only in development environment.
|
||||
if (env.IsDevelopment())
|
||||
{
|
||||
app.UseDeveloperExceptionPage();
|
||||
}
|
||||
else
|
||||
{
|
||||
// Add Error handling middleware which catches all application specific errors and
|
||||
// send the request to the following path or controller action.
|
||||
app.UseExceptionHandler("/Home/Error");
|
||||
}
|
||||
|
||||
// In dev mode, the JS/TS/etc is compiled and served dynamically and supports hot replacement.
|
||||
// In production, we assume you've used webpack to emit the prebuilt content to disk.
|
||||
if (env.IsDevelopment()) {
|
||||
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
|
||||
HotModuleReplacement = true,
|
||||
ReactHotModuleReplacement = true
|
||||
});
|
||||
}
|
||||
|
||||
// Add static files to the request pipeline.
|
||||
app.UseStaticFiles();
|
||||
|
||||
// Add MVC to the request pipeline.
|
||||
app.UseMvc(routes =>
|
||||
{
|
||||
routes.MapSpaFallbackRoute(
|
||||
name: "default",
|
||||
defaults: new { controller="Home", action = "Index" });
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div id="react-app" asp-react-prerender-module="ReactApp/components/ReactApp.jsx"></div>
|
||||
<div id="react-app" asp-prerender-module="ReactApp/boot-server.jsx"></div>
|
||||
|
||||
@section scripts {
|
||||
<script src="/dist/main.js"></script>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
@using ReactExample
|
||||
@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"
|
||||
@addTagHelper "*, Microsoft.AspNet.ReactServices"
|
||||
@addTagHelper "*, Microsoft.AspNet.SpaServices"
|
||||
|
||||
@@ -4,13 +4,14 @@
|
||||
"dependencies": {
|
||||
"babel-core": "^6.4.5",
|
||||
"bootstrap": "^3.3.5",
|
||||
"domain-task": "^1.0.0",
|
||||
"formsy-react": "^0.17.0",
|
||||
"formsy-react-components": "^0.6.3",
|
||||
"griddle-react": "^0.2.14",
|
||||
"griddle-react": "^0.3.1",
|
||||
"history": "^1.12.6",
|
||||
"react": "^0.14.0",
|
||||
"react-dom": "^0.14.0",
|
||||
"react-router": "^1.0.0-rc3",
|
||||
"react": "^0.14.7",
|
||||
"react-dom": "^0.14.7",
|
||||
"react-router": "^2.0.0-rc5",
|
||||
"underscore": "^1.8.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
Reference in New Issue
Block a user