title: How can I export a React Component as an NPM package to use in separate projects?
body: <p>I have created a React component inside a project that I'd like to use in multiple projects.  At the moment, I only care about doing this locally and for development.  The React Component is rendered into the root div, the project uses webpack and babel to transpile JSX, ES6 and some ES7 features into a bundle.</p>
  
  <p>I thought it would be simple to export this component such that I can simply run <code>npm install MyComponent</code> and begin using it in a fresh project.  However, I find it isn't so straight forward.  In particular, I've been reading for hours and hours and only seem to be getting more confused.  </p>
  
  <p>If my end goal is to keep developing 'MyComponent' in its containing project, while using 'MyComponent' in any number of other local projects, what are my options?  The first thing I did was change the <code>main</code> key of my <code>package.json</code> to <code>/src/components/MyComponent</code> and run <code>npm pack</code>.  This produces a <code>tgz</code> file I can install via its absolute filepath in other projects.  However, I found that the es6 and jsx was not being transpiled and so my client projects would be unable to parse <code>MyComponent</code>.  I then used webpack to transpile into <code>lib/MyComponent</code>, but when I have <code>import MyComponent from './path/to/MyComponent-1.0.0.tgz</code> I'd only see <code>{}</code> (an empty object) in the console.  </p>
  
  <p>Searching for solutions to my problem turn up many different approaches pulling together NPM, Grunt, Gulp, Babel, Webpack, etc..  And I am worried it will be many many more hours (days?) before I can grind that down to something understandable.</p>
  
  <p>Given my requirements, what is the simplest solution I can implement to 1) compile down my React Component to the simplest to import module 2) import it into any local projects 3) continue to develop the package in the original host project and have changes easily propagate to client projects.</p>