React Context

context-react-16-3.js

// 1.Create context via createContext()
import React, { createContext } from 'react';

const MediaPathContext = createContext({
  prefixPath: 'cloudfront-production' // as default
});

// 2.Use "Provider" at root component to make any sub-tree component can consume context data
const isProduction = process.env.NODE_ENV === 'production';

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

class App extends React.Component {
  render() {
    return (
      <MediaPathContext.Provider value={{ prefixPath: mediaPath }}>
        <Nav />
        <Main />
        <Footer />
      </MediaPathContext.Provider>
    );
  }
}

// 3.In component that want to use context data just put it as a child of "Consumer" to consume it
const Main = () => (
  <MediaPathContext.Consumer>
    {(context) => (
      <img src={`${context.prefixPath}/landing.jpg`} />
    )}
  </MediaPathContext.Consumer>
);