Adaptive Web Apps

adaptive_web_app.js

import React from 'react';
import ReactDOM from 'react-dom';
import Service from './service';

const runApp = (App) =>
  ReactDOM.render(<Service.Provider><App /></Service.Provider>, document.getElementById('root'))

import('ontouchstart' in window ? './mobile' : './desktop').then((app) => runApp(app))

desktop.js

import React from 'react';
import Service from './service';

const Desktop = (props) =>
  <Service.Consumer>
      {service => <h1>Hello {service.user.current.name}, from Desktop</h1>}
  </Service.Consumer>

export default Desktop;

service.js

import React from 'react';

const Service = React.createContext({user: {current: {name: "John Doe"}}});

export default Service;

touch.js

import React from 'react';
import Service from './service';

const Touch = (props) =>
  <Service.Consumer>
      {service => <h1>Hello {service.user.current.name}, from Touch</h1>}
  </Service.Consumer>

export default Touch;