Switch all components to "manual namespacing", meaning we don't do any ReactElement post-processing.

Author: jareware

demo/react/app/ui/ConversationPanel.js

@@ -7,8 +7,8 @@ const ns = require('../util/css-ns')(__filename);
 class SingleMessage extends React.Component {
 
   render() {
-    return ns(
-      <div className={{ message: true, mine: Math.random() > 0.5 }}>
+    return (
+      <div className={ns({ message: true, mine: Math.random() > 0.5 })}>
         {this.props.message}
       </div>
     );
@@ -19,8 +19,8 @@ class SingleMessage extends React.Component {
 export default class ConversationPanel extends React.Component {
 
   render() {
-    return ns(
-      <Panel className="this">
+    return (
+      <Panel className={ns('this')}>
         {getRandomMessages().map((message, index) => (
           <SingleMessage key={index} message={message} />
         ))}

demo/react/app/ui/ReactDemoApp.js

@@ -9,8 +9,8 @@ const ns = require('../util/css-ns')(__filename);
 export default class ReactDemoApp extends React.Component {
 
   render() {
-    return ns(
-      <div className="this">
+    return (
+      <div className={ns('this')}>
         <ThreadListPanel />
         <ConversationPanel />
       </div>

demo/react/app/ui/ThreadListPanel.js

@@ -10,12 +10,12 @@ const colors = getRandomColors();
 
 // This remains disabled for now, since react-addons-perf can't count instances of stateless functional components (...yet?)
 /*
-const SingleThread = props => ns(
-  <div className="thread">
-    <div className="badge" style={{ background: colors[props.index] }}>{props.name.substr(0, 1)}</div>
-    <div className="details">
-      <div className="name">{props.name}</div>
-      <div className="message">{messages[props.index]}</div>
+const SingleThread = props => (
+  <div className={ns('thread')}>
+    <div className={ns('badge')} style={{ background: colors[props.index] }}>{props.name.substr(0, 1)}</div>
+    <div className={ns('details')}>
+      <div className={ns('name')}>{props.name}</div>
+      <div className={ns('message')}>{messages[props.index]}</div>
     </div>
   </div>
 );
@@ -24,12 +24,12 @@ const SingleThread = props => ns(
 class SingleThread extends React.Component {
 
   render() {
-    return ns(
-      <div className="thread">
-        <div className="badge" style={{ background: colors[this.props.index] }}>{this.props.name.substr(0, 1)}</div>
-        <div className="details">
-          <div className="name">{this.props.name}</div>
-          <div className="message">{messages[this.props.index]}</div>
+    return (
+      <div className={ns('thread')}>
+        <div className={ns('badge')} style={{ background: colors[this.props.index] }}>{this.props.name.substr(0, 1)}</div>
+        <div className={ns('details')}>
+          <div className={ns('name')}>{this.props.name}</div>
+          <div className={ns('message')}>{messages[this.props.index]}</div>
           <div /><div /><div /><div /><div />{/* this cruft is here just to increase (non-namespaced) node count for perf tests */}
         </div>
       </div>
@@ -41,8 +41,8 @@ class SingleThread extends React.Component {
 export default class ThreadListPanel extends React.Component {
 
   render() {
-    return ns(
-      <Panel className="this" header="Your conversations" bsStyle="primary">
+    return (
+      <Panel className={ns('this')} header="Your conversations" bsStyle="primary">
         {names.map((name, index) => (
           <SingleThread key={index} index={index} name={name} />
         ))}