title: What's best practice to quickly try out a React component?
body: <p>I created a React component with the following folder structure:</p>
  <h3>mycomponent git repo</h3>
  <pre><code>+ dist
  + node_modules
  - src
      mycomponent.js
    .env
    .gitignore
    README.md
    index.js
    package.json
    yarn.lock
  </code></pre>
  <p>My component can be used by other applications by simply importing it and then using it in JSX. Let's call the following my &quot;demo application&quot; which is hosted on a different git repo:</p>
  <h3>demo app git repo</h3>
  <pre><code>import React from 'react';
  import mycomponent from 'mycomponent';
  
  function() {
    return (
      This is my component
      &lt;mycomponent /&gt;
    );
  }
  </code></pre>
  <p>During development of my component I need to continuously edit code and then test the result. Obviously, it is very cumbersome to push every change to Git and NPM, then pull it down in my demo app just to see the result. So I created a new folder called &quot;example&quot; within my component repository and added a new app (built with create-react-app) there, so the whole repo now looks like this:</p>
  <h3>mycomponent git repo with example dir</h3>
  <pre><code>+ dist
  - example
    + node_modules
    - src
        App.js
        index.js
        index.scss
      .env
      README.md
      package.json
      updateAndRun.sh
      yarn.lock
  + node_modules
  - src
      mycomponent.js
    .env
    .gitignore
    README.md
    index.js
    package.json
    yarn.lock
  </code></pre>
  <p>This application within the <code>example</code> folder imports <code>mycomponent</code> and uses it in the same way as described above:</p>
  <h3>example/src/App.js</h3>
  <pre><code>import React from 'react';
  import mycomponent from 'mycomponent';
  
  function() {
    return (
      This is my component
      &lt;mycomponent /&gt;
    );
  }
  </code></pre>
  <p>Now, during development I let this application from the example directory run by doing <code>$ cd example &amp;&amp; yarn start</code>. When I change my component, e.g. <code>/src/mycomponent.js</code> then I go to my example folder and run the <code>updateAndRun.sh</code> script. This script looks like this:</p>
  <h3>example/updateAndRun.sh</h3>
  <pre><code>#!/bin/bash
  
  cd .. &amp;&amp; yarn run dist &amp;&amp; cd example
  rm -Rf ./node_modules/mycomponent/dist
  cp -r ../dist ./node_modules/mycomponent
  cp ../index.js ./node_modules/mycomponent
  yarn start
  </code></pre>
  <p>As you can see it creates a new build of my component, then copies it into the <code>node_modules</code> folder within the <code>example</code> directory. Then I restart the app using <code>$ yarn start</code>. This allows me to quickly try out if my component would work as expected within a real application. There are some downsides to this though:</p>
  <ol>
  <li>Everytime I do a change to my component code I have to stop the running example app and then run the <code>updateAndRun.sh</code> script manually.</li>
  <li>Manually copying files into <code>node_modules</code> just feels wrong.</li>
  </ol>
  <h1>Question</h1>
  <p>What is the best practice here to quickly try out a component written in React without having to push/pull to a different application?</p>
  <h2>Note – Storybooks</h2>
  <p>I am aware of Storybooks. Problem here is that I cannot control the surrounding area of where my component is embedded into. For example, Storybooks would create a navigation bar on the left, has an overall light theme (I need dark) and a lot of other stuff which I don't want. I want to be able to create a custom application and see how my component looks and behaves in there.</p>