React component html preview during development-CodePudding

I found a generic open source react component on github that I want to modify and use in my own react project. That component is in a project using rollup as the bundler. It's a very simple component with only one file, src/index.tsx. Included in the project are a rollup.config.js and tsconfig.json.

I'd prefer to fork the project and modify it it's own repository and include it in my project as opposed to just copying the code into my project.

In order to modify the component I'd like to be able to see it in a html page as I make changes, as I would when working on a create-react-app project.

What is the typical development workflow when working in a react project that only includes components? How exactly can I preview changes?

I've tried making another react app as a sub-project within the component project and importing the bundled output of the parent project, although it compiled successfully is giving me this error, (I suspect the issue of duplicate react).

CodePudding user response：

Posting my solution in case it helps anyone.

What I wanted to do was visually see the changes I was making to the react component. Storybook is great for this but if the component is a github fork of a rollup bundle this may be useful.

What I ended up doing was clone the library and import it locally into my react project. For example if my react project was projects/react-app and my component was component-project, in projects/react-app run npm install ../component-project.

Then I linked both projects to a global version of react. This was necessary so both the react app and component bundle use the same version of react during development. Otherwise you get weird errors trying to use hooks.

I resolved this by following the steps in this answer:

1. In Your Application:
a) cd node_modules/react && npm link
b) cd node_modules/react-dom && npm link

2. In Your Library
a) npm link react
b) npm link react-dom

From there you can start your development server and watch for changes with rollup and see your changes as you make them in the react component library. After making the changes I wanted I published the library to github packages to continue using in my CD workflow.