Written by Sean Behan on Fri Nov 16th 2018

Here is some very simple code to render React components dynamically without using a framework or routing library.

It doesn't cover pushState and URL parsing, so in that sense it isn't a routing library. But it does let you render components from other components in a simple way.

const Goodbye = () => {
    return (
    <div onClick={()=>{render(<Hello/>)}}>
      I don't know why you say "Goodbye", I say "Hello, hello, hello".
     </div>
  )
}

const Hello = () => {
  return (
    <div onClick={()=>{render(<Goodbye/>)}}>
      You say "Goodbye" and I say "Hello, hello, hello".
    </div>
  )
}

let render = (component) => {
    let event = new Event('render')
  event.component = component
  document.dispatchEvent(event)
}

document.addEventListener('render', (event)=>{
    ReactDOM.render(event.component, document.getElementById('root'))   
})

render(<Hello/>)

Here is a JSFiddle for it https://jsfiddle.net/L2yq8sjx/2/


Tagged with..
#react #reactjs #js #javascript #react-native

Just finishing up brewing up some fresh ground comments...