I've been working with a lot of Material-UI components recently, and for the most part, they are pretty easy to import. I'm starting to find that the documentation on http://www.material-ui.com/ is not very good when it comes to showing where to import components from.
For example, to import the List component, one needs to import from material-ui/lib/lists/list. Is there a known dictionary with these component and import paths associated? It gets quite frustrating to not be able to import the necessary components, even though they do seem to follow a fairly common path, i.e., material-ui/lib/.
It doesn't look like the repo on GitHub contains the true paths to the components, so better documentation might be the answer.
Thanks!
The example code in the docs is the very code that is run to create the examples. The imports shown there are the imports actually used by that code (for the version of Material-UI you are checking the docs for).
If an import isn't working, it is likely that either you're using a different version of Material-UI to that for which you are looking at the docs, or you have a typo in your import.
I had to import List using 'material-ui/lib/lists/list'
This confirms that your installed version of Material-UI is 0.15.0-alpha.2 or prior. We moved to the new directory structure in beta.1: https://github.com/callemall/material-ui/releases/tag/v0.15.0-beta.1, thanks to this PR: https://github.com/callemall/material-ui/pull/3749
Related
I'm developing an app using react js. I just want to ask your opinion. Is it redundant to use MUI Component and React Bootstrap at the same time?
There's nothing stopping you from using both MUI and Bootstrap in your project but either one should be able to meet all your design requirements.
But in choosing both you would have to keep in mind two very different approaches to design. The MUI implementation varies quite a bit from React Bootstrap. Not sure what you are going for here, but in a very general sense I would stick with one for my project/purpose.
(Personally I prefer MUI)
I think both libraries are great, but generally the approach is to pick one to keep less dependencies in your package.json file. You have to keep single approach when it comes to styling for two reasons:
Consistency
Whoever reads your codebase will be able to comprehend easily.
P.S: I prefer MUI, you can customize your own design system by overriding MUI default theme
No, it's not redundant for your project. The amount of work that's been put into Material UI makes it a feasible choice for professional projects.
Also, if you are worried about libraries taking more bundle size then as per the Material UI documentation, you can reduce bundle size by importing your components in the following way: let's say you want the button component, so you import it like this import Button from '#material-ui/core/Button', instead of this import { Button } from '#material-ui/core'. With the former import you'll be importing the Button module only and leaving the rest of the modules alone. For further detail, visit this link: https://v3.material-ui.com/guides/minimizing-bundle-size/.
Hope you find this answer satisfactory!
Usually you pick one widgets library, but if you miss some components you can mix them too. According to mui documentation every component is self contained:
https://mui.com/material-ui/getting-started/usage/
If you are worried about inconsistencies in your widgets, mui now offers unstyled components as a standalone package:
https://mui.com/base/getting-started/overview/
For react-bootstrap the components can be customized in many ways, especially over global customization via sass variables:
https://react-bootstrap.github.io/getting-started/introduction/#installation
I wouldn't worry too much about dependencies as you usually have so many of them anyway and install new package for every use case.
In my current project for example I have react-bootstrap as the main UI-lib, but it has no date pickers nativly. So after a research I picked up the mui datepickers.
I have to maintain an old project, and when I look into the code, it shocks me.
(function($, React, ReactDOM){
...............
ReactDOM.render(<App/>, $("#root")[0]);
})(
jQuery, React, ReactDOM)
The backend language is C#. I didn't know backend so it's hard for me to figure out how this project works.
it put all components in one file(one file one page), the code is really long.
It didn't use any import and export syntax.
Now I need to add new page, I want to use many files and use import to put it together. Is this possible?
I didn't find where it import react, maybe the cshtml file in the Views folder I guess. I want to use a new version of React with my new page, is this possible?
The question is pretty vague as it stands, but I don't see how it could be improved in its current state.
Depending on the lifetime, future ownership, and current use of the project you're maintaining, it may make sense to refactor it as you describe in [1] and update to the React version you want to use. Yes, it is of course possible, but it is work.
As for [2], I don't know either way if it is possible to use different versions of React to render different parts of the project. That would certainly be interesting to see. I would recommend trying to stick to one version across the application -- otherwise the next poor soul who needs to update this project will have the same reaction you've had.
I was looking into three libraries to start the private project that will help me know more JavaScript. Those libraries are React, Preact and Svelte. Knowing that every library that I listed is guided by different (or similar) principles React is the most popular one. But two others are faster / smaller and these are the two attributes that I would like to follow.
My question is:
When React is imported...
import React from 'react';
... is there a way to make it smaller using webpack to bundle only what I will use from the main library?
Maybe there is something I don't understand or misunderstand when I was reading the documentation for React and webpack?
I am working on some React Native project. If you work with react native or react before, you know that even in the middle-size projects, imports increase dramatically. Due to that, I use the technique which is creating index.js/ts and import a file from the one reference. Everything was quite perfect until upgrading the react version. When I had upgraded the version of the project, the project started to show me a warning message as you can see below.
But the thing is, I made this cycling dependency on purpose. I don't know how can I fix the thing by continuing to make the all imports together.
here is my Plugings/index.ts file;
and here is my Plugins/Contact.ts file;
PS: I know that the solution by making import directly, which means not importing from index.ts file.
Thanks for the time.
I think you could try import your Localization from './Localization' at Contact.ts
And you could work as what in index do in Contact.ts, and then you will not import
index at Contact.ts to disconnect the chicken-egg problem.
For a while I've been using the react-tippy package, but it hasn't been updated in a long time and it has many bugs.
Recently #atomiks published a react wrapper for his tippy.js library.
I've used succesfully until I need to use it together with React-Router or Redux.
I've created a sandbox that replicates the issue ➡ https://codesandbox.io/s/9yr3rmrkny
Ideally somebody is able to figure out how to tweak the tippy.js wrapper to render the tippyInstance with Context (for both redux and react-router)
Actually Tippy has upgraded to v3 and they now have a really good support for react.
https://github.com/atomiks/tippy.js-react
This issue I posted is no longer an issue with the newer version and React Component
The problem is with the internals of how Tippy works, I.E. manipulating the DOM directly rather than going through the React provided virtual-dom. Due to this fact, it would be suggested to not use Tippy with React at all because it breaks the same rules as using jQuery with React. see here
Sadly, updating the wrapper wouldn't help anything as the DOM manipulation is happening within the Tippy source code, rather than the react wrapper.
What I ended up doing was rebuilding the Tippy functionality I needed in React.
There are also other tooltip libraries that are geared better for React that could be looked into.
I realize this isn't the most helpful answer, but wanted to share what I ran into, also thanks for asking this because it helped figure out what was causing my bug.
EDIT
as pointed out in previous answer, and comment. This is an issue with old version of tippy (v<3.0).