Skip to content

Commit b64d216

Browse files
willrsternwillrstern
committed
broke out html into components
1 parent f923c11 commit b64d216

File tree

8 files changed

+148
-93
lines changed

8 files changed

+148
-93
lines changed

‎2-react-router/src/index.html

Lines changed: 1 addition & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -17,86 +17,7 @@
1717
</head>
1818

1919
<body>
20-
<!-- Navigation -->
21-
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
22-
<div class="container">
23-
<!-- Brand and toggle get grouped for better mobile display -->
24-
<div class="navbar-header">
25-
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
26-
<span class="sr-only">Toggle navigation</span>
27-
<span class="icon-bar"></span>
28-
<span class="icon-bar"></span>
29-
<span class="icon-bar"></span>
30-
</button>
31-
</div>
32-
<!-- Collect the nav links, forms, and other content for toggling -->
33-
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
34-
<ul class="nav navbar-nav">
35-
<li>
36-
<a href="#">Featured</a>
37-
</li>
38-
<li>
39-
<a href="#">Archives</a>
40-
</li>
41-
<li>
42-
<a href="#">Settings</a>
43-
</li>
44-
</ul>
45-
</div>
46-
<!-- /.navbar-collapse -->
47-
</div>
48-
<!-- /.container -->
49-
</nav>
50-
<!-- Page Content -->
51-
<div class="container" style="margin-top:60px">
52-
<div class="row">
53-
<div class="col-lg-12">
54-
<div id="app"></div>
55-
</div>
56-
</div>
57-
<!-- Call to Action Well -->
58-
<div class="row">
59-
<div class="col-lg-12">
60-
<div class="well text-center">
61-
Ad spot goes here
62-
</div>
63-
</div>
64-
<!-- /.col-lg-12 -->
65-
</div>
66-
<!-- /.row -->
67-
<!-- Content Row -->
68-
<div class="row">
69-
<div class="col-md-4">
70-
<h2>Heading 1</h2>
71-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur.</p>
72-
<a class="btn btn-default" href="#">More Info</a>
73-
</div>
74-
<!-- /.col-md-4 -->
75-
<div class="col-md-4">
76-
<h2>Heading 2</h2>
77-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur.</p>
78-
<a class="btn btn-default" href="#">More Info</a>
79-
</div>
80-
<!-- /.col-md-4 -->
81-
<div class="col-md-4">
82-
<h2>Heading 3</h2>
83-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur.</p>
84-
<a class="btn btn-default" href="#">More Info</a>
85-
</div>
86-
<!-- /.col-md-4 -->
87-
</div>
88-
<!-- /.row -->
89-
<!-- Footer -->
90-
<footer>
91-
<div class="row">
92-
<div class="col-lg-12">
93-
<p>Copyright &copy; KillerNews.net</p>
94-
</div>
95-
</div>
96-
</footer>
97-
</div>
98-
99-
<!-- /.container -->
20+
<div id="app"></div>
10021
<script src="client.min.js"></script>
10122
</body>
10223

‎2-react-router/src/js/client.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ ReactDOM.render(
1515
<Router history={hashHistory}>
1616
<Route path="/" component={Layout}>
1717
<IndexRoute component={Featured}></IndexRoute>
18-
<Route path="archives" component={Archives}></Route>
19-
<Route path="settings" component={Settings}></Route>
18+
<Route path="archives(/:article)" name="archives" component={Archives}></Route>
19+
<Route path="settings" name="settings" component={Settings}></Route>
2020
</Route>
2121
</Router>,
2222
app);

‎2-react-router/src/js/components/Article.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from "react";
2+
3+
export default class extends React.Component {
4+
render() {
5+
const { title } = this.props;
6+
7+
return (
8+
<div class="col-md-4">
9+
<h2>{title}</h2>
10+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur.</p>
11+
<a class="btn btn-default" href="#">More Info</a>
12+
</div>
13+
);
14+
}
15+
}

‎2-react-router/src/js/components/layout/Footer.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react";
2+
3+
4+
export default class Footer extends React.Component {
5+
render() {
6+
return (
7+
<footer>
8+
<div class="row">
9+
<div class="col-lg-12">
10+
<p>Copyright &copy; KillerNews.net</p>
11+
</div>
12+
</div>
13+
</footer>
14+
);
15+
}
16+
}

‎2-react-router/src/js/components/layout/nav.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from "react";
2+
import { IndexLink, Link } from "react-router";
3+
4+
export default class Nav extends React.Component {
5+
render() {
6+
const { location } = this.props;
7+
const featuredClass = location.pathname === "/" ? "active" : "";
8+
const archivesClass = location.pathname.match(/^\/archives/) ? "active" : "";
9+
const settingsClass = location.pathname.match(/^\/settings/) ? "active" : "";
10+
11+
return (
12+
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
13+
<div class="container">
14+
<div class="navbar-header">
15+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
16+
<span class="sr-only">Toggle navigation</span>
17+
<span class="icon-bar"></span>
18+
<span class="icon-bar"></span>
19+
<span class="icon-bar"></span>
20+
</button>
21+
</div>
22+
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
23+
<ul class="nav navbar-nav">
24+
<li class={featuredClass}>
25+
<IndexLink to="/">Featured</IndexLink>
26+
</li>
27+
<li class={archivesClass}>
28+
<Link to="archives">Archives</Link>
29+
</li>
30+
<li class={settingsClass}>
31+
<Link to="settings">Settings</Link>
32+
</li>
33+
</ul>
34+
</div>
35+
</div>
36+
</nav>
37+
);
38+
}
39+
}

‎2-react-router/src/js/pages/Archives.js

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,31 @@
11
import React from "react";
22

3+
import Article from "../components/Article";
4+
35
export default class Archives extends React.Component {
46
render() {
7+
const { query } = this.props.location;
8+
const { params } = this.props;
9+
const { article } = params;
10+
const { date, filter } = query;
11+
12+
const Articles = [
13+
"Some Article",
14+
"Some Other Article",
15+
"Yet Another Article",
16+
"Still More",
17+
"Fake Article",
18+
"Partial Article",
19+
"American Article",
20+
"Mexican Article",
21+
].map((title, i) => <Article key={i} title={title}/> );
22+
523
return (
6-
<h1>Archives</h1>
24+
<div>
25+
<h1>Archives</h1>
26+
article: {article}, date: {date}, filter: {filter}
27+
<div class="row">{Articles}</div>
28+
</div>
729
);
830
}
931
}

‎2-react-router/src/js/pages/Featured.js

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,38 @@
11
import React from "react";
22

3+
import Article from "../components/Article";
4+
35
export default class Featured extends React.Component {
46
render() {
7+
const Articles = [
8+
"Some Article",
9+
"Some Other Article",
10+
"Yet Another Article",
11+
"Still More",
12+
].map((title, i) => <Article key={i} title={title}/> );
13+
14+
const adText = [
15+
"Ad spot #1",
16+
"Ad spot #2",
17+
"Ad spot #3",
18+
"Ad spot #4",
19+
"Ad spot #5",
20+
];
21+
22+
const randomAd = adText[Math.round( Math.random() * (adText.length-1) )];
23+
524
return (
6-
<h1>Featured</h1>
25+
<div>
26+
<div class="row">
27+
<div class="col-lg-12">
28+
<div class="well text-center">
29+
{randomAd}
30+
</div>
31+
</div>
32+
</div>
33+
34+
<div class="row">{Articles}</div>
35+
</div>
736
);
837
}
938
}

‎2-react-router/src/js/pages/Layout.js

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,32 @@
11
import React from "react";
22
import { Link } from "react-router";
33

4-
export default class Layout extends React.Component {
5-
navigate() {
6-
this.props.history.replaceState(null, "/");
7-
}
4+
import Footer from "../components/layout/Footer";
5+
import Nav from "../components/layout/Nav";
86

7+
export default class Layout extends React.Component {
98
render() {
9+
const { history, location } = this.props;
10+
const containerStyle = {
11+
marginTop: "60px"
12+
};
13+
1014
return (
1115
<div>
12-
<h1>KillerNews.net</h1>
13-
{this.props.children}
14-
<Link to="archives" class="btn btn-danger">archives</Link>
15-
<Link to="settings"><button class="btn btn-success">settings</button></Link>
16-
<button onClick={this.navigate.bind(this)}>featured</button>
16+
17+
<Nav {...{history, location}} />
18+
19+
<div class="container" style={containerStyle}>
20+
<div class="row">
21+
<div class="col-lg-12">
22+
<h1>KillerNews.net</h1>
23+
24+
{this.props.children}
25+
26+
</div>
27+
</div>
28+
<Footer/>
29+
</div>
1730
</div>
1831

1932
);

0 commit comments

Comments
 (0)