added example razzle + react router 3 (#539)

* added example razzle + react router 3

* Remove yarn.lock

* Fix pkg.json

Author: davidnguyen11

examples/with-react-router-3/.gitignore

@@ -0,0 +1,12 @@
+logs
+*.log
+npm-debug.log*
+.DS_Store
+
+coverage
+node_modules
+build
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

examples/with-react-router-3/README.md

@@ -0,0 +1,19 @@
+# Razzle x React Router 3
+
+## How to use
+Download the example [or clone the whole project](https://github.com/jaredpalmer/razzle.git):
+
+```bash
+curl https://codeload.github.com/jaredpalmer/razzle/tar.gz/master | tar -xz --strip=2 razzle-master/examples/with-react-router-3
+cd with-react-router-3
+```
+
+Install it and run:
+
+```bash
+yarn install
+yarn start
+```
+
+## Idea behind the example
+This is a basic, bare-bones example of how to use Razzle and React Router 3.

examples/with-react-router-3/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "razzle-examples-with-react-router-3",
+  "version": "0.1.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "razzle start",
+    "build": "razzle build",
+    "test": "razzle test --env=jsdom",
+    "prestart:prod": "razzle build",
+    "start:prod": "NODE_ENV=production node build/server.js"
+  },
+  "dependencies": {
+    "express": "^4.16.2",
+    "prop-types": "^15.6.1",
+    "razzle": "^0.8.12",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-router": "^3.2.0",
+    "react-router-redux": "4.0.8",
+    "react-router-scroll": "0.4.2"
+  }
+}

examples/with-react-router-3/public/favicon.ico

@@ -0,0 +1,2 @@
+User-agent: *
+

examples/with-react-router-3/public/robots.txt

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Link } from 'react-router';
+import App from './App';
+import './Home.css';
+
+class About extends React.Component {
+  render() {
+    return (
+      <App>
+        <div className="Home">
+          <div className="Home-header">
+            <h2>About page</h2>
+          </div>
+          <p>
+            <Link to="home">Home</Link>
+          </p>
+        </div>
+      </App>
+    );
+  }
+}
+
+export default About;

examples/with-react-router-3/src/About.js

@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}

examples/with-react-router-3/src/App.css

@@ -0,0 +1,10 @@
+import React from 'react';
+import './App.css';
+
+class App extends React.Component {
+  render() {
+    return <div>{this.props.children}</div>;
+  }
+}
+
+export default App;

examples/with-react-router-3/src/App.js

@@ -0,0 +1,37 @@
+.Home {
+  text-align: center;
+}
+
+.Home-logo {
+  animation: Home-logo-spin infinite 20s linear;
+  height: 80px;
+}
+
+.Home-header {
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+}
+
+.Home-intro {
+  font-size: large;
+}
+
+.Home-resources {
+  list-style: none;
+}
+
+.Home-resources > li {
+  display: inline-block;
+  padding: 1rem;
+}
+
+@keyframes Home-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

examples/with-react-router-3/src/Home.css

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Link } from 'react-router';
+import logo from './react.svg';
+import App from './App';
+import './Home.css';
+
+class Home extends React.Component {
+  render() {
+    return (
+      <App>
+        <div className="Home">
+          <div className="Home-header">
+            <img src={logo} className="Home-logo" alt="logo" />
+            <h2>Welcome to Razzle</h2>
+          </div>
+          <p className="Home-intro">
+            To get started, edit <code>src/App.js</code> or{' '}
+            <code>src/Home.js</code> and save to reload.
+          </p>
+          <p>
+            <Link to="about">About</Link>
+          </p>
+          <ul className="Home-resources">
+            <li>
+              <a href="https://github.com/jaredpalmer/razzle">Docs</a>
+            </li>
+            <li>
+              <a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
+            </li>
+            <li>
+              <a href="https://palmer.chat">Community Slack</a>
+            </li>
+          </ul>
+        </div>
+      </App>
+    );
+  }
+}
+
+export default Home;