<div id='app'></div>
@import url(https://fonts.googleapis.com/css?family=Roboto:100);

h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  margin: 10px;
  width: 60%;
}
class Provider extends React.Component {
  // Initialize some context
  getChildContext() {
    return {
      message: 'Stateless functional components can access context as well.'
    }
  }
  
  render() {
    return(
      <StatelessChild />
    );
  }
}

// Context-provider property
Provider.childContextTypes = {
  message: React.PropTypes.string
};

// Here we can access context inside our stateless child by passing it as the second argument to the function
const StatelessChild = (props, context) => {
  return <h2>{context.message}</h2>
};

// Context-user property
StatelessChild.contextTypes = {
  message: React.PropTypes.string
};

ReactDOM.render(<Provider />, document.getElementById('app'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://fb.me/react-15.1.0.min.js
  2. https://fb.me/react-dom-15.1.0.min.js