diff --git a/lessons/01-setting-up/modules/App.js b/lessons/01-setting-up/modules/App.js index cbbc7217..58c9ccc2 100644 --- a/lessons/01-setting-up/modules/App.js +++ b/lessons/01-setting-up/modules/App.js @@ -2,6 +2,6 @@ import React from 'react' export default React.createClass({ render() { - return
Hello, React Router!
+ return
Hello, React Router! I'm comming
} }) diff --git a/lessons/02-rendering-a-route/index.js b/lessons/02-rendering-a-route/index.js index 898eaa43..8b46cd8b 100644 --- a/lessons/02-rendering-a-route/index.js +++ b/lessons/02-rendering-a-route/index.js @@ -1,4 +1,15 @@ 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/02-rendering-a-route/modules/About.js b/lessons/02-rendering-a-route/modules/About.js new file mode 100644 index 00000000..546c5e7c --- /dev/null +++ b/lessons/02-rendering-a-route/modules/About.js @@ -0,0 +1,8 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
About
+ } +}) + diff --git a/lessons/02-rendering-a-route/modules/Repos.js b/lessons/02-rendering-a-route/modules/Repos.js new file mode 100644 index 00000000..b68c5ddf --- /dev/null +++ b/lessons/02-rendering-a-route/modules/Repos.js @@ -0,0 +1,9 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
Repos
+ } +}) + + diff --git a/lessons/03-navigating-with-link/index.js b/lessons/03-navigating-with-link/index.js index 9310e682..d597dde0 100644 --- a/lessons/03-navigating-with-link/index.js +++ b/lessons/03-navigating-with-link/index.js @@ -1,4 +1,4 @@ -import React from 'react' +/*import React from 'react' import { render } from 'react-dom' import { Router, Route, hashHistory } from 'react-router' import App from './modules/App' @@ -12,3 +12,19 @@ render(( ), document.getElementById('app')) +*/ +import React from 'react' +import ReactDOM from 'react-dom' +import { Router, Route, hashHistory } from 'react-router' +import App from './modules/App' +import About from './modules/About' +import Repos from './modules/Repos' + +ReactDOM.render( + + + + + , + document.getElementById('app') +) diff --git a/lessons/03-navigating-with-link/modules/App.js b/lessons/03-navigating-with-link/modules/App.js index cbbc7217..819d0da5 100644 --- a/lessons/03-navigating-with-link/modules/App.js +++ b/lessons/03-navigating-with-link/modules/App.js @@ -1,7 +1,18 @@ import React from 'react' +import { Link } from 'react-router' export default React.createClass({ render() { - return
Hello, React Router!
+ return ( +
+

React Router Tudorial

+
    +
  • About
  • +
  • Repos
  • +
+
+ ) } }) + + diff --git a/lessons/04-nested-routes/modules/App.js b/lessons/04-nested-routes/modules/App.js index 70d49928..9b0f41c7 100644 --- a/lessons/04-nested-routes/modules/App.js +++ b/lessons/04-nested-routes/modules/App.js @@ -10,6 +10,7 @@ export default React.createClass({
  • About
  • Repos
  • + {this.props.childre} ) } diff --git a/lessons/11-productionish-server/index.css b/lessons/05-active-links/index.css similarity index 57% rename from lessons/11-productionish-server/index.css rename to lessons/05-active-links/index.css index 81c8ae63..e9ad850b 100644 --- a/lessons/11-productionish-server/index.css +++ b/lessons/05-active-links/index.css @@ -1,3 +1,3 @@ -.active { +.active{ color: green; -} +} \ No newline at end of file diff --git a/lessons/05-active-links/index.html b/lessons/05-active-links/index.html index 0a661421..0494fafd 100644 --- a/lessons/05-active-links/index.html +++ b/lessons/05-active-links/index.html @@ -2,5 +2,6 @@ My First React Router App +
    diff --git a/lessons/05-active-links/modules/App.js b/lessons/05-active-links/modules/App.js index f3867803..4bc4c1e6 100644 --- a/lessons/05-active-links/modules/App.js +++ b/lessons/05-active-links/modules/App.js @@ -1,5 +1,6 @@ import React from 'react' import { Link } from 'react-router' +import NavLink from './NavLink' export default React.createClass({ render() { @@ -7,8 +8,8 @@ export default React.createClass({

    React Router Tutorial

      -
    • About
    • -
    • Repos
    • +
    • About
    • +
    • Repos
    {this.props.children}
    diff --git a/lessons/05-active-links/modules/NavLink.js b/lessons/05-active-links/modules/NavLink.js new file mode 100644 index 00000000..aa79c095 --- /dev/null +++ b/lessons/05-active-links/modules/NavLink.js @@ -0,0 +1,10 @@ +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/06-params/index.js b/lessons/06-params/index.js index 25f9e303..6139190d 100644 --- a/lessons/06-params/index.js +++ b/lessons/06-params/index.js @@ -4,11 +4,14 @@ import { Router, Route, hashHistory } from 'react-router' import App from './modules/App' import About from './modules/About' import Repos from './modules/Repos' +import Repo from './modules/Repo' render(( + {/* add the new route */} + diff --git a/lessons/06-params/modules/Repo.js b/lessons/06-params/modules/Repo.js new file mode 100644 index 00000000..98219685 --- /dev/null +++ b/lessons/06-params/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/06-params/modules/Repos.js b/lessons/06-params/modules/Repos.js index 528e3434..429c8fa2 100644 --- a/lessons/06-params/modules/Repos.js +++ b/lessons/06-params/modules/Repos.js @@ -1,7 +1,18 @@ import React from 'react' +import NavLink from './NavLink' export default React.createClass({ render() { - return
    Repos
    + return ( +
    +

    Repos

    + {/* add some links */} +
      +
    • React-router
    • +
    • React-Link
    • +
    + {this.props.children} +
    + ) } }) diff --git a/lessons/07-more-nesting/index.js b/lessons/07-more-nesting/index.js index 95a876e5..2e0aea38 100644 --- a/lessons/07-more-nesting/index.js +++ b/lessons/07-more-nesting/index.js @@ -9,8 +9,9 @@ import Repo from './modules/Repo' render(( - - + + + diff --git a/lessons/07-more-nesting/modules/Repos.js b/lessons/07-more-nesting/modules/Repos.js index 6393b667..5f300c9f 100644 --- a/lessons/07-more-nesting/modules/Repos.js +++ b/lessons/07-more-nesting/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,8 +7,10 @@ export default React.createClass({

    Repos

      -
    • React Router
    • -
    • React
    • +
    • React-router
    • +
    • React
    • + {/* will render 'Repo.js' when at /repos/:userName/:repoName */} + {this.props.children}
    ) diff --git a/lessons/08-index-routes/index.js b/lessons/08-index-routes/index.js index ddc3f588..ba761835 100644 --- a/lessons/08-index-routes/index.js +++ b/lessons/08-index-routes/index.js @@ -1,18 +1,21 @@ import React from 'react' import { render } from 'react-dom' -import { Router, Route, hashHistory } from 'react-router' +import { Router, Route, hashHistory, IndexRoute } from 'react-router' import App from './modules/App' 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/08-index-routes/modules/App.js b/lessons/08-index-routes/modules/App.js index c644187d..cb444ca2 100644 --- a/lessons/08-index-routes/modules/App.js +++ b/lessons/08-index-routes/modules/App.js @@ -1,5 +1,6 @@ import React from 'react' import NavLink from './NavLink' +import Home from './Home' export default React.createClass({ render() { @@ -10,7 +11,7 @@ export default React.createClass({
  • About
  • Repos
  • - {this.props.children} + {this.props.children || } ) } diff --git a/lessons/08-index-routes/modules/Home.js b/lessons/08-index-routes/modules/Home.js new file mode 100644 index 00000000..3e464b21 --- /dev/null +++ b/lessons/08-index-routes/modules/Home.js @@ -0,0 +1,8 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
    Home
    + {this.props.children || } + } +}) \ No newline at end of file diff --git a/lessons/09-index-links/modules/App.js b/lessons/09-index-links/modules/App.js index c644187d..fde7b5ec 100644 --- a/lessons/09-index-links/modules/App.js +++ b/lessons/09-index-links/modules/App.js @@ -1,4 +1,5 @@ import React from 'react' +// import { IndexLink } from 'react-router' import NavLink from './NavLink' export default React.createClass({ @@ -6,7 +7,8 @@ export default React.createClass({ return (

    React Router Tutorial

    -
      +
        +
      • Home
      • About
      • Repos
      diff --git a/lessons/10-clean-urls/index.html b/lessons/10-clean-urls/index.html index fef00c97..7ac5b8a7 100644 --- a/lessons/10-clean-urls/index.html +++ b/lessons/10-clean-urls/index.html @@ -2,6 +2,6 @@ My First React Router App - +
      - + diff --git a/lessons/10-clean-urls/index.js b/lessons/10-clean-urls/index.js index a9fed24f..e32c28b6 100644 --- a/lessons/10-clean-urls/index.js +++ b/lessons/10-clean-urls/index.js @@ -8,7 +8,7 @@ import Repo from './modules/Repo' import Home from './modules/Home' render(( - + diff --git a/lessons/10-clean-urls/package.json b/lessons/10-clean-urls/package.json index 51792f8f..9bb35e8f 100644 --- a/lessons/10-clean-urls/package.json +++ b/lessons/10-clean-urls/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", diff --git a/lessons/11-productionish-server/package.json b/lessons/11-productionish-server/package.json index 9bb35e8f..8a7a2930 100644 --- a/lessons/11-productionish-server/package.json +++ b/lessons/11-productionish-server/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/11-productionish-server/public/index.css b/lessons/11-productionish-server/public/index.css new file mode 100644 index 00000000..8f315af2 --- /dev/null +++ b/lessons/11-productionish-server/public/index.css @@ -0,0 +1,6 @@ +body{ + background-color: #f9f9f9; +} +.active { + color: green; +} diff --git a/lessons/11-productionish-server/index.html b/lessons/11-productionish-server/public/index.html similarity index 100% rename from lessons/11-productionish-server/index.html rename to lessons/11-productionish-server/public/index.html diff --git a/lessons/11-productionish-server/server.js b/lessons/11-productionish-server/server.js new file mode 100644 index 00000000..bf17d055 --- /dev/null +++ b/lessons/11-productionish-server/server.js @@ -0,0 +1,22 @@ +// server.js + +var express = require('express') +var path = require('path') +var compression = require('compression') + +var app = express() + +// serve our static stuff like index.css +app.use(compression()) +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/11-productionish-server/webpack.config.js b/lessons/11-productionish-server/webpack.config.js index 7bb21eeb..dd7e980b 100644 --- a/lessons/11-productionish-server/webpack.config.js +++ b/lessons/11-productionish-server/webpack.config.js @@ -2,6 +2,7 @@ module.exports = { entry: './index.js', output: { + path: 'public', filename: 'bundle.js', publicPath: '/' }, @@ -10,5 +11,13 @@ module.exports = { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } ] - } + }, + + // add this handful of plugins that optimize the build + // when we're in production + plugins: process.env.NODE_ENV === 'production' ? [ + new webpack.optimize.DedupePlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), + new webpack.optimize.UglifyJsPlugin() + ] : [], } diff --git a/lessons/12-navigating/modules/Repos.js b/lessons/12-navigating/modules/Repos.js index cff812e2..61a7c554 100644 --- a/lessons/12-navigating/modules/Repos.js +++ b/lessons/12-navigating/modules/Repos.js @@ -1,7 +1,25 @@ import React from 'react' +import { browserHistory } from 'react-router' import NavLink from './NavLink' export default React.createClass({ + contextTypes: { + router: React.PropTypes.object + }, + + handleSubmit(event) { + event.preventDefault() + + const userName = event.target.elements[0].value + const repo = event.target.elements[1].value + const path = '/repos/${username}/${repo}' + + browserHistory.push(path) + console.log(path); + + this.context.router.push(path) + }, + render() { return (
      @@ -9,6 +27,14 @@ export default React.createClass({
      • React Router
      • React
      • + {/* add this form */} +
      • +
        + / {' '} + {' '} + +
        +
      {this.props.children}
      diff --git a/lessons/13-server-rendering/index.js b/lessons/13-server-rendering/index.js index a2f8b134..c58ede33 100644 --- a/lessons/13-server-rendering/index.js +++ b/lessons/13-server-rendering/index.js @@ -1,20 +1,9 @@ import React from 'react' import { render } from 'react-dom' -import { Router, Route, browserHistory, IndexRoute } from 'react-router' -import App from './modules/App' -import About from './modules/About' -import Repos from './modules/Repos' -import Repo from './modules/Repo' -import Home from './modules/Home' +import { Router, browserHistory } from 'react-router' +import routes from './modules/routes' -render(( - - - - - - - - - -), document.getElementById('app')) +render( + , + document.getElementById('app') +) diff --git a/lessons/13-server-rendering/modules/routes.js b/lessons/13-server-rendering/modules/routes.js new file mode 100644 index 00000000..184df95c --- /dev/null +++ b/lessons/13-server-rendering/modules/routes.js @@ -0,0 +1,17 @@ +import React from 'react' +import { Route, IndexRoute } from 'react-router' +import App from './App' +import About from './About' +import Repos from './Repos' +import Repo from './Repo' +import Home from './Home' + +module.exports = ( + + + + + + + +) diff --git a/lessons/13-server-rendering/package.json b/lessons/13-server-rendering/package.json index 3e4747fd..383b68b6 100644 --- a/lessons/13-server-rendering/package.json +++ b/lessons/13-server-rendering/package.json @@ -4,9 +4,12 @@ "description": "", "main": "index.js", "scripts": { - "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev", + "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" + "start:prod": "npm run build && node server.bundle.js", + "build:client": "webpack", + "build:server": "webpack --config webpack.server.config.js", + "build": "npm run build:client && npm run build:server" }, "author": "", "license": "ISC", diff --git a/lessons/13-server-rendering/webpack.server.config.js b/lessons/13-server-rendering/webpack.server.config.js new file mode 100644 index 00000000..f6608197 --- /dev/null +++ b/lessons/13-server-rendering/webpack.server.config.js @@ -0,0 +1,34 @@ +var fs = require('fs') +var path = require('path') + +module.exports = { + entry: path.resolve(__dirname, 'server.js'), + + output: { + filename: 'server.bundle.js' + }, + + target: 'node', + + // keep node_module paths out of the bundle + externals: fs.readdirSync(path.resolve(__dirname, 'node_modules')).concat([ + 'react-dom/server', 'react/addons' + ]).reduce(function(ext, mod) { + ext[mod] = 'commonjs ' + mod + return ext + }, {}), + + node: { + __filename: true, + __diranme: true + }, + + module: { + loaders: [ + { + text: /\.js$/, exclude: /node_modules/, + loader: 'babel-loader?presets=[]=es2015&presets[]=react' + } + ] + } +} \ No newline at end of file