how can we share react components across repositories - reactjs

I have three different repos based o React.js and flux architecture(actions/store/utils model) on bitbucket and I want to use some UI components across these repos.
What could be the best way to achieve this, and maintain versions if possible.

Move your components into a separate repository, google it how to set up that repo with NPM
as a package. Then in the other repos you can install the first one as an NPM dependency. You can support multiple versions just like you probably already doing with third party npm packages.
If you want to go further you can setup your own npm registry to store all these.

Related

How to share node modules folder between different react applications

I have a few react applications, for each application, I am installing dependencies which I mentioned in package.json(node_modules) and for all applications, these dependencies are the same.
If in this case, why do I maintain the same duplicate files in multiple places, and also it is a waste of memory.
Is there any way to install all my package.json dependencies at one location and to share it between the components?
I think it is reasonable to keep duplicating different package.json files for different applications.
However I think it is possible to create an npm package that would include all your dependencies and then make your project just to use this one npm package.

Integrate storybook to react

I have two repositories in github: with storybook and with rect project. How do I need to properly arrange the folders so that I can update the repositories separately and use components from the storybook in the project? Thanks
There could be two scenarios:
1) You want to independently develop components as a separate repository using storybook which is the case in most cases.
Here we have several options to share components:-
Publish onto npm and use as any other react component from npm
like react-select etc.
You want to use this component internally only in internal
projects. use git ssh Refer to this
link for more info.
2) You want to share components only in specific repositories.
In this case you could combine all those repositories using lerna and one of the repository could be for storybook. So all projects are under lerna so easily shareable.
Hope that helps!!!

How to create a reusable component in another applications in reactjs?

I'm studying React, and would like to know how best way to create a private component to reuse it in other projects.
Thanks!
Probably npm private package is what you are looking for. Then, you can just install your package by npm install and use components from it everywhere you want. However, this is paid feature of npm.
The alternative is an npm proxy registry. For example Verdaccio allows something like that. Similiar solution to the previous one, but you have to configure the registry yourself and use it in all your projects instead of default npm registry.
You can also just publish a public npm package if it's ok for you that it'll be available for everyone. It's probably the easiest solution for starters.
Alternatively, what we used in our project, were Git submodules. You place your shared components into a separate Git repository. Then, you link that as a submodule in you main project and you can use your components just like they were a part of your project. If you use Git, it might be the easiest option for you.
And finally, if you treat you projects as playground, you always can use copy-paste approach :) I don't recommend it in any commercial projects as maintaining the code in many places is pain in the neck.

Deploy React components to many personal projects

I hope this is a reasonable forum for this question.
I have a library of React components that I've developed that I'd like to use in multiple personal projects. When I update/improve that library I'd like it to allow me to update in all projects where it is used.
I'm using Meteor as a build tool, which will prompt me when there is an update available for a dependency it's using, so I assume it'd be an NPM module or something. It is checked in to GitHub and I don't mind if it's public.
What would be the best way to achieve this?
I know two ways:
Publish your module on NPM
Link using npm link
For the first one, your module will be public unless you pay NPM for a private module.
The second one, make your module available locally only (It is used for a development purpose, but it fits your needs).
https://docs.npmjs.com/cli/link
If you have your package published on GitHub, you can simply create dependency by linking to tarball/master. If your path is https://github.com/my-nick/my-package, just add to your dependencies in your project's package.json:
"my-package": "https://github.com/my-nick/my-package/tarball/master"
If you have your package well described (package.json file with name, main and version attributes) it should works after meteor npm install.
Of course it works for Meteor 1.3 and higher only, lower versions don't support npm.
I did not use is personally yet, but an frequently mentioned tool for this purpose is https://lernajs.io/, which is e.g. used by create-react-app.

Reusing react components across projects

I want to split my web project into three: front-end, back-end and super-admin.
What is the best way to re-use the components across code bases? Npm packages? That seems hard to maintain:
Open component dev package
Make changes
Push changes
Tag version
Update all projects
Seems complex and prone to errors. Is there a better way?
Depends on if you need to use different versions of the shared components from different projects. If so, you probably need to make a versioned npm package. However, if you just want to share the packages and use the same version everywhere, you have other options. For one, you don't have to actually build and publish an npm packge, you can just use npm link. This will basically create a symlink to your shared code in node_modules of the other projects.
Alternatively, you can do it without any npm package at all, just have the shared components in a separate project (directory) and import them in javascript through an alias, using a bundling system (webpack alias / browserify aliasify).

Resources