From 2a99c5692b623b6e7cd50cc14a167216b3bb4688 Mon Sep 17 00:00:00 2001 From: rich-farr Date: Thu, 7 Jul 2016 11:02:56 +1200 Subject: [PATCH 1/8] Add some shiz --- lessons/01-setting-up/index.js | 14 +++++++++++++- lessons/01-setting-up/modules/About.js | 7 +++++++ lessons/01-setting-up/modules/App.js | 12 +++++++++++- lessons/01-setting-up/modules/Repos.js | 7 +++++++ 4 files changed, 38 insertions(+), 2 deletions(-) create mode 100644 lessons/01-setting-up/modules/About.js create mode 100644 lessons/01-setting-up/modules/Repos.js diff --git a/lessons/01-setting-up/index.js b/lessons/01-setting-up/index.js index 898eaa43..f8fe4cba 100644 --- a/lessons/01-setting-up/index.js +++ b/lessons/01-setting-up/index.js @@ -1,4 +1,16 @@ import React from 'react' import { render } from 'react-dom' import App from './modules/App' -render(, document.getElementById('app')) +import { Router, Route, hashHistory } from 'react-router' +import About from './modules/About' +import Repos from './modules/Repos' + + +render(( + + + + + + + ), document.getElementById('app')) diff --git a/lessons/01-setting-up/modules/About.js b/lessons/01-setting-up/modules/About.js new file mode 100644 index 00000000..dc07ac3d --- /dev/null +++ b/lessons/01-setting-up/modules/About.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
About
+ } +}) \ No newline at end of file diff --git a/lessons/01-setting-up/modules/App.js b/lessons/01-setting-up/modules/App.js index cbbc7217..5f462e83 100644 --- a/lessons/01-setting-up/modules/App.js +++ b/lessons/01-setting-up/modules/App.js @@ -1,7 +1,17 @@ import React from 'react' +import { Link } from 'react-router'; export default React.createClass({ render() { - return
Hello, React Router!
+ return ( +
+

Ghetto hub issues

+
    +
  • About
    • +
  • Repos
    • +
+ {this.props.children} +
+ ) } }) diff --git a/lessons/01-setting-up/modules/Repos.js b/lessons/01-setting-up/modules/Repos.js new file mode 100644 index 00000000..a9c47705 --- /dev/null +++ b/lessons/01-setting-up/modules/Repos.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
Repos
+ } +}) \ No newline at end of file From cd961832ba2b9580193a66fe67d6180de64a57dc Mon Sep 17 00:00:00 2001 From: rich-farr Date: Thu, 7 Jul 2016 16:16:28 +1200 Subject: [PATCH 2/8] Finish lesson 6: params --- lessons/01-setting-up/index.css | 3 +++ lessons/01-setting-up/index.html | 1 + lessons/01-setting-up/index.js | 3 ++- lessons/01-setting-up/modules/App.js | 6 +++--- lessons/01-setting-up/modules/NavLink.js | 8 ++++++++ lessons/01-setting-up/modules/Repo.js | 11 +++++++++++ lessons/01-setting-up/modules/Repos.js | 11 ++++++++++- 7 files changed, 38 insertions(+), 5 deletions(-) create mode 100644 lessons/01-setting-up/index.css create mode 100644 lessons/01-setting-up/modules/NavLink.js create mode 100644 lessons/01-setting-up/modules/Repo.js diff --git a/lessons/01-setting-up/index.css b/lessons/01-setting-up/index.css new file mode 100644 index 00000000..7db13860 --- /dev/null +++ b/lessons/01-setting-up/index.css @@ -0,0 +1,3 @@ +.active { + color: chartreuse; +} \ No newline at end of file diff --git a/lessons/01-setting-up/index.html b/lessons/01-setting-up/index.html index 0a661421..bef0ccfc 100644 --- a/lessons/01-setting-up/index.html +++ b/lessons/01-setting-up/index.html @@ -1,6 +1,7 @@ + My First React Router App
diff --git a/lessons/01-setting-up/index.js b/lessons/01-setting-up/index.js index f8fe4cba..85ab24c6 100644 --- a/lessons/01-setting-up/index.js +++ b/lessons/01-setting-up/index.js @@ -4,12 +4,13 @@ import App from './modules/App' import { Router, Route, hashHistory } from 'react-router' import About from './modules/About' import Repos from './modules/Repos' - +import Repo from './modules/Repo' render(( + diff --git a/lessons/01-setting-up/modules/App.js b/lessons/01-setting-up/modules/App.js index 5f462e83..19b3aee8 100644 --- a/lessons/01-setting-up/modules/App.js +++ b/lessons/01-setting-up/modules/App.js @@ -1,5 +1,5 @@ import React from 'react' -import { Link } from 'react-router'; +import NavLink from './NavLink' export default React.createClass({ render() { @@ -7,8 +7,8 @@ export default React.createClass({

Ghetto hub issues

    -
  • About
    • -
  • Repos
    • +
  • About
    • +
  • Repos
{this.props.children}
diff --git a/lessons/01-setting-up/modules/NavLink.js b/lessons/01-setting-up/modules/NavLink.js new file mode 100644 index 00000000..466ff310 --- /dev/null +++ b/lessons/01-setting-up/modules/NavLink.js @@ -0,0 +1,8 @@ +import React from 'react' +import { Link } from 'react-router' + +export default React.createClass({ + render() { + return + } +}) \ No newline at end of file diff --git a/lessons/01-setting-up/modules/Repo.js b/lessons/01-setting-up/modules/Repo.js new file mode 100644 index 00000000..e372ea08 --- /dev/null +++ b/lessons/01-setting-up/modules/Repo.js @@ -0,0 +1,11 @@ +import React from 'react' + +export default React.createClass({ + render() { + return ( +
+

{this.props.params.repoName}

+
+ ) + } +}) \ No newline at end of file diff --git a/lessons/01-setting-up/modules/Repos.js b/lessons/01-setting-up/modules/Repos.js index a9c47705..15558d07 100644 --- a/lessons/01-setting-up/modules/Repos.js +++ b/lessons/01-setting-up/modules/Repos.js @@ -1,7 +1,16 @@ import React from 'react' +import { Link } from 'react-router'; export default React.createClass({ render() { - return
Repos
+ return ( +
+

Repos

+
    +
  • React Router
    • +
  • React
    • +
+
+ ) } }) \ No newline at end of file From dba2a26372f47018b540b74dc3403c373d51f5cd Mon Sep 17 00:00:00 2001 From: rich-farr Date: Thu, 7 Jul 2016 16:25:33 +1200 Subject: [PATCH 3/8] Complete lesson 7: More Nesting --- lessons/01-setting-up/index.js | 5 +++-- lessons/01-setting-up/modules/Repos.js | 7 ++++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/lessons/01-setting-up/index.js b/lessons/01-setting-up/index.js index 85ab24c6..5aee34ff 100644 --- a/lessons/01-setting-up/index.js +++ b/lessons/01-setting-up/index.js @@ -9,8 +9,9 @@ import Repo from './modules/Repo' render(( - - + + + diff --git a/lessons/01-setting-up/modules/Repos.js b/lessons/01-setting-up/modules/Repos.js index 15558d07..c8f9a0f4 100644 --- a/lessons/01-setting-up/modules/Repos.js +++ b/lessons/01-setting-up/modules/Repos.js @@ -1,5 +1,5 @@ import React from 'react' -import { Link } from 'react-router'; +import NavLink from './NavLink' export default React.createClass({ render() { @@ -7,9 +7,10 @@ export default React.createClass({

Repos

    -
  • React Router
    • -
  • React
    • +
  • React Router
    • +
  • React
+ {this.props.children}
) } From cb4d7022f7640ed0041e40c78514b9e67589d532 Mon Sep 17 00:00:00 2001 From: rich-farr Date: Thu, 7 Jul 2016 16:40:12 +1200 Subject: [PATCH 4/8] Complete Lesson 8; index routes --- lessons/01-setting-up/index.js | 7 ++++++- lessons/01-setting-up/modules/App.js | 1 + lessons/01-setting-up/modules/Home.js | 7 +++++++ 3 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 lessons/01-setting-up/modules/Home.js diff --git a/lessons/01-setting-up/index.js b/lessons/01-setting-up/index.js index 5aee34ff..e945ad1c 100644 --- a/lessons/01-setting-up/index.js +++ b/lessons/01-setting-up/index.js @@ -1,18 +1,23 @@ import React from 'react' import { render } from 'react-dom' import App from './modules/App' -import { Router, Route, hashHistory } from 'react-router' +import { Router, Route, hashHistory, IndexRoute } from 'react-router' import About from './modules/About' import Repos from './modules/Repos' import Repo from './modules/Repo' +import Home from './modules/Home' render(( + + + + ), document.getElementById('app')) diff --git a/lessons/01-setting-up/modules/App.js b/lessons/01-setting-up/modules/App.js index 19b3aee8..747c1e0c 100644 --- a/lessons/01-setting-up/modules/App.js +++ b/lessons/01-setting-up/modules/App.js @@ -1,5 +1,6 @@ import React from 'react' import NavLink from './NavLink' +import Home from './Home' export default React.createClass({ render() { diff --git a/lessons/01-setting-up/modules/Home.js b/lessons/01-setting-up/modules/Home.js new file mode 100644 index 00000000..6e9a290f --- /dev/null +++ b/lessons/01-setting-up/modules/Home.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render () { + return
Home
+ } +}) \ No newline at end of file From 2ec7fd8ac5380f291ab73a9229dc749e9a1b30d7 Mon Sep 17 00:00:00 2001 From: rich-farr Date: Thu, 7 Jul 2016 16:47:17 +1200 Subject: [PATCH 5/8] Complete Lesson 9: IndexLinks --- lessons/01-setting-up/modules/App.js | 1 + 1 file changed, 1 insertion(+) diff --git a/lessons/01-setting-up/modules/App.js b/lessons/01-setting-up/modules/App.js index 747c1e0c..67579c31 100644 --- a/lessons/01-setting-up/modules/App.js +++ b/lessons/01-setting-up/modules/App.js @@ -8,6 +8,7 @@ export default React.createClass({

Ghetto hub issues

    +
  • Kainga
  • About
  • Repos
From 920ca5d1d31edc57a885511bcccffa35bc5557b4 Mon Sep 17 00:00:00 2001 From: rich-farr Date: Thu, 7 Jul 2016 16:53:33 +1200 Subject: [PATCH 6/8] Complete Lesson 10: Clean URLs --- lessons/01-setting-up/index.html | 4 ++-- lessons/01-setting-up/index.js | 4 ++-- lessons/01-setting-up/package.json | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/lessons/01-setting-up/index.html b/lessons/01-setting-up/index.html index bef0ccfc..c1a55fef 100644 --- a/lessons/01-setting-up/index.html +++ b/lessons/01-setting-up/index.html @@ -1,7 +1,7 @@ - + My First React Router App
- + diff --git a/lessons/01-setting-up/index.js b/lessons/01-setting-up/index.js index e945ad1c..5df0c1d8 100644 --- a/lessons/01-setting-up/index.js +++ b/lessons/01-setting-up/index.js @@ -1,14 +1,14 @@ import React from 'react' import { render } from 'react-dom' import App from './modules/App' -import { Router, Route, hashHistory, IndexRoute } from 'react-router' +import { Router, Route, browserHistory, IndexRoute } from 'react-router' import About from './modules/About' import Repos from './modules/Repos' import Repo from './modules/Repo' import Home from './modules/Home' render(( - + diff --git a/lessons/01-setting-up/package.json b/lessons/01-setting-up/package.json index 51792f8f..9bb35e8f 100644 --- a/lessons/01-setting-up/package.json +++ b/lessons/01-setting-up/package.json @@ -4,7 +4,7 @@ "description": "", "main": "index.js", "scripts": { - "start": "webpack-dev-server --inline --content-base ." + "start": "webpack-dev-server --inline --content-base . --history-api-fallback" }, "author": "", "license": "ISC", From 6f73fa4494cbb3a382f086002659afb99ce4715e Mon Sep 17 00:00:00 2001 From: rich-farr Date: Thu, 7 Jul 2016 17:16:36 +1200 Subject: [PATCH 7/8] Complete Lesson 11: Productionish Server --- lessons/01-setting-up/npm-debug.log | 48 +++++++++++++++++++ lessons/01-setting-up/package.json | 7 ++- lessons/01-setting-up/{ => public}/index.css | 0 lessons/01-setting-up/{ => public}/index.html | 0 lessons/01-setting-up/server.js | 20 ++++++++ lessons/01-setting-up/webpack.config.js | 11 ++++- 6 files changed, 83 insertions(+), 3 deletions(-) create mode 100644 lessons/01-setting-up/npm-debug.log rename lessons/01-setting-up/{ => public}/index.css (100%) rename lessons/01-setting-up/{ => public}/index.html (100%) create mode 100644 lessons/01-setting-up/server.js diff --git a/lessons/01-setting-up/npm-debug.log b/lessons/01-setting-up/npm-debug.log new file mode 100644 index 00000000..a6f1ba3e --- /dev/null +++ b/lessons/01-setting-up/npm-debug.log @@ -0,0 +1,48 @@ +0 info it worked if it ends with ok +1 verbose cli [ '/home/rich/.nvm/versions/node/v5.11.1/bin/node', +1 verbose cli '/home/rich/.nvm/versions/node/v5.11.1/bin/npm', +1 verbose cli 'run', +1 verbose cli 'start:prod' ] +2 info using npm@3.8.6 +3 info using node@v5.11.1 +4 verbose run-script [ 'prestart:prod', 'start:prod', 'poststart:prod' ] +5 info lifecycle tutorial@1.0.0~prestart:prod: tutorial@1.0.0 +6 silly lifecycle tutorial@1.0.0~prestart:prod: no script for prestart:prod, continuing +7 info lifecycle tutorial@1.0.0~start:prod: tutorial@1.0.0 +8 verbose lifecycle tutorial@1.0.0~start:prod: unsafe-perm in lifecycle true +9 verbose lifecycle tutorial@1.0.0~start:prod: PATH: /home/rich/.nvm/versions/node/v5.11.1/lib/node_modules/npm/bin/node-gyp-bin:/home/rich/Dev_Academy/02_phase_two/05_week_five/react-router-tutorial/lessons/01-setting-up/node_modules/.bin:/home/rich/.nvm/versions/node/v5.11.1/bin:/home/rich/.nvm/versions/node/v5.11.1/lib/node_modules/npm/bin/node-gyp-bin:/home/rich/Dev_Academy/02_phase_two/05_week_five/react-router-tutorial/lessons/01-setting-up/node_modules/.bin:/home/rich/.nvm/versions/node/v5.11.1/bin:/home/rich/.nvm/versions/node/v5.11.1/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games +10 verbose lifecycle tutorial@1.0.0~start:prod: CWD: /home/rich/Dev_Academy/02_phase_two/05_week_five/react-router-tutorial/lessons/01-setting-up +11 silly lifecycle tutorial@1.0.0~start:prod: Args: [ '-c', 'webpack && node server.js' ] +12 silly lifecycle tutorial@1.0.0~start:prod: Returned: code: 255 signal: null +13 info lifecycle tutorial@1.0.0~start:prod: Failed to exec start:prod script +14 verbose stack Error: tutorial@1.0.0 start:prod: `webpack && node server.js` +14 verbose stack Exit status 255 +14 verbose stack at EventEmitter. (/home/rich/.nvm/versions/node/v5.11.1/lib/node_modules/npm/lib/utils/lifecycle.js:239:16) +14 verbose stack at emitTwo (events.js:100:13) +14 verbose stack at EventEmitter.emit (events.js:185:7) +14 verbose stack at ChildProcess. (/home/rich/.nvm/versions/node/v5.11.1/lib/node_modules/npm/lib/utils/spawn.js:24:14) +14 verbose stack at emitTwo (events.js:100:13) +14 verbose stack at ChildProcess.emit (events.js:185:7) +14 verbose stack at maybeClose (internal/child_process.js:850:16) +14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5) +15 verbose pkgid tutorial@1.0.0 +16 verbose cwd /home/rich/Dev_Academy/02_phase_two/05_week_five/react-router-tutorial/lessons/01-setting-up +17 error Linux 3.19.0-32-generic +18 error argv "/home/rich/.nvm/versions/node/v5.11.1/bin/node" "/home/rich/.nvm/versions/node/v5.11.1/bin/npm" "run" "start:prod" +19 error node v5.11.1 +20 error npm v3.8.6 +21 error code ELIFECYCLE +22 error tutorial@1.0.0 start:prod: `webpack && node server.js` +22 error Exit status 255 +23 error Failed at the tutorial@1.0.0 start:prod script 'webpack && node server.js'. +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 && node server.js +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 ] diff --git a/lessons/01-setting-up/package.json b/lessons/01-setting-up/package.json index 9bb35e8f..8a7a2930 100644 --- a/lessons/01-setting-up/package.json +++ b/lessons/01-setting-up/package.json @@ -4,11 +4,16 @@ "description": "", "main": "index.js", "scripts": { - "start": "webpack-dev-server --inline --content-base . --history-api-fallback" + "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev", + "start:dev": "webpack-dev-server --inline --content-base public --history-api-fallback", + "start:prod": "webpack && node server.js" }, "author": "", "license": "ISC", "dependencies": { + "compression": "^1.6.2", + "express": "^4.14.0", + "if-env": "^1.0.0", "react": "^0.14.7", "react-dom": "^0.14.7", "react-router": "^2.0.0" diff --git a/lessons/01-setting-up/index.css b/lessons/01-setting-up/public/index.css similarity index 100% rename from lessons/01-setting-up/index.css rename to lessons/01-setting-up/public/index.css diff --git a/lessons/01-setting-up/index.html b/lessons/01-setting-up/public/index.html similarity index 100% rename from lessons/01-setting-up/index.html rename to lessons/01-setting-up/public/index.html diff --git a/lessons/01-setting-up/server.js b/lessons/01-setting-up/server.js new file mode 100644 index 00000000..ff9018ed --- /dev/null +++ b/lessons/01-setting-up/server.js @@ -0,0 +1,20 @@ +var express = require('express') +var path = require('path') +var compression = require('compression') + +var app = express() + +app.use(compression()) + +// serve our static stuff like index.css +app.use(express.static(path.join(__dirname, 'public'))) + +// send all requests to index.html so browserHistory in React Router works +app.get('*', function (req, res) { + res.sendFile(path.join(__dirname, 'public', 'index.html')) +}) + +var PORT = process.env.PORT || 8080 +app.listen(PORT, function() { + console.log('Production Express server running at localhost:' + PORT) +}) \ No newline at end of file diff --git a/lessons/01-setting-up/webpack.config.js b/lessons/01-setting-up/webpack.config.js index c5866620..2389b1dd 100644 --- a/lessons/01-setting-up/webpack.config.js +++ b/lessons/01-setting-up/webpack.config.js @@ -1,11 +1,18 @@ +var webpack = require('webpack') + module.exports = { entry: './index.js', output: { - filename: 'bundle.js', - publicPath: '' + path: 'public' }, + plugins: process.env.NODE_ENV === 'production' ? [ + new webpack.optimize.DedupePlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), + new webpack.optimize.UglifyJsPlugin() + ] : [], + module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } From 3040ae898eb1a7e5ea1526345acdf1a6d303a1e0 Mon Sep 17 00:00:00 2001 From: rich-farr Date: Thu, 7 Jul 2016 17:37:33 +1200 Subject: [PATCH 8/8] Complete Lesson 12: Navigating --- lessons/01-setting-up/modules/Repos.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/lessons/01-setting-up/modules/Repos.js b/lessons/01-setting-up/modules/Repos.js index c8f9a0f4..73c0b157 100644 --- a/lessons/01-setting-up/modules/Repos.js +++ b/lessons/01-setting-up/modules/Repos.js @@ -1,7 +1,18 @@ import React from 'react' import NavLink from './NavLink' +import { browserHistory } from 'react-router' export default React.createClass({ + + handleSubmit(event) { + event.preventDefault() + const userName = event.target.elements[0].value + const repoName = event.target.elements[1].value + const path = `/repos/${userName}/${repoName}` + console.log(path) + browserHistory.push(path) + }, + render() { return (
@@ -9,6 +20,13 @@ export default React.createClass({
  • React Router
  • React
    • +
  • +
    + / {' '} + {' '} + +
    +
{this.props.children}