add react router and render server

Author: hunghkit

README.md

@@ -7,20 +7,30 @@
 3. Start mongodb: `mongod`
 4. Start dev reactjs: `yarn start` || `npm start`
 5. Start dev server: `yarn run server` || `npm run server`
+6. Build: `yarn run build` || `npm run build`
+7. Preview after build: `yarn run prod` || `npm run prod`
 ## Deployment
 - Setup:
 1. `heroku create $APP_NAME`
-2. `heroku buildpacks:add --index 1`
-3. `https://github.com/hunghkit/create-react-app-buildpack.git `
-4. `heroku buildpacks:add --index 2 heroku/nodejs`
+2. `heroku buildpacks:add --index 1 https://github.com/mars/create-react-app-buildpack.git `
+3. `heroku buildpacks:add --index 2 heroku/nodejs`
 - Deploy:
 `git push heroku yourbanch:master`
+## Done
+1. Config data with create-react-app
+2. Use scss with node-sass
+3. Renderserver side
+4. Deploy with heroku
+5. React router
+6. Example with REST
 ## Todo next
 1. `redux` or `mobx`
-2. `react-router`
-3. `render server`
 4. `deploy to aws`
-## Noti
+## Relation
 1. With reactjs see more [create react app](https://github.com/facebookincubator/create-react-app)
 2. Proxy with development, you change port or url in proxy in package.json
+3. React router dom see more [click here](https://github.com/ReactTraining/react-router)
+4. Seo with reactjs see more [click here](https://github.com/nfl/react-helmet)
+5. Api with express see more [click here](https://expressjs.com/en/guide/routing.html)
+6. Database with mongoosejs see more [click here](http://mongoosejs.com/docs/guide.html)
 ## Licence: MIT

app/__test__/App.test.js renamed to app/__test__/components/Home.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import Home from 'components/Home';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
+  ReactDOM.render(<Home />, div);
 });

app/__test__/components/Task.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Task from 'components/Task';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Task />, div);
+});

app/components/Home/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import logo from 'assets/images/logo.svg';
 import Task from 'components/Task';
+import axios from 'axios';
 
 class Home extends Component {
   constructor(props) {
@@ -12,8 +13,8 @@ class Home extends Component {
   }
 
   componentWillMount() {
-    fetch('/api/v1.0.0/connected')
-      .then((res) => res.json())
+    axios.get('/api/v1.0.0/connected')
+      .then((res) => res.data)
       .then(({ message }) => this.setState({ message }))
       .catch((err) => this.setState({ message: err.toString() }))
   }

app/components/Task/Form.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import axios from 'axios';
 
 export class Form extends Component {
   static propTypes = {
@@ -30,24 +31,18 @@ export class Form extends Component {
     e.preventDefault();
     const { id, title } = this.state;
     let url = '/api/v1.0.0/tasks/';
-    let method = 'POST';
+    let method = 'post';
     let isNew = true;
     if (id) {
       url += id;
-      method = 'PUT';
+      method = 'put';
       isNew = false;
     }
 
     this.setState({ error: '' });
 
-    fetch(url, {
-        method,
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ task: { title } })
-      })
-      .then((res) => res.json())
+    axios[method](url, { task: { title } })
+      .then((res) => res.data)
       .then(({ task, success, message }) => {
         if(success) {
           this.setState({ title: '' });

app/components/Task/index.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import Form from './Form';
+import axios from 'axios';
 
 export class Task extends Component {
   constructor(props) {
@@ -14,8 +15,8 @@ export class Task extends Component {
   }
 
   componentDidMount() {
-    fetch('/api/v1.0.0/tasks')
-      .then((res) => res.json())
+    axios.get('/api/v1.0.0/tasks')
+      .then((res) => res.data)
       .then(({ tasks }) => this.setState({ tasks: tasks.reduce((obj, item) => ({ ...obj, [item._id]: item }), {}) }))
       .catch((err) => this.setState({ message: err.toString() }))
   }
@@ -31,7 +32,7 @@ export class Task extends Component {
 
   onDelete(e, id) {
     e.preventDefault()
-    if (window.confirm("Are you sure?")) {
+    if (window.confirm("Are you sure?")) { // eslint-disable-line
       const { tasks = {} } = this.state;
       delete tasks[id];
       this.setState({ tasks: { ...tasks } })
@@ -60,7 +61,7 @@ export class Task extends Component {
       <div className="task-component">
         <Form ref={(ref) => this.form = ref} onSuccess={this.onSuccess} />
         <ul>
-          {Object.values(tasks).map(this.renderTask)}
+          {Object.keys(tasks).map((key, index) => this.renderTask(tasks[key], index))}
         </ul>
       </div>
     );

app/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import './assets/scss/theme.scss';
-import Home from './components/Home';
+import { render } from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
+import App from 'pages';
 
-ReactDOM.render(<Home />, document.getElementById('root'));
+render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

app/pages/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Helmet from "react-helmet";
+import { Switch, Route } from 'react-router-dom';
+import 'assets/scss/theme.scss';
+
+import Home from 'components/Home';
+
+const Pages = () => (
+  <div className="page-container">
+    <Helmet
+      htmlAttributes={{lang: "en", amp: undefined}} // amp takes no value
+      titleTemplate="%s | ReactJS Begin"
+      titleAttributes={{ itemprop: "name", lang: "en" }}
+      meta={[
+        {name: "description", content: "Server side rendering with reactjs begin"},
+        {name: "viewport", content: "width=device-width, initial-scale=1"},
+      ]}
+    />
+    <Switch router={{}}>
+      <Route exact path='/' component={Home} />
+    </Switch>
+  </div>
+);
+
+export default Pages;

app/renderServer/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import { StaticRouter } from 'react-router-dom';
+import { Helmet } from "react-helmet";
+import Template from './template';
+import App from 'pages';
+
+export default (assets) =>
+  (req, res, next) => {
+    const context = {};
+    const markup = ReactDOMServer.renderToString(
+      <StaticRouter location={req.url} context={context}>
+        <App />
+      </StaticRouter>
+    );
+    const helmet = Helmet.renderStatic();
+
+    res.status(200).send(Template({
+      markup,
+      helmet,
+      assets,
+    }));
+  };

app/renderServer/template.js

@@ -0,0 +1,15 @@
+export default ({ markup, helmet, assets }) => (`
+  <!doctype html>
+  <html ${helmet.htmlAttributes.toString()}>
+    <head>
+      ${helmet.title.toString()}
+      ${helmet.meta.toString()}
+      ${helmet.link.toString()}
+      <link href="/${assets['main.css']}" rel="stylesheet">
+    </head>
+    <body ${helmet.bodyAttributes.toString()}>
+      <div id="root">${markup}</div>
+      <script src="/static/js/bundle.js" async></script>
+    </body>
+  </html>
+`);