React

by Kikketer

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

React

class SafetyNet extends React.Component {
	constructor() {
  	super()
    this.state = { jsError: null }
  }
  
  render() {
  	if(!this.state.jsError) {
  	// FoundComponent is created based on props: https://reactjs.org/docs/jsx-in-depth.html#choosing-the-type-at-runtime
  	const FoundComponent = ComponentA
	  	return (<FoundComponent />)
    } else {
  	  return <ErrorComponent />
    }
  }
}

class ComponentA extends React.Component {
	render() {
	  return (<div>Component A</div>)
  }
}

class ComponentB extends React.Component {
	render() {
	  return (<div>Component B</div>)
  }
}

class ErrorComponent extends React.Component {
	render() {
  	return <div>Error Found</div>
  }
}

ReactDOM.render(<SafetyNet />, document.querySelector("#app"))