diff --git a/lessons/01-setting-up/index.js b/lessons/01-setting-up/index.js index 898eaa43..5df0c1d8 100644 --- a/lessons/01-setting-up/index.js +++ b/lessons/01-setting-up/index.js @@ -1,4 +1,23 @@ import React from 'react' import { render } from 'react-dom' import App from './modules/App' -render(, document.getElementById('app')) +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(( + + + + + + + + + + + + + ), 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..67579c31 100644 --- a/lessons/01-setting-up/modules/App.js +++ b/lessons/01-setting-up/modules/App.js @@ -1,7 +1,19 @@ import React from 'react' +import NavLink from './NavLink' +import Home from './Home' export default React.createClass({ render() { - return
Hello, React Router!
+ return ( +
+

Ghetto hub issues

+ + {this.props.children} +
+ ) } }) 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 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 new file mode 100644 index 00000000..73c0b157 --- /dev/null +++ b/lessons/01-setting-up/modules/Repos.js @@ -0,0 +1,35 @@ +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 ( +
+

Repos

+ + {this.props.children} +
+ ) + } +}) \ No newline at end of file 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 51792f8f..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 ." + "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/public/index.css b/lessons/01-setting-up/public/index.css new file mode 100644 index 00000000..7db13860 --- /dev/null +++ b/lessons/01-setting-up/public/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/public/index.html similarity index 60% rename from lessons/01-setting-up/index.html rename to lessons/01-setting-up/public/index.html index 0a661421..c1a55fef 100644 --- a/lessons/01-setting-up/index.html +++ b/lessons/01-setting-up/public/index.html @@ -1,6 +1,7 @@ + My First React Router App
- + 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' }