How to create a reusable component in another applications in reactjs? - 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.

Related

Best practices for C project git submodule building

I have a C project using autotools and make to build my project. I need to use code that as far as I can tell is only available on github. What is the best practice for including this code in my project? How would I do it?
This is the code I want to use
The best I can think of is to probably use Git Submodules so that you bundle your dependencies with your repository without having them to be inside your repository. This will provide you with 2 advantages, your library dependency will always be (latest), your git repository won't be bloated of all the unnecessary data and objects that the library would have brought. Make sure to build with the lib and to query the user if he does not have it on his system.
C does not have any native dependency manager.
If any tool could do something like you want and for basically anything, you could look into Conda

Creating a UI component library with react-native for android apps

I want to use my UI components as a reusable seperate repo/project for my react-native iniit App.
So i creatd a seperate project folder like this
and installed these dependencies
and few dependencies externally with my other app.
Then i used
yarn link
to link this project to my working app as a module just like a node module. but i get this error when i try to run my app?
Is there an issue with my method, or is there a sure way i can try to reach my goal because i found multiple ways and various configuration of creating such component libraries.but i didn't use any since the end goal is different.
This is a known issue with the React Native packager. See this discussion: https://github.com/facebook/react-native/issues/637.
This may have to do with using watchman, although there seem to be a few different cases where this can crop up.
TL;DR: React Native packager does not respect symlinks to projects, so npm and yarn link do not work like you would expect them to. Apparently this is being resolved in metro-bundler: https://github.com/facebook/metro-bundler/issues/1.
Unfortunately the workarounds are not that pretty, but there are a few options discussed in the issue 637 discussion. It also looks like you may be using a github repo for your package.
You could tell npm to get your library from github via your project's package.json, so you probably do not need npm link, though you will not be able to link to your local files for your module this way.

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.

Reactjs flux without npm

I want to write my application using flux architecture, but I want to do this without any external libraries, npm, etc. Is this possible?
Yes, indeed it's possible
You could either:
Write your own flux implementation, it's really quite simple.
OR - if it's the idea of referencing external NPM packages that you don't like, just download the package once only and then copy the code into your source code so that you're not relying on NPM.

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