React base (JSX) Class syntax

by jonahe

HTML

<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<div id="root"></div>

CSS

pre {
  display: inline-block;
  padding: 3px 3px;
  background-color: #e9e9e9;
}

Babel + JSX

const messages = [
	{ id: 1, message: 'TEst 1', firstName: 'jonahe1', lastName: 'last1'},
  { id: 2, message: 'TEst 2', firstName: 'jonahe2', lastName: 'last2'}, 
  { id: 3, message: 'TEst 3', firstName: 'jonahe3', lastName: 'last3'}, 
  { id: 4, message: 'TEst 4', firstName: 'jonahe4', lastName: 'last4'}
];
const loggedInAs = { firstName: 'jonahe2', lastName: 'last2' };

const Message = (props, context) => {
  const {id, message, firstName, lastName} = props.data;
  const loggedInAs = context.loggedInAs;
  const isAuthor = 
  	firstName == loggedInAs.firstName && lastName == loggedInAs.lastName;
  const fullName = firstName + ' ' + lastName;
  return (
    <li>"{ message }" - { isAuthor ? 'You' : fullName }</li>
  );
}
// 
Message.contextTypes = { loggedInAs: React.PropTypes.object }

class MessageList extends React.Component {
	render() {
  	console.log(this.context);
  	return (
      <div>
        <h1>Messages</h1>
        <ul>
          {this.props.children}
        </ul>
        <br/>
        <span>
          In MessageList <pre>this.context</pre> still doesn't show 
          any sign of <pre>loggedInAs</pre> because we only specified 
          that we were interested in <pre>'someOtherValue'</pre>: <br/>
          <pre>{ JSON.stringify(this.context) }</pre>
        </span>
      </div>
   	);
  }
};
MessageList.contextTypes = { someOtherValue: React.PropTypes.string };


class App extends React.Component {
	// this determines what the child components will get when they access this.context
	getChildContext() {
  	return { loggedInAs: this.props.loggedInUser, someOtherValue: 'green' };
  }
  render() {
		const {messages} = this.props;
    return (
      <div>
        <MessageList>
          { messages.map( message => <Message key={ message.id } data={ message } />) }
        </MessageList>
      </div>
    );
  }
}
// NEEDED! Tells react to automatically pass this down to
// all children that has specified that they will use context (see Message...