Developing a new React component in an existing project: how do I see it in the browser?

Question

I have a moderately complex React application, made using create-react-app and thus using react-scripts to e.g. launch the development server.

I want to develop a new React component: a moderately complex input control that will let the user enter structured data. It is going to have buttons to add new entries in lists, dropdowns to pick from available options, etc.

This component isn't necessarily going to appear on the front page of my main React application; it is probably going to take a few clicks to get the application to show it in a state where I can usefully play with it. So I want to be able to get the component into the browser without the rest of the application, and feed it some hand-coded test data. Basically an interactive version of a unit test, so I can look at just that component and decide if I am happy with what it looks like and what it does when I poke it.

I would like to be able to use the React development server to work just on my component, without the rest of the main application being displayed. I want to create a file that says to render my component with certain props, and then show that in the browser with the development server's live-reload set up, so that I can e.g. see what I am doing while writing the CSS.

How do I make this work? It looks like React thinks in terms of there being one web page with one "application" per package.json, and there's no way I can find to say e.g. npm run start -- --page=my-component-demo.html Do I need to make my project into a monorepo with several interlinked Node modules, and put this component in its own create-react-app app that renders a demo page? Do I need to add React routing to my main application, and define some routes that instead of the real application UI render just the demo page, and hope that having the whole application involved doesn't slow down the dev server's rebuilds too much?

Answer 1

The solution I've settled on for now is to use react-demo to define a testbench "demo" for each control I want to work on. The <Demo/> control ends up owning all the state, and I can define some mock state and two-way bind it to whatever my component is meant to control.

Then around that I am using react-demo-library to let me define a component representing a page full of all the demos, which can let me pick the one for the component I am trying to work on. I use Webapck's require.context to loop over all files named .demo.js and load the demos from those into the demo library, so I don't have to maintain a central list of them.

Then I use a react-router-dom BrowserRouter to let me put the demo library at a URL in my app. This is unlikely to work in the production build unless the server cooperates and can do something other than serve the files as they exist on disk, but it works with the React dev server.

The net result is that, between the hash-based routing in react-demo-library and the path-based routing to the demo picker page, each demo page for each different component has its own URL, and the React dev server live reloading works properly; I can edit a component and even if the page needs to refresh I still end up looking at the modified component in the browser.

In theory the dev server is having to think about my whole app at each build, but in practice it is still fast enough.