lessons one through 4

Author: albi0025

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

@@ -2,6 +2,6 @@ import React from 'react';
 
 export default class App extends React.Component {
   render() {
-    return <div>Hello!!, React Router!</div>;
+    return <div>Hey!!!</div>;
   }
 }

lessons/02-rendering-a-route/index.js

@@ -1,5 +1,15 @@
 import React from 'react';
 import { render } from 'react-dom';
 import App from './modules/App';
+import { Router, Route, hashHistory } from 'react-router';
+import About from './modules/About';
+import Repos from './modules/Repos';
 
-render(<App/>, document.getElementById('app'));
+
+render((
+  <Router history={hashHistory}>
+    <Route path="/" component={App}/>
+    <Route path="/repos" component={Repos}/>
+    <Route path="/about" component={About}/>
+  </Router>
+), document.getElementById('app'));

lessons/02-rendering-a-route/modules/About.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default class About extends React.Component {
+  render() {
+    return <div>About</div>;
+  }
+}

lessons/02-rendering-a-route/modules/Repos.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default class Repos extends React.Component {
+  render() {
+    return <div>Repos</div>;
+  }
+}

lessons/02-rendering-a-route/npm-debug.log

@@ -0,0 +1,45 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
+2 info using [email protected]
+3 info using [email protected]
+4 verbose run-script [ 'prestart', 'start', 'poststart' ]
+5 info lifecycle [email protected]~prestart: [email protected]
+6 silly lifecycle [email protected]~prestart: no script for prestart, continuing
+7 info lifecycle [email protected]~start: [email protected]
+8 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
+9 verbose lifecycle [email protected]~start: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/jenniferphelps/sites/codeschool/react-router-tutorial/lessons/02-rendering-a-route/node_modules/.bin:/Users/jenniferphelps/.rvm/gems/ruby-2.2.2/bin:/Users/jenniferphelps/.rvm/gems/ruby-2.2.2@global/bin:/Users/jenniferphelps/.rvm/rubies/ruby-2.2.2/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/jenniferphelps/.rvm/bin:/Applications/Postgres.app/Contents/Versions/9.4/bin
+10 verbose lifecycle [email protected]~start: CWD: /Users/jenniferphelps/sites/codeschool/react-router-tutorial/lessons/02-rendering-a-route
+11 silly lifecycle [email protected]~start: Args: [ '-c', 'webpack-dev-server --inline --content-base .' ]
+12 silly lifecycle [email protected]~start: Returned: code: 1  signal: null
+13 info lifecycle [email protected]~start: Failed to exec start script
+14 verbose stack Error: [email protected] start: `webpack-dev-server --inline --content-base .`
+14 verbose stack Exit status 1
+14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
+14 verbose stack     at emitTwo (events.js:106:13)
+14 verbose stack     at EventEmitter.emit (events.js:191:7)
+14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
+14 verbose stack     at emitTwo (events.js:106:13)
+14 verbose stack     at ChildProcess.emit (events.js:191:7)
+14 verbose stack     at maybeClose (internal/child_process.js:877:16)
+14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
+15 verbose pkgid [email protected]
+16 verbose cwd /Users/jenniferphelps/sites/codeschool/react-router-tutorial/lessons/02-rendering-a-route
+17 error Darwin 14.5.0
+18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
+19 error node v6.9.4
+20 error npm  v3.10.10
+21 error code ELIFECYCLE
+22 error [email protected] start: `webpack-dev-server --inline --content-base .`
+22 error Exit status 1
+23 error Failed at the [email protected] start script 'webpack-dev-server --inline --content-base .'.
+23 error Make sure you have the latest version of node.js and npm installed.
+23 error If you do, this is most likely a problem with the tutorial package,
+23 error not with npm itself.
+23 error Tell the author that this fails on your system:
+23 error     webpack-dev-server --inline --content-base .
+23 error You can get information on how to open an issue for this project with:
+23 error     npm bugs tutorial
+23 error Or if that isn't available, you can get their info via:
+23 error     npm owner ls tutorial
+23 error There is likely additional logging output above.
+24 verbose exit [ 1, true ]

lessons/03-navigating-with-link/modules/App.js

@@ -1,7 +1,16 @@
 import React from 'react';
+import { Link } from 'react-router';
 
 export default class App extends React.Component {
   render() {
-    return <div>Hello, React Router!</div>;
+    return (
+      <div>
+        <h1>React Router Tutorial</h1>
+        <ul role="nav">
+          <li><Link to="/about">About</Link></li>
+          <li><Link to="/repos">Repos</Link></li>
+        </ul>
+      </div>
+    );
   }
 }

lessons/04-nested-routes/index.js

@@ -7,8 +7,9 @@ import Repos from './modules/Repos';
 
 render((
   <Router history={hashHistory}>
-    <Route path="/" component={App}/>
-    <Route path="/repos" component={Repos}/>
-    <Route path="/about" component={About}/>
+    <Route path="/" component={App}>
+      <Route path="/repos" component={Repos}/>
+      <Route path="/about" component={About}/>
+    </Route>
   </Router>
 ), document.getElementById('app'));

lessons/04-nested-routes/modules/App.js

@@ -10,6 +10,7 @@ export default class App extends React.Component {
           <li><Link to="/about">About</Link></li>
           <li><Link to="/repos">Repos</Link></li>
         </ul>
+         {this.props.children}
       </div>
     );
   }

lessons/05-active-links/index.css

@@ -0,0 +1,3 @@
+.active {
+  color: green;
+}

lessons/05-active-links/index.html

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

lessons/05-active-links/modules/App.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import { Link } from 'react-router';
+import NavLink from './NavLink';
 
 export default class App extends React.Component {
   render() {
     return (
       <div>
         <h1>React Router Tutorial</h1>
         <ul role="nav">
-          <li><Link to="/about">About</Link></li>
-          <li><Link to="/repos">Repos</Link></li>
+          <li><NavLink to="/about" activeClassName="active">About</NavLink></li>
+          <li><NavLink to="/repos" activeClassName="active">Repos</NavLink></li>
         </ul>
         {this.props.children}
       </div>

lessons/05-active-links/modules/NavLink.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+export default extends React.Component {
+  render() {
+    return <Link {...this.props} activeClassName="active"/>
+  }
+})

lessons/npm-debug.log

@@ -0,0 +1,24 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
+2 info using [email protected]
+3 info using [email protected]
+4 verbose config Skipping project config: /Users/jenniferphelps/.npmrc. (matches userconfig)
+5 verbose stack Error: missing script: start
+5 verbose stack     at run (/usr/local/lib/node_modules/npm/lib/run-script.js:151:19)
+5 verbose stack     at /usr/local/lib/node_modules/npm/lib/run-script.js:61:5
+5 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:356:5
+5 verbose stack     at checkBinReferences_ (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:320:45)
+5 verbose stack     at final (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:354:3)
+5 verbose stack     at then (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:124:5)
+5 verbose stack     at ReadFileContext.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:295:20)
+5 verbose stack     at ReadFileContext.callback (/usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:78:16)
+5 verbose stack     at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:365:13)
+6 verbose cwd /Users/jenniferphelps/sites/codeschool/react-router-tutorial/lessons
+7 error Darwin 14.5.0
+8 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
+9 error node v6.9.4
+10 error npm  v3.10.10
+11 error missing script: start
+12 error If you need help, you may report this error at:
+12 error     <https://github.com/npm/npm/issues>
+13 verbose exit [ 1, true ]