my--exercise

yinhanwen · yinhanwen · commit 2468147efc0c · 2017-05-18T18:08:13.000+08:00
exercise
diff --git a/lessons/04-nested-routes/index.css b/lessons/04-nested-routes/index.css
diff --git a/lessons/04-nested-routes/index.html b/lessons/04-nested-routes/index.html
@@ -2,5 +2,6 @@
 <html>
 <meta charset=utf-8/>
 <title>My First React Router App</title>
+<link rel="stylesheet" href="index.css" />
 <div id=app></div>
 <script src="bundle.js"></script>
diff --git a/lessons/04-nested-routes/index.js b/lessons/04-nested-routes/index.js
@@ -6,9 +6,17 @@ import About from './modules/About'
 import Repos from './modules/Repos'
 
 render((
+  // <Router history={hashHistory}>
+  //   <Route path="/" component={App}/>
+  //   <Route path="/repos" component={Repos}/>
+  //   <Route path="/about" component={About}/>
+  // </Router>
+
+  // share nav
   <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'))
diff --git a/lessons/04-nested-routes/modules/App.js b/lessons/04-nested-routes/modules/App.js
@@ -1,16 +1,45 @@
 import React from 'react'
 import { Link } from 'react-router'
 
+
+//active link 2
+import NavLink from './NavLink'
+
 export default React.createClass({
   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>
+      //   </ul>
+      // </div>
+
+      // active link
+      // <div>
+      //   <h1>React Router Tutorial</h1>
+      //   <ul role="nav">
+      //     <li><Link to="/about" activeClassName="active">About</Link></li>
+      //     <li><Link to="/repos" activeClassName="active">Repos</Link></li>
+      //   </ul>
+      //
+      //   {/* add this */}
+      //   {this.props.children}
+      // </div>
+
+      //active link 2
       <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">About</NavLink></li>
+          <li><NavLink to="/repos">Repos</NavLink></li>
         </ul>
+
+        {/* add this */}
+        {this.props.children}
       </div>
+
     )
   }
 })
diff --git a/lessons/04-nested-routes/modules/NavLink.js b/lessons/04-nested-routes/modules/NavLink.js
@@ -0,0 +1,9 @@
+// modules/NavLink.js
+import React from 'react'
+import { Link } from 'react-router'
+
+export default React.createClass({
+  render() {
+    return <Link {...this.props} activeClassName="active"/>
+  }
+})
diff --git a/lessons/06-params/index.js b/lessons/06-params/index.js
@@ -4,12 +4,18 @@ import { Router, Route, hashHistory } from 'react-router'
 import App from './modules/App'
 import About from './modules/About'
 import Repos from './modules/Repos'
+// new
+import Repo from './modules/Repo'
 
 render((
   <Router history={hashHistory}>
     <Route path="/" component={App}>
-      <Route path="/repos" component={Repos}/>
       <Route path="/about" component={About}/>
+      <Route path="/repos" component={Repos}/>
+
+      // new
+      <Route path="/repos/:userName/:repoName/:name" component={Repo}/>
+      <Route path="/repos/:userName/:repoName" component={Repo}/>
     </Route>
   </Router>
 ), document.getElementById('app'))
diff --git a/lessons/06-params/modules/Repo.js b/lessons/06-params/modules/Repo.js
@@ -0,0 +1,12 @@
+// modules/Repo.js
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        <h2>{this.props.params.repoName}</h2>
+      </div>
+    )
+  }
+})
diff --git a/lessons/06-params/modules/Repos.js b/lessons/06-params/modules/Repos.js
@@ -1,7 +1,26 @@
 import React from 'react'
 
+// new
+import { Link } from 'react-router'
+
 export default React.createClass({
+  // render() {
+  //   return <div>Repos</div>
+  // }
+
+  // new
   render() {
-    return <div>Repos</div>
+    return (
+      <div>
+        <h2>Repos</h2>
+
+        {/* add some links */}
+        <ul>
+          <li><Link to="/repos/reactjs/react-router/456">React Router</Link></li>
+          <li><Link to="/repos/facebook/react">React</Link></li>
+        </ul>
+
+      </div>
+    )
   }
 })
diff --git a/lessons/07-more-nesting/index.js b/lessons/07-more-nesting/index.js
@@ -9,8 +9,9 @@ import Repo from './modules/Repo'
 render((
   <Router history={hashHistory}>
     <Route path="/" component={App}>
-      <Route path="/repos" component={Repos}/>
+      <Route path="/repos" component={Repos}>
       <Route path="/repos/:userName/:repoName" component={Repo}/>
+      </Route>
       <Route path="/about" component={About}/>
     </Route>
   </Router>
diff --git a/lessons/07-more-nesting/modules/Repos.js b/lessons/07-more-nesting/modules/Repos.js
@@ -1,15 +1,21 @@
 import React from 'react'
 import { Link } from 'react-router'
 
+import NavLink from './NavLink'
+
 export default React.createClass({
   render() {
     return (
       <div>
         <h2>Repos</h2>
         <ul>
-          <li><Link to="/repos/reactjs/react-router">React Router</Link></li>
-          <li><Link to="/repos/facebook/react">React</Link></li>
+          {/*}<li><Link to="/repos/reactjs/react-router">React Router</Link></li>
+          <li><Link to="/repos/facebook/react">React</Link></li>*/}
+          <li><NavLink to="/repos/reactjs/react-router">React Routerrrrrr</NavLink></li>
+          <li><NavLink to="/repos/facebook/react">Reactttttt</NavLink></li>
         </ul>
+        {/* will render `Repo.js` when at /repos/:userName/:repoName */}
+        {this.props.children}
       </div>
     )
   }
diff --git a/lessons/08-index-routes/index.js b/lessons/08-index-routes/index.js
@@ -1,14 +1,20 @@
 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((
   <Router history={hashHistory}>
     <Route path="/" component={App}>
+
+      {/* add it here, as a child of `/` */}
+      <IndexRoute component={Home}/>
+
       <Route path="/repos" component={Repos}>
         <Route path="/repos/:userName/:repoName" component={Repo}/>
       </Route>
diff --git a/lessons/08-index-routes/modules/App.js b/lessons/08-index-routes/modules/App.js
@@ -1,16 +1,20 @@
 import React from 'react'
+import { IndexLink } from 'react-router'
 import NavLink from './NavLink'
 
+import Home from './Home'
+
 export default React.createClass({
   render() {
     return (
       <div>
         <h1>React Router Tutorial</h1>
         <ul role="nav">
+          <li><IndexLink activeClassName="active" to="/" onlyActiveOnIndex={true}>Home</IndexLink></li>
           <li><NavLink to="/about">About</NavLink></li>
           <li><NavLink to="/repos">Repos</NavLink></li>
         </ul>
-        {this.props.children}
+        {this.props.children || <Home />}
       </div>
     )
   }
diff --git a/lessons/08-index-routes/modules/Home.js b/lessons/08-index-routes/modules/Home.js
@@ -0,0 +1,8 @@
+// modules/Home.js
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>Home</div>
+  }
+})
diff --git a/lessons/09-index-links/modules/App.js b/lessons/09-index-links/modules/App.js
@@ -1,12 +1,15 @@
 import React from 'react'
 import NavLink from './NavLink'
+import { IndexLink } from 'react-router'
 
 export default React.createClass({
   render() {
     return (
       <div>
         <h1>React Router Tutorial</h1>
         <ul role="nav">
+          {/*<li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>*/}
+          <li><NavLink to="/" onlyActiveOnIndex={true}>Home</NavLink></li>
           <li><NavLink to="/about">About</NavLink></li>
           <li><NavLink to="/repos">Repos</NavLink></li>
         </ul>
diff --git a/lessons/10-clean-urls/index.html b/lessons/10-clean-urls/index.html
@@ -2,6 +2,6 @@
 <html>
 <meta charset=utf-8/>
 <title>My First React Router App</title>
-<link rel=stylesheet href=index.css>
+<link rel=stylesheet href=/index.css>
 <div id=app></div>
-<script src="bundle.js"></script>
+<script src="/bundle.js"></script>
diff --git a/lessons/10-clean-urls/index.js b/lessons/10-clean-urls/index.js
@@ -1,14 +1,16 @@
 import React from 'react'
 import { render } from 'react-dom'
-import { Router, Route, hashHistory, IndexRoute } from 'react-router'
+// import { Router, Route, hashHistory, IndexRoute } from 'react-router'
+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'
 
 render((
-  <Router history={hashHistory}>
+  // <Router history={hashHistory}>
+  <Router history={browserHistory}>
     <Route path="/" component={App}>
       <IndexRoute component={Home}/>
       <Route path="/repos" component={Repos}>
diff --git 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/index.html b/lessons/11-productionish-server/index.html
diff --git 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.15.2",
+    "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
@@ -0,0 +1,3 @@
+.active {
+  color: green;
+}
diff --git a/lessons/11-productionish-server/public/index.html b/lessons/11-productionish-server/public/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8"/>
+<title>My First React Router App</title>
+<link rel="stylesheet" href="/index.css">
+<div id="app"></div>
+<script src="/bundle.js"></script>
diff --git a/lessons/11-productionish-server/server.js b/lessons/11-productionish-server/server.js
@@ -0,0 +1,23 @@
+// server.js
+var express = require('express')
+var path = require('path')
+
+var compression = require('compression')
+
+var app = express()
+// must be first!
+app.use(compression())
+
+// add path.join here
+app.use(express.static(path.join(__dirname, 'public')))
+
+// ...
+app.get('*', function (req, res) {
+  // and drop 'public' in the middle of here
+  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)
+})
diff --git a/lessons/11-productionish-server/test.html b/lessons/11-productionish-server/test.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+  </head>
+  <body>
+    <a href="tencent://message/?uin=2404604119&Site=sc.chinaz.com&Menu=yes">
+      点击交流
+    </a>
+    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=554237806&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
+  </body>
+</html>
diff --git a/lessons/11-productionish-server/webpack.config.js b/lessons/11-productionish-server/webpack.config.js
@@ -1,14 +1,22 @@
+var webpack = require('webpack')
+
 module.exports = {
   entry: './index.js',
 
   output: {
+    path: 'public',
     filename: 'bundle.js',
     publicPath: '/'
   },
-
+  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' }
     ]
   }
+
 }
diff --git a/lessons/12-navigating/modules/Repos.js b/lessons/12-navigating/modules/Repos.js
diff --git a/lessons/13-server-rendering/modules/routes.js b/lessons/13-server-rendering/modules/routes.js
diff --git a/lessons/13-server-rendering/package.json b/lessons/13-server-rendering/package.json
diff --git a/lessons/13-server-rendering/server.js b/lessons/13-server-rendering/server.js
diff --git a/lessons/13-server-rendering/webpack.server.js b/lessons/13-server-rendering/webpack.server.js
