Tools: current to better

package.json

{
  "scripts": {
    "start": "server.js"
  }
}

packages_component1_data1.json

{ "foo" : "bar" }

packages_component1_data2.json

{ "fizz" : "buzz" }

packages_component1_index.jsx

import React from 'react'
import { render } from 'react-dom'

import ActualComponent from './src/ActualComponent.jsx'

render(
  <ActualComponent endpoint="./data1.json" someOtherProp="whatever I want" />
  document.body
)

server.js

// Pseudo-code
export default function(){
  const packages = readDirectory('./packages')
  
  const compile = packages.forEach(package => {
    transform({
      source: getFile('./packages/' + package + '/index.jsx'),
      output: '/tmp/' + package + '/index.js',
    })
  })
  
  watch(component + '**/*.jsx', change => {
    compile()
  })
  
  compile()
  
  server('/tmp')
}