whatadewitt/App.js

## App.js
import React, { Component } from "react";
import { Route } from "react-router-dom";
import "./App.css";
import Link from "./Link";
import Home from "./Home";
import About from "./About";
import Topics from "./Topics";

class App extends Component {
  componentDidMount() {
    this.setState({ ...window.props });
  }

  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/" render={props => <Home />} />
        <Route path="/about" render={props => <About {...this.state} />} />
        <Route path="/topics" render={props => <Topics {...this.state} />} />
      </div>
    );
  }
}

export default App;

## ClientApp.js
import React from "react";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const ClientApp = () => (
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

export default ClientApp;

## functions.php
<?php

function decho( $s ) {
	echo '<pre>';
	echo print_r( $s, 1 );
	echo '</pre>';
}

function init() {
	global $props, $data;

	switch ( $_SERVER['REQUEST_URI'] ) {
		case '/topics':
			$props = array(
				'foo' => 'baz',
			);
			break;

		case '/about':
			$props = array(
				'foo' => 'bar',
			);
			break;

		default:
			$props = array();
			break;
	};

	$v8    = new V8Js();
	$react = array();
	// stubs, react
	$react[] = 'var console = {warn: function(){}, error: print};';
	$react[] = 'var global = global || this, self = self || this, window = window || this;';
	$react[] = file_get_contents( __DIR__ . '/test-app/node_modules/react/umd/react.production.min.js' );
	$react[] = file_get_contents( __DIR__ . '/test-app/node_modules/react-dom/umd/react-dom.production.min.js' );
	$react[] = file_get_contents( __DIR__ . '/test-app/node_modules/react-dom/umd/react-dom-server.browser.production.min.js' );
	// app's components
	$react[] = 'var React = global.React, ReactDOM = global.ReactDOM, ReactDOMServer = global.ReactDOMServer;';
	$react[] = file_get_contents( __DIR__ . '/static/js/main.5cb5dbc3.js' );
	$react[] = sprintf(
		'print(ReactDOMServer.renderToString(React.createElement(%s, %s)))',
		'App',
		json_encode( $props ));
	$react[] = ';';

	try {
		$data = $v8->executeString( implode( ";\n", $react ) );
	} catch ( Exception $e ) {
		echo '<h1>', $e->getMessage(), '</h1>';
		echo '<pre>', $e->getTraceAsString(), '</pre>';
		exit;
	}

	return;
}

## index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import ClientApp from "./ClientApp";

if ("undefined" !== typeof document) {
  ReactDOM.render(<ClientApp />, document.getElementById("root"));
}

global.App = App;

## index.php
<?php
	ini_set( 'display_errors', 1 );
	ini_set( 'display_startup_errors', 1 );
	error_reporting( E_ALL );

	require_once 'functions.php';

	init();
?>
<!doctype html>

<html class="no-js" lang="">

<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>Hello, React PHP World</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="static/css/main.c17080f1.css">
</head>

<body>
	<!--[if lte IE 9]>
		<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
	<![endif]-->
	<div id="root"><?php echo $data; ?></div>

	<script src="static/js/main.5cb5dbc3.js"></script>
</body>
</html>

## Link.js
import React, { Component } from "react";
import { Link as ReactLink } from "react-router-dom";

export default class Link extends Component {
  parseTo(to) {
    let parser = document.createElement("a");
    parser.href = to;
    return parser;
  }

  isInternal(to) {
    // If it's a relative url such as '/path', 'path' and does not contain a protocol we can assume it is internal.

    if (to.indexOf("://") === -1) return true;

    const toLocation = this.parseTo(to);
    return window.location.hostname === toLocation.hostname;
  }

  render() {
    const { to, children, ...rest } = this.props;
    const isInternal = this.isInternal(to);

    if (isInternal) {
      return (
        <ReactLink to={to} {...rest}>
          {children}
        </ReactLink>
      );
    } else {
      return (
        <a href={to} target="_blank" {...rest}>
          {children}
        </a>
      );
    }
  }
}
	import React, { Component } from "react";
	import { Route } from "react-router-dom";
	import "./App.css";
	import Link from "./Link";
	import Home from "./Home";
	import About from "./About";
	import Topics from "./Topics";

	class App extends Component {
	componentDidMount() {
	this.setState({ ...window.props });
	}

	render() {
	return (
	<div>
	<ul>
	<li>
	<Link to="/">Home</Link>
	</li>
	<li>
	<Link to="/about">About</Link>
	</li>
	<li>
	<Link to="/topics">Topics</Link>
	</li>
	</ul>

	<hr />

	<Route exact path="/" render={props => <Home />} />
	<Route path="/about" render={props => <About {...this.state} />} />
	<Route path="/topics" render={props => <Topics {...this.state} />} />
	</div>
	);
	}
	}

	export default App;
	import React from "react";
	import { BrowserRouter } from "react-router-dom";
	import App from "./App";

	const ClientApp = () => (
	<BrowserRouter>
	<App />
	</BrowserRouter>
	);

	export default ClientApp;
	<?php

	function decho( $s ) {
	echo '<pre>';
	echo print_r( $s, 1 );
	echo '</pre>';
	}

	function init() {
	global $props, $data;

	switch ( $_SERVER['REQUEST_URI'] ) {
	case '/topics':
	$props = array(
	'foo' => 'baz',
	);
	break;

	case '/about':
	$props = array(
	'foo' => 'bar',
	);
	break;

	default:
	$props = array();
	break;
	};

	$v8 = new V8Js();
	$react = array();
	// stubs, react
	$react[] = 'var console = {warn: function(){}, error: print};';
	$react[] = 'var global = global \|\| this, self = self \|\| this, window = window \|\| this;';
	$react[] = file_get_contents( __DIR__ . '/test-app/node_modules/react/umd/react.production.min.js' );
	$react[] = file_get_contents( __DIR__ . '/test-app/node_modules/react-dom/umd/react-dom.production.min.js' );
	$react[] = file_get_contents( __DIR__ . '/test-app/node_modules/react-dom/umd/react-dom-server.browser.production.min.js' );
	// app's components
	$react[] = 'var React = global.React, ReactDOM = global.ReactDOM, ReactDOMServer = global.ReactDOMServer;';
	$react[] = file_get_contents( __DIR__ . '/static/js/main.5cb5dbc3.js' );
	$react[] = sprintf(
	'print(ReactDOMServer.renderToString(React.createElement(%s, %s)))',
	'App',
	json_encode( $props ));
	$react[] = ';';

	try {
	$data = $v8->executeString( implode( ";\n", $react ) );
	} catch ( Exception $e ) {
	echo '<h1>', $e->getMessage(), '</h1>';
	echo '<pre>', $e->getTraceAsString(), '</pre>';
	exit;
	}

	return;
	}
	import React from "react";
	import ReactDOM from "react-dom";
	import "./index.css";
	import App from "./App";
	import ClientApp from "./ClientApp";

	if ("undefined" !== typeof document) {
	ReactDOM.render(<ClientApp />, document.getElementById("root"));
	}

	global.App = App;
	<?php
	ini_set( 'display_errors', 1 );
	ini_set( 'display_startup_errors', 1 );
	error_reporting( E_ALL );

	require_once 'functions.php';

	init();
	?>
	<!doctype html>

	<html class="no-js" lang="">

	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>Hello, React PHP World</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="static/css/main.c17080f1.css">
	</head>

	<body>
	<!--[if lte IE 9]>
	<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
	<![endif]-->
	<div id="root"><?php echo $data; ?></div>

	<script src="static/js/main.5cb5dbc3.js"></script>
	</body>
	</html>
	import React, { Component } from "react";
	import { Link as ReactLink } from "react-router-dom";

	export default class Link extends Component {
	parseTo(to) {
	let parser = document.createElement("a");
	parser.href = to;
	return parser;
	}

	isInternal(to) {
	// If it's a relative url such as '/path', 'path' and does not contain a protocol we can assume it is internal.

	if (to.indexOf("://") === -1) return true;

	const toLocation = this.parseTo(to);
	return window.location.hostname === toLocation.hostname;
	}

	render() {
	const { to, children, ...rest } = this.props;
	const isInternal = this.isInternal(to);

	if (isInternal) {
	return (
	<ReactLink to={to} {...rest}>
	{children}
	</ReactLink>
	);
	} else {
	return (
	<a href={to} target="_blank" {...rest}>
	{children}
	</a>
	);
	}
	}
	}