I created a React component with the following folder structure:
mycomponent git repo
+ dist
+ node_modules
- src
mycomponent.js
.env
.gitignore
README.md
index.js
package.json
yarn.lock
My component can be used by other applications by simply importing it and then using it in JSX. Let's call the following my "demo application" which is hosted on a different git repo:
demo app git repo
import React from 'react';
import mycomponent from 'mycomponent';
function() {
return (
This is my component
<mycomponent />
);
}
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 "example" within my component repository and added a new app (built with create-react-app) there, so the whole repo now looks like this:
mycomponent git repo with example dir
+ 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
This application within the example folder imports mycomponent and uses it in the same way as described above:
example/src/App.js
import React from 'react';
import mycomponent from 'mycomponent';
function() {
return (
This is my component
<mycomponent />
);
}
Now, during development I let this application from the example directory run by doing $ cd example && yarn start. When I change my component, e.g. /src/mycomponent.js then I go to my example folder and run the updateAndRun.sh script. This script looks like this:
example/updateAndRun.sh
#!/bin/bash
cd .. && yarn run dist && cd example
rm -Rf ./node_modules/mycomponent/dist
cp -r ../dist ./node_modules/mycomponent
cp ../index.js ./node_modules/mycomponent
yarn start
As you can see it creates a new build of my component, then copies it into the node_modules folder within the example directory. Then I restart the app using $ yarn start. 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:
- Everytime I do a change to my component code I have to stop the running example app and then run the
updateAndRun.shscript manually. - Manually copying files into
node_modulesjust feels wrong.
Question
What is the best practice here to quickly try out a component written in React without having to push/pull to a different application?
Note – Storybooks
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.
Aucun commentaire:
Enregistrer un commentaire