Skip to content

Commit 2c13e65

Browse files
mridgwaymridgway
committed
Merge pull request YahooArchive#159 from yahoo/react14
Update to React 0.14 except for react-router; Add hot reloading to re…
2 parents 941e58e + 941c81a commit 2c13e65

29 files changed

+380
-224
lines changed

‎chat/client.js

+5-13
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
/*global App, document, window, location */
66
'use strict';
77
var React = require('react');
8+
var ReactDOM = require('react-dom');
89
var debug = require('debug');
910
var bootstrapDebug = debug('Example');
1011
var app = require('./app');
@@ -13,35 +14,26 @@ var RouteStore = require('./stores/RouteStore');
1314
var navigateAction = require('fluxible-router').navigateAction;
1415
var createElement = require('fluxible-addons-react').createElementWithContext;
1516

16-
window.React = React; // For chrome dev tool support
17-
debug.enable('*');
18-
1917
bootstrapDebug('rehydrating app');
2018
app.rehydrate(dehydratedState, function (err, context) {
2119
if (err) {
2220
throw err;
2321
}
2422

25-
window.context = context; // For debugging
23+
window.debug = debug; // Allow control over debug logging
24+
window.context = context; // For accessing from browser console
2625

2726
bootstrapDebug('React Rendering');
2827
var mountNode = document.getElementById('app');
29-
React.render(createElement(context), mountNode, function () {
28+
ReactDOM.render(createElement(context), mountNode, function () {
3029
bootstrapDebug('React Rendered');
3130
});
3231

3332
// If server did not load data, fire off the navigateAction
3433
if (!context.getStore(RouteStore).getCurrentRoute()) {
3534
setTimeout(function () {
3635
context.executeAction(navigateAction, { url: window.location.pathname + window.location.search, type: 'pageload' }, function (err) {
37-
if (err) {
38-
if (err.statusCode && err.statusCode === 404) {
39-
next();
40-
} else {
41-
next(err);
42-
}
43-
return;
44-
}
36+
throw err;
4537
});
4638
}, 1000);
4739
}

‎chat/components/Html.jsx

+23-28
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,30 @@
66
var React = require('react');
77

88
/**
9-
* React class to handle the rendering of the HTML head section
10-
*
11-
* @class Html
12-
* @constructor
9+
* Stateless React component to handle the rendering of the HTML head section
1310
*/
14-
var Html = React.createClass({
15-
/**
16-
* Refer to React documentation render
17-
*
18-
* @method render
19-
* @return {Object} HTML head section
20-
*/
21-
render: function() {
22-
return (
23-
<html>
24-
<head>
25-
<meta charSet="utf-8" />
26-
<title>{this.props.title}</title>
27-
<meta name="viewport" content="width=device-width, user-scalable=no" />
28-
<link rel="stylesheet" href="https://rawgit.com/facebook/flux/master/examples/flux-chat/css/chatapp.css" />
29-
</head>
30-
<body>
31-
<div id="app" dangerouslySetInnerHTML={{__html: this.props.markup}}></div>
32-
</body>
33-
<script dangerouslySetInnerHTML={{__html: this.props.state}}></script>
11+
var Html = function (props) {
12+
return (
13+
<html>
14+
<head>
15+
<meta charSet="utf-8" />
16+
<title>{props.title}</title>
17+
<meta name="viewport" content="width=device-width, user-scalable=no" />
18+
<link rel="stylesheet" href="https://rawgit.com/facebook/flux/master/examples/flux-chat/css/chatapp.css" />
19+
</head>
20+
<body>
21+
<div id="app" dangerouslySetInnerHTML={{__html: props.markup}}></div>
22+
<script dangerouslySetInnerHTML={{__html: props.state}}></script>
3423
<script src="/public/js/client.js" defer></script>
35-
</html>
36-
);
37-
}
38-
});
24+
</body>
25+
</html>
26+
);
27+
};
28+
29+
Html.propTypes = {
30+
title: React.PropTypes.object,
31+
markup: React.PropTypes.string.isRequired,
32+
state: React.PropTypes.string.isRequired
33+
};
3934

4035
module.exports = Html;

‎chat/components/MessageListItem.jsx

+15-19
Original file line numberDiff line numberDiff line change
@@ -18,25 +18,21 @@ var React = require('react');
1818

1919
var ReactPropTypes = React.PropTypes;
2020

21-
var MessageListItem = React.createClass({
21+
var MessageListItem = function (props) {
22+
var message = props.message;
23+
return (
24+
<li className="message-list-item">
25+
<h5 className="message-author-name">{message.authorName}</h5>
26+
<div className="message-time">
27+
{(new Date(message.timestamp)).toTimeString()}
28+
</div>
29+
<div className="message-text">{message.text}</div>
30+
</li>
31+
);
32+
};
2233

23-
propTypes: {
24-
message: ReactPropTypes.object
25-
},
26-
27-
render: function() {
28-
var message = this.props.message;
29-
return (
30-
<li className="message-list-item">
31-
<h5 className="message-author-name">{message.authorName}</h5>
32-
<div className="message-time">
33-
{(new Date(message.timestamp)).toTimeString()}
34-
</div>
35-
<div className="message-text">{message.text}</div>
36-
</li>
37-
);
38-
}
39-
40-
});
34+
MessageListItem.propTypes = {
35+
message: ReactPropTypes.object
36+
};
4137

4238
module.exports = MessageListItem;

‎chat/components/MessageSection.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ var MessageSection = React.createClass({
5454
},
5555

5656
_scrollToBottom: function() {
57-
var ul = this.refs.messageList.getDOMNode();
57+
var ul = this.refs.messageList;
5858
ul.scrollTop = ul.scrollHeight;
5959
}
6060

‎chat/components/ThreadListItem.jsx

+23-27
Original file line numberDiff line numberDiff line change
@@ -16,35 +16,31 @@
1616
'use strict';
1717
var React = require('react');
1818
var classNames = require('classnames');
19-
2019
var ReactPropTypes = React.PropTypes;
2120

22-
var ThreadListItem = React.createClass({
23-
24-
propTypes: {
25-
thread: ReactPropTypes.object,
26-
currentThreadID: ReactPropTypes.string
27-
},
21+
var ThreadListItem = function (props) {
22+
var thread = props.thread;
23+
var lastMessage = thread.lastMessage;
24+
var classSet = classNames({
25+
'thread-list-item': true,
26+
'active': props.isActive
27+
});
28+
return (
29+
<li className={classSet}>
30+
<h5 className="thread-name">{thread.name}</h5>
31+
<div className="thread-time">
32+
{(new Date(lastMessage.timestamp)).toTimeString()}
33+
</div>
34+
<div className="thread-last-message">
35+
{lastMessage.text}
36+
</div>
37+
</li>
38+
);
39+
};
2840

29-
render: function() {
30-
var thread = this.props.thread;
31-
var lastMessage = thread.lastMessage;
32-
var classSet = classNames({
33-
'thread-list-item': true,
34-
'active': this.props.isActive
35-
});
36-
return (
37-
<li className={classSet}>
38-
<h5 className="thread-name">{thread.name}</h5>
39-
<div className="thread-time">
40-
{(new Date(lastMessage.timestamp)).toTimeString()}
41-
</div>
42-
<div className="thread-last-message">
43-
{lastMessage.text}
44-
</div>
45-
</li>
46-
);
47-
},
48-
});
41+
ThreadListItem.propTypes = {
42+
thread: ReactPropTypes.object,
43+
currentThreadID: ReactPropTypes.string
44+
};
4945

5046
module.exports = ThreadListItem;

‎chat/server.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@ var cookieParser = require('cookie-parser');
1111
var csrf = require('csurf');
1212
var debug = require('debug')('Example');
1313
var React = require('react');
14+
var ReactDOM = require('react-dom/server');
1415
var app = require('./app');
15-
var HtmlComponent = React.createFactory(require('./components/Html.jsx'));
16+
var HtmlComponent = require('./components/Html.jsx');
1617
var navigateAction = require('fluxible-router').navigateAction;
1718
var createElement = require('fluxible-addons-react').createElementWithContext;
1819

@@ -39,11 +40,11 @@ function renderPage(req, res, context) {
3940
if ('0' === req.query.render) {
4041
mainMarkup = '';
4142
} else {
42-
mainMarkup = React.renderToString(createElement(context));
43+
mainMarkup = ReactDOM.renderToString(createElement(context));
4344
}
4445

4546
debug('Rendering Application component into html');
46-
var html = React.renderToStaticMarkup(HtmlComponent({
47+
var html = ReactDOM.renderToStaticMarkup(React.createElement(HtmlComponent, {
4748
state: exposed,
4849
markup: mainMarkup
4950
}));

‎fluxible-router/client.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,25 @@
44
*/
55
/*global App, document, window */
66
import React from 'react';
7+
import {render} from 'react-dom';
78
import debug from 'debug';
89
import app from './app';
910
import { createElementWithContext } from 'fluxible-addons-react';
1011

1112
const bootstrapDebug = debug('Example');
1213
const dehydratedState = window.App; // Sent from the server
1314

14-
window.React = React; // For chrome dev tool support
15-
debug.enable('*');
16-
1715
bootstrapDebug('rehydrating app');
1816
app.rehydrate(dehydratedState, function (err, context) {
1917
if (err) {
2018
throw err;
2119
}
20+
window.debug = debug;
2221
window.context = context;
2322
const mountNode = document.getElementById('app');
2423

2524
bootstrapDebug('React Rendering');
26-
React.render(createElementWithContext(context), mountNode, () => {
25+
render(createElementWithContext(context), mountNode, () => {
2726
bootstrapDebug('React Rendered');
2827
});
2928
});

‎fluxible-router/components/About.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,8 @@
44
*/
55
import React from 'react';
66

7-
class About extends React.Component {
8-
render() {
9-
return <p>This is a description of the site.</p>;
10-
}
7+
function About () {
8+
return <p>This is a description of the site.</p>;
119
}
1210

1311
export default About;

‎fluxible-router/components/Home.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,8 @@
44
*/
55
import React from 'react';
66

7-
class Home extends React.Component {
8-
render() {
9-
return <p>Welcome to the site!</p>;
10-
}
7+
function Home () {
8+
return <p>Welcome to the site!</p>;
119
}
1210

1311
export default Home;

‎fluxible-router/components/Html.js

+21-17
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,28 @@
55
import React from 'react';
66
import ApplicationStore from '../stores/ApplicationStore';
77

8-
class HtmlComponent extends React.Component {
9-
render() {
10-
return (
11-
<html>
12-
<head>
13-
<meta charSet="utf-8" />
14-
<title>{this.props.context.getStore(ApplicationStore).getPageTitle()}</title>
15-
<meta name="viewport" content="width=device-width, user-scalable=no" />
16-
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css" />
17-
</head>
18-
<body>
19-
<div id="app" dangerouslySetInnerHTML={{__html: this.props.markup}}></div>
20-
</body>
21-
<script dangerouslySetInnerHTML={{__html: this.props.state}}></script>
8+
function HtmlComponent (props) {
9+
return (
10+
<html>
11+
<head>
12+
<meta charSet="utf-8" />
13+
<title>{props.context.getStore(ApplicationStore).getPageTitle()}</title>
14+
<meta name="viewport" content="width=device-width, user-scalable=no" />
15+
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css" />
16+
</head>
17+
<body>
18+
<div id="app" dangerouslySetInnerHTML={{__html: props.markup}}></div>
19+
<script dangerouslySetInnerHTML={{__html: props.state}}></script>
2220
<script src="/public/js/client.js" defer></script>
23-
</html>
24-
)
25-
}
21+
</body>
22+
</html>
23+
);
2624
}
2725

26+
HtmlComponent.propTypes = {
27+
context: React.PropTypes.object.isRequired,
28+
markup: React.PropTypes.string.isRequired,
29+
state: React.PropTypes.string.isRequired
30+
};
31+
2832
export default HtmlComponent;

‎fluxible-router/components/Nav.js

+7-9
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,13 @@
55
import React from 'react';
66
import {NavLink} from 'fluxible-router';
77

8-
class Nav extends React.Component {
9-
render() {
10-
return (
11-
<ul className="pure-menu pure-menu-open pure-menu-horizontal">
12-
<li><NavLink routeName="home" activeStyle={{backgroundColor: '#ccc'}}>Home</NavLink></li>
13-
<li><NavLink routeName="about" activeStyle={{backgroundColor: '#ccc'}}>About</NavLink></li>
14-
</ul>
15-
);
16-
}
8+
function Nav () {
9+
return (
10+
<ul className="pure-menu pure-menu-open pure-menu-horizontal">
11+
<li><NavLink routeName="home" activeStyle={{backgroundColor: '#ccc'}}>Home</NavLink></li>
12+
<li><NavLink routeName="about" activeStyle={{backgroundColor: '#ccc'}}>About</NavLink></li>
13+
</ul>
14+
);
1715
}
1816

1917
export default Nav;

‎fluxible-router/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"main": "server.js",
77
"author": "Michael Ridgway <[email protected]>",
88
"scripts": {
9-
"dev": "grunt --gruntfile ../Gruntfile.js --taskName fluxible-router"
9+
"dev": "node webpack-dev-server.js & PORT=3001 nodemon start.js -e js,jsx",
10+
"start": "node start.js"
1011
}
1112
}

0 commit comments

Comments
 (0)