lessons 12 finish

Author: r2fresh

lessons/01-setting-up/index.js

@@ -9,7 +9,7 @@ import Repo from './modules/Repo'
 import Home from './modules/Home'
 
 render((
-    <Router history={browserHistory}>
+    <Router history={hashHistory}>
         <Route path="/" component={App}>
             <IndexRoute component={Home}/>
             <Route path="/repos" component={Repos}>

lessons/01-setting-up/modules/Repos.js

@@ -1,8 +1,30 @@
 import React, { Component } from 'react';
 import {Link} from 'react-router';
-import NavLink from './NavLink'
+import NavLink from './NavLink';
+import { hashHistory } from 'react-router';
 
 class Repos extends Component {
+    //
+    // contextType = {
+    //     router : React.PropTypes.object
+    // }
+
+    // constructor(props, context) {
+    //   super(...arguments);
+    //   this.context = context;
+    // }
+
+    handleSubmit(event) {
+        //console.log(this)
+        event.preventDefault();
+        const userName = event.target.elements[0].value;
+        const repo = event.target.elements[1].value;
+        const path = `/repos/${userName}/${repo}`;
+        //console.log(path)
+        //hashHistory.push(path)
+        this.context.router.push(path)
+    }
+
     render(){
         return (
             <div>
@@ -11,6 +33,14 @@ class Repos extends Component {
                 <ul>
                     <li><NavLink to='repos/reactjs/react-router'>React Router</NavLink></li>
                     <li><NavLink to='repos/facebook/react'>React</NavLink></li>
+
+                    <li>
+                        <form onSubmit={this.handleSubmit.bind(this)}>
+                            <input type='text' placeholder='userName'/> / {' '}
+                            <input type='text' placeholder='repo'/>{' '}
+                            <button type='submit'>GO</button>
+                        </form>
+                    </li>
                 </ul>
 
                 {this.props.children}
@@ -19,4 +49,8 @@ class Repos extends Component {
     }
 }
 
+Repos.contextTypes = {
+    router : React.PropTypes.object
+}
+
 export default Repos;

lessons/01-setting-up/npm-debug.log

@@ -0,0 +1,42 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/home/r2fresh-kt-ubuntu/.nvm/v4.5.0/bin/node',
+1 verbose cli   '/home/r2fresh-kt-ubuntu/.nvm/v4.5.0/bin/npm',
+1 verbose cli   'start' ]
+2 info using [email protected]
+3 info using [email protected]
+4 verbose run-script [ 'prestart', 'start', 'poststart' ]
+5 info prestart [email protected]
+6 info start [email protected]
+7 verbose unsafe-perm in lifecycle true
+8 info [email protected] Failed to exec start script
+9 verbose stack Error: [email protected] start: `if-env NODE_ENV=production && npm run start:prod || npm run start:dev`
+9 verbose stack Exit status 1
+9 verbose stack     at EventEmitter.<anonymous> (/home/r2fresh-kt-ubuntu/.nvm/v4.5.0/lib/node_modules/npm/lib/utils/lifecycle.js:217:16)
+9 verbose stack     at emitTwo (events.js:87:13)
+9 verbose stack     at EventEmitter.emit (events.js:172:7)
+9 verbose stack     at ChildProcess.<anonymous> (/home/r2fresh-kt-ubuntu/.nvm/v4.5.0/lib/node_modules/npm/lib/utils/spawn.js:24:14)
+9 verbose stack     at emitTwo (events.js:87:13)
+9 verbose stack     at ChildProcess.emit (events.js:172:7)
+9 verbose stack     at maybeClose (internal/child_process.js:829:16)
+9 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
+10 verbose pkgid [email protected]
+11 verbose cwd /home/r2fresh-kt-ubuntu/workspace/react-router-tutorial/lessons/01-setting-up
+12 error Linux 4.4.0-36-generic
+13 error argv "/home/r2fresh-kt-ubuntu/.nvm/v4.5.0/bin/node" "/home/r2fresh-kt-ubuntu/.nvm/v4.5.0/bin/npm" "start"
+14 error node v4.5.0
+15 error npm  v2.15.9
+16 error code ELIFECYCLE
+17 error [email protected] start: `if-env NODE_ENV=production && npm run start:prod || npm run start:dev`
+17 error Exit status 1
+18 error Failed at the [email protected] start script 'if-env NODE_ENV=production && npm run start:prod || npm run start:dev'.
+18 error This is most likely a problem with the tutorial package,
+18 error not with npm itself.
+18 error Tell the author that this fails on your system:
+18 error     if-env NODE_ENV=production && npm run start:prod || npm run start:dev
+18 error You can get information on how to open an issue for this project with:
+18 error     npm bugs tutorial
+18 error Or if that isn't available, you can get their info via:
+18 error
+18 error     npm owner ls tutorial
+18 error There is likely additional logging output above.
+19 verbose exit [ 1, true ]

lessons/01-setting-up/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
       "start" : "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
-      "start:dev" : "webpack-dev-server --inline --content-base . --history-api-fallback",
+      "start:dev" : "webpack-dev-server --inline --content-base public --history-api-fallback",
       "start:prod" : "webpack && node server.js"
   },
   "author": "",

lessons/01-setting-up/index.css renamed to lessons/01-setting-up/public/index.css

@@ -4,5 +4,4 @@
 <link rel="stylesheet" href="/index.css">
 <title>My First React Router App</title>
 <div id=app></div>
-<div>aaaa</div>
-<!--<script src="/bundle.js"></script>-->
+<script src="/bundle.js"></script>

lessons/01-setting-up/index.html renamed to lessons/01-setting-up/public/index.html

@@ -1,12 +1,16 @@
 var express = require('express')
 var path = require('path')
+var compression = require('compression')
 
 var app = express()
 
-app.use(express.static(__dirname))
+app.use(compression())
+
+// serve our static stuff like index.css
+app.use(express.static(path.join(__dirname, 'public')))
 
 app.get('*', function(req, res) {
-    res.sendFile(path.join(__dirname, 'index.html'))
+    res.sendFile(path.join(__dirname, 'public', 'index.html'))
 })
 
 var PORT = process.env.PORT || 8080

lessons/01-setting-up/server.js

@@ -1,15 +1,26 @@
+var webpack = require('webpack');
+
 module.exports = {
-  entry: './index.js',
+    entry: './index.js',
 
-  output: {
-      path : 'public',
-      filename: 'bundle.js',
-      publicPath: '/'
-  },
+    output: {
+        path : 'public',
+        filename: 'bundle.js',
+        publicPath: '/'
+    },
 
-  module: {
-    loaders: [
-      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
-    ]
-  }
+    module: {
+        loaders: [
+          { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
+        ]
+    },
+    plugins: process.env.NODE_ENV === 'production' ? [
+        new webpack.optimize.DedupePlugin(),
+        new webpack.optimize.OccurrenceOrderPlugin(),
+        new webpack.optimize.UglifyJsPlugin({
+            compress:{
+                warnings : false
+            }
+        })
+    ] : [],
 }

lessons/01-setting-up/webpack.config.js

@@ -1,21 +1,21 @@
 0 info it worked if it ends with ok
-1 verbose cli [ '/Users/r2fresh/.nvm/versions/v4.5.0/bin/node',
-1 verbose cli   '/Users/r2fresh/.nvm/versions/v4.5.0/bin/npm',
+1 verbose cli [ '/home/r2fresh-kt-ubuntu/.nvm/v4.5.0/bin/node',
+1 verbose cli   '/home/r2fresh-kt-ubuntu/.nvm/v4.5.0/bin/npm',
 1 verbose cli   'start' ]
 2 info using [email protected]
 3 info using [email protected]
-4 verbose stack Error: ENOENT: no such file or directory, open '/Users/r2fresh/workspace/react-router-tutorial/package.json'
+4 verbose stack Error: ENOENT: no such file or directory, open '/home/r2fresh-kt-ubuntu/workspace/react-router-tutorial/package.json'
 4 verbose stack     at Error (native)
-5 verbose cwd /Users/r2fresh/workspace/react-router-tutorial
-6 error Darwin 15.6.0
-7 error argv "/Users/r2fresh/.nvm/versions/v4.5.0/bin/node" "/Users/r2fresh/.nvm/versions/v4.5.0/bin/npm" "start"
+5 verbose cwd /home/r2fresh-kt-ubuntu/workspace/react-router-tutorial
+6 error Linux 4.4.0-36-generic
+7 error argv "/home/r2fresh-kt-ubuntu/.nvm/v4.5.0/bin/node" "/home/r2fresh-kt-ubuntu/.nvm/v4.5.0/bin/npm" "start"
 8 error node v4.5.0
 9 error npm  v2.15.9
-10 error path /Users/r2fresh/workspace/react-router-tutorial/package.json
+10 error path /home/r2fresh-kt-ubuntu/workspace/react-router-tutorial/package.json
 11 error code ENOENT
 12 error errno -2
 13 error syscall open
-14 error enoent ENOENT: no such file or directory, open '/Users/r2fresh/workspace/react-router-tutorial/package.json'
+14 error enoent ENOENT: no such file or directory, open '/home/r2fresh-kt-ubuntu/workspace/react-router-tutorial/package.json'
 14 error enoent This is most likely not a problem with npm itself
 14 error enoent and is related to npm not being able to find a file.
 15 verbose exit [ -2, true ]