Skip to content

Commit 664fead

Browse files
cassiozencassiozen
committed
Complete example for chapter 8. Closes pro-react#1 
1 parent bd70e65 commit 664fead

File tree

17 files changed

+213
-91
lines changed

17 files changed

+213
-91
lines changed

‎chapter 8/universal-react/.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015","react"]
3+
}

‎chapter 8/universal-react/app/components/App.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React, {Component} from 'react';
2+
import { Link } from 'react-router'
3+
4+
class App extends Component {
5+
render(){
6+
return(
7+
<div>
8+
<nav>
9+
<Link to='/'>Home</Link>{' '}
10+
<Link to='/contacts'>Contacts</Link>
11+
</nav>
12+
<div>
13+
{this.props.children}
14+
</div>
15+
</div>
16+
)
17+
}
18+
};
19+
20+
export default App;

chapter 8/universal-react/components/ContactItem.js renamed to chapter 8/universal-react/app/components/ContactItem.js

File renamed without changes.

chapter 8/universal-react/components/ContactList.js renamed to chapter 8/universal-react/app/components/ContactList.js

File renamed without changes.

‎chapter 8/universal-react/app/components/ContactsApp.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React, {Component, PropTypes} from 'react'; import fetch from 'isomorphic-fetch';
2+
import ContactList from './ContactList';
3+
import SearchBar from './SearchBar';
4+
5+
class ContactsApp extends Component {
6+
constructor(){
7+
super(...arguments);
8+
this.state = {
9+
contacts: this.props.initialData || [],
10+
filterText: ''
11+
}
12+
}
13+
componentDidMount(){
14+
if (!this.props.initialData) {
15+
ContactsApp.requestInitialData().then(contacts => {
16+
this.setState({ contacts });
17+
});
18+
}
19+
}
20+
handleUserInput(searchTerm){
21+
this.setState({filterText:searchTerm})
22+
}
23+
render(){
24+
return(
25+
<div>
26+
<SearchBar filterText={this.state.filterText} onUserInput={this.handleUserInput.bind(this)} />
27+
<ContactList contacts={this.props.initialData} filterText={this.state.filterText}/>
28+
</div>
29+
)
30+
}
31+
};
32+
33+
ContactsApp.propTypes = {
34+
initialData: PropTypes.any
35+
};
36+
37+
ContactsApp.requestInitialData = () => {
38+
return fetch('http://localhost:3000/contacts.json')
39+
.then((response) => response.json());
40+
};
41+
42+
export default ContactsApp;

‎chapter 8/universal-react/app/components/Home.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React, {Component} from 'react';
2+
3+
class Home extends Component {
4+
render(){
5+
return <h1>Home</h1>;
6+
}
7+
};
8+
9+
export default Home;

chapter 8/universal-react/components/SearchBar.js renamed to chapter 8/universal-react/app/components/SearchBar.js

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import React, {Component} from 'react';
1+
import React, {Component, PropTypes} from 'react';
22

3-
class SearchBar extends React.Component {
3+
class SearchBar extends Component {
44
handleChange(event){
55
this.props.onUserInput(event.target.value)
66
}
7-
87
render(){
98
return <input type="search"
109
placeholder="search"
@@ -13,8 +12,7 @@ class SearchBar extends React.Component {
1312
}
1413
}
1514
SearchBar.propTypes = {
16-
onUserInput: React.PropTypes.func.isRequired,
17-
filterText: React.PropTypes.string.isRequired
15+
onUserInput: PropTypes.func.isRequired,
16+
filterText: PropTypes.string.isRequired
1817
}
19-
2018
export default SearchBar;

‎chapter 8/universal-react/app/routes.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
import { Route, IndexRoute } from 'react-router';
3+
import App from './components/App';
4+
import Home from './components/Home';
5+
import ContactsApp from './components/ContactsApp';
6+
7+
export default (
8+
<Route path="/" component={App}>
9+
<IndexRoute component={Home} />
10+
<Route path="contacts" component={ContactsApp} />
11+
</Route>
12+
);

‎chapter 8/universal-react/browser.js‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,22 @@
11
import React from 'react';
22
import { render } from 'react-dom';
3-
import ContactsApp from './components/ContactsApp';
3+
import { Router } from 'react-router';
4+
import { createHistory } from 'history';
5+
import routes from './app/routes';
46

5-
render(<ContactsApp contacts={[{
6-
"name": "Dan Abramov",
7-
"email": "gaearon@somewhere.com"
8-
}]} />, document.getElementById('root'));
7+
let handleCreateElement = (Component, props) => {
8+
if(Component.hasOwnProperty('requestInitialData')){
9+
let initialData = document.getElementById('initial-data').textContent;
10+
if(initialData.length>0){
11+
initialData = JSON.parse(initialData);
12+
}
13+
return <Component initialData={initialData} {...props} />;
14+
} else {
15+
return <Component {...props} />;
16+
}
17+
}
18+
19+
render(
20+
<Router history={createHistory()} createElement={handleCreateElement}>{routes}</Router>,
21+
document.getElementById('root')
22+
)

‎chapter 8/universal-react/components/ContactsApp.js‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

0 commit comments

Comments
 (0)