I have a fundamental question related to React.
For example, i want to use ths third-party libray: https://metroui.org.ua/stepper.html#_stepper_events (example component, that has special callbacks) with react.
But this library doesnt have react bindings. So, i want to find out the right way to use it.
Should i use it with JQuery? With library, that shipped with this framework? (Metro.js in this way https://metroui.org.ua/events.html) Should i use this library at all?
Thank you in advance!
Related
Instead of having many dependencies for individual hooks, I am interested in a single curated and tested library like Vueuse, but for React. Does something like this exist?
For instance, in Vue projects I would often use https://vueuse.org/core/useStorage/, https://vueuse.org/core/computedAsync/ and https://vueuse.org/shared/useToggle/, but many others as well.
The list of built in React Hooks seems quite limited: https://reactjs.org/docs/hooks-reference.html
What about https://github.com/streamich/react-use? Otherwise you could try using #vueuse directly in your react components thank to reactivue!
I found https://ahooks.js.org/ which does what I need
I'm working on a small web application in React and I want it to be in two languages. I've seen several localization libraries like react-i18next and react-intl but I'm hesitant to install something maybe too big for such a simple application. Is there a lightweight library to do simple localization or should I look into a more straightforward approach like a string replacing component?
Thanks!
If it is a small project you probably do not need it.
However, it would be a really good experience to write your own localization component, integrate it with redux and opensource it.
Also, there are some simplified versions already available so you can reuse it and/or contribute into.
Here is a simple react-localization implementation.
This is a newbie question that I have not found an answer to on the net. I would like to use this package in a react app. https://www.npmjs.com/package/zipcodes
I have only used react packages so far.
Yes, you can. Same way like with no-react. React community have a lot of plugins, made for react specially, but you have no limits to use any kind of library. Most of them are compatible or require wrapper creation, which will use library with it's imperative usage, but inside react component.
I am just getting started with react and had a question regarding some of the UI libraries built for react.
Is it possible to include components from different libraries in my react project? For instance can I include a modal from bootstrap-react and a data table from semantic-ui-react? I believe this is possible, but are there any performance issues when doing this? Has anyone had any experience as such?
Any comments would be very helpful.
Thanks
Disclaimer: I have no personal experience of using components from multiple UI libraries in one project.
You can include components from multiple UI libraries as long as the components don't conflict (e.g., use of same CSS selectors with different expectations). There should not be a major performance impact due to using two UI libraries. After all, the UI libraries just manipulate the virtual DOM, like any React component.
Generally speaking, I would recommend against the use of multiple UI libraries in one project. By using one library only, you get consistent look and behavior, and you need to learn to master only one library, which likely makes you more productive.
I've been developing web app using react or angular but I'm confused why people would use library like react-bootstrap (https://react-bootstrap.github.io/introduction.html) or Angular-bootstrap? Because when I create I just have to load the css framework using link tag with its corresponding js lib, then in reactjs side, I just have to put the classes needed for a component. Isn't that sounds easier?
Thanks,
It has to do with the Javascript portion of Bootstrap. The CSS will work just fine with a link tag.
But React and Angular are Javascript libraries which have a lot under the hood for manipulating the DOM. If you also use something like Bootstrap or jQuery to manipulate the DOM, it probably won't play well with React or Angular since they're trying to do similar things in very different ways maybe at the same time. So DOM-related Javascript libraries need to be rewritten so they play nicely with React/Angular.
From the react-bootstrap docs:
we don't ship with any included css
All they deal with is the JS.
When you chose to work with reactjs you chose a library that updates your DOM in a cleaver and sophisticate way.
It has the virtual DOM and bunch of algorithms (like the Diffing algorithm) to determine when and how to update the DOM in the most fast and efficient and performant way.
When you combine this with another library that updates the DOM, you basically interrupt those algorithms to do their job.
Beside performance aspects, you are working against the pattern of react, you break the "component pattern".
React-Bootstrap is here to help you maintain your component pattern with their components. you just need to include the css and other resource files.
Their components doesn't do anything beside rendering HTML with proper class names that correspond to the classes that in the bootstrap's css files.
They do that in the same way all your other components do it, via props.
This way you can have a bootstrap components that play nice with your other components in a native way without breaking the pattern.
Yeah, it's easier to dump some css and js files and things just works, but it's harder to maintain, debug and scale.