Skip to content

Instantly share code, notes, and snippets.

View alexnm's full-sized avatar

Alex Moldovan alexnm

View GitHub Profile
@alexnm
alexnm / Layout.js
Created March 25, 2018 20:28
Basic layout with Routes
import { Link, Switch, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
export default class Layout extends React.Component {
/* ... */
render() {
return (
import { Link, Switch, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
export default class Layout extends React.Component {
/* ... */
render() {
return (
@alexnm
alexnm / client.js
Created March 25, 2018 20:18
Basic client with hydrate
import ReactDOM from "react-dom";
import Layout from "./components/Layout";
const app = document.getElementById( "app" );
ReactDOM.hydrate( <Layout />, app );
@alexnm
alexnm / server.js
Created March 25, 2018 17:11
Full server.js example with react-helmet
/* ... */
import Helmet from "react-helmet";
/* ... */
app.get( "/*", ( req, res ) => {
/* ... */
const jsx = (
<ReduxProvider store={ store }>
<StaticRouter context={ context } location={ req.url }>
<Layout />
@alexnm
alexnm / contact.js
Created March 25, 2018 17:08
Using react-helmet
import React from "react";
import Helmet from "react-helmet";
const Contact = () => (
<div>
<h2>This is the contact page</h2>
<Helmet>
<title>Contact Page</title>
<meta name="description" content="This is a proof of concept for React SSR" />
</Helmet>
@alexnm
alexnm / server.js
Created March 25, 2018 16:50
Complete example with data fetched on the server
/* ... */
import { StaticRouter, matchPath } from "react-router-dom";
import routes from "./routes";
/* ... */
app.get( "/*", ( req, res ) => {
/* ... */
const dataRequirements =
@alexnm
alexnm / Home.js
Created March 25, 2018 16:45
Static declaration of data requirements
/* ... */
import { fetchData } from "../store";
class Home extends React.Component {
/* ... */
render( ) {
const { circuits } = this.props;
return (
@alexnm
alexnm / routes.js
Created March 25, 2018 11:48
Routes config file
export default [
{
path: "/",
component: Home,
exact: true,
},
{
path: "/about",
component: About,
exact: true,
@alexnm
alexnm / client.js
Created March 24, 2018 16:32
The client file for handling redux with react ssr
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import { Provider as ReduxProvider } from "react-redux";
import Layout from "./components/Layout";
import createStore from "./store";
const store = createStore( window.REDUX_DATA );
@alexnm
alexnm / server.js
Created March 24, 2018 16:30
Server file handling redux state
/* ... */
import { Provider as ReduxProvider } from "react-redux";
/* ... */
app.get( "/*", ( req, res ) => {
const context = { };
const store = createStore( );
store.dispatch( initializeSession( ) );