linn · lewisrenfrew · Nov 16, 2021 · Nov 16, 2021 · Nov 16, 2021 · Nov 17, 2021
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,8 @@
+{
+	"presets": ["@babel/preset-react", "@babel/preset-env"],
+	"plugins": [
+		"@babel/proposal-object-rest-spread",
+		"@babel/plugin-syntax-dynamic-import",
+		"@babel/proposal-class-properties"
+	]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,82 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# NCrunch
+*ncrunch*
+*NCrunch*
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# dotnet
+bin/
+obj/
+.vs/
+*.user
+*.csproj.DotSettings
+
+project.lock.json
+config.json
+
+# tests
+TestResult.xml
+
+# ncrunch
+*.ncrunchsolution
+*.ncrunchsolution.user
+
+# nuget
+packages/
+
+# ef helpers
+int-update.sh
+sys-update.sh
+prod-update.sh
+
+src/Service.Host/client/build/
+
+src/Service.Host/.local-chromium*
+
+config.env
+local-update.sh
+
+.vscode/
+
+# StyleCop caches
+*StyleCop.Cache
+
+#webpack builds
+wwwroot/dist/*
+build/*
diff --git a/wwwroot/Components/Sample.jsx → Content/components/Sample.jsx b/wwwroot/Components/Sample.jsx → Content/components/Sample.jsx
@@ -1,5 +1,8 @@
-function Sample({name}) {
+var React = require('react');
+
+
+export default function Sample({name}) {
         return <div>
                 <h1>Hello {name} I am a react component that was rendered on the server :)</h1>
             </div>;
-    }
+}
diff --git a/Content/components/expose-components.js b/Content/components/expose-components.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactDOMServer from 'react-dom/server';
+
+import Sample from './Sample.jsx';
+
+global.Components = { Sample };
diff --git a/Startup.cs b/Startup.cs
@@ -52,25 +52,21 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
             app.UseHttpsRedirection();
 
             // Initialise ReactJS.NET. Must be before static files.
-            app.UseReact(config =>
-                {
-                });
+            app.UseReact(
+                config =>
+                    {
+                        config.SetReuseJavaScriptEngines(true).SetLoadBabel(true).SetLoadReact(true)
+                            .SetReactAppBuildPath("~/dist");
+                    });
 
             app.UseStaticFiles();
 
             app.UseRouting();
 
             app.UseAuthorization();
 
-            app.UseMvc(routes =>
-                {
-                    routes.MapRoute(
-                        name: "default",
-                        template: "{controller=Home}/{action=Index}");
-                });
-
-            ReactSiteConfiguration.Configuration = new ReactSiteConfiguration()
-                .AddScript("~/Components/Sample.jsx");
+            // todo - better routing?
+            app.UseMvc(routes => { routes.MapRoute(name: "default", template: "{controller=Home}/{action=Index}"); });
         }
     }
 }
diff --git a/Views/Home/Index.cshtml b/Views/Home/Index.cshtml
@@ -1,16 +1,13 @@
-@{
-    Layout = null;
+
+@model ServerSideReactComponents.Person
+
+@using React.AspNet
+
+@{
+    Layout = "_Layout";
+
 }
-@model Person
 
-<html>
-<head>
-    <title>Hello React</title>
-</head>
-<body>
-    @Html.React("Sample", new
-                                  {
-                                      name = Model.Name
-                                  })
-</body>
-</html>
+@Html.React("Components.Sample", new { name = Model.Name })
+@{
+}
diff --git a/Views/Shared/_Layout.cshtml b/Views/Shared/_Layout.cshtml
@@ -0,0 +1,12 @@
+@using React.AspNet
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+</head>
+<body>
+@RenderBody()
+@Html.ReactGetScriptPaths()
+@Html.ReactInitJavaScript()
+</body>
+</html>
diff --git a/Views/_ViewImports.cshtml b/Views/_ViewImports.cshtml
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>webpack dev server</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+<script src="./build/app.js"></script>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,7 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+import Sample from './Content/components/Sample.jsx';
+  ReactDOM.render(
+    <Sample />,
+    document.getElementById('root')
+);