MicroBenz

class Button extends React.Component {
  render() {
    return (
      <button style={{background: this.context.color}}>
        {this.props.children}
      </button>
    );
  }
}

MicroBenz

class MessageList extends React.Component {
  getChildContext() {
    // Declare context object
    return {color: "purple"};
  }

  render() {
    const children = this.props.messages.map((message) =>
      <Message text={message.text} />
    );

MicroBenz

class Button extends React.Component {
  render() {
    return (
      <button style={{background: this.props.color}}>
        {this.props.children}
      </button>
    );
  }
}

MicroBenz

import React from 'react';
import PropTypes from 'prop-types';

const Image = (props, context) => (
  <img src={context.path(props.image, 'thumbnails')} />
);

Image.propTypes = {
  image: PropTypes.string
};

MicroBenz

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class UIKitContext extends Component {
  getChildContext() {
    return {
      path: (image, type) => `${this.props.prefixPath}/${type}/${image}`
    };
  }

MicroBenz

const isProduction = process.env.NODE_ENV === 'production';

const mediaPath = isProduction ? 'cloudfront-production-path' : 'cloudfront-development-path';

export const path = (image, type) => `${mediaPath}/${type}/${image}`;

MicroBenz

const Parent = props => (
  <div>
    <h1>Here is parent</h1>
    <Child title="From Parent" />
  </div>
);

const Child = ({ title }) => (
  <p>Here is child {title}</p>
);

MicroBenz

class ParentComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { choice: [] };
  }
  render() {
    return (
      <RadioGroup
        onChange={value => this.setState({ choice: value })}
        value={this.state.choice}

MicroBenz

// ParentComponent.js
export default class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent number={1} />
        <ChildComponent number={2} />
        <ChildComponent number={3} />
        <ChildComponent number={4} />
      </div>

MicroBenz

import React from 'react';

export default class BasicComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello React</h1>
      </div>
    );
  }