I'm struggling with following the React philosophy of reusing components.
I have three screens (Screen1, Screen2) that are used as tabs in different pages along my application (Page1, Page2), but these screens are not the same for each page, they differ slightly in the text of labels, buttons, etc that they have. And there is a component, a panel, that is shared among all the screens of a certain page.
Should I create each screen as a different component for each page? Resulting in 4 screen components (two for Page1 and two for Page2)? If yes, should I define them in a different folder than the regular components folder? Because they wouldn't be reusable. Or should I create a reusable component and pass to it the data it should display as json for e.g.?
The question of "Should I extract this as a Component?" is too situational to answer. So it depends on:
How many times will you copy-paste very similar code?
Will they change separately in future? Are their requirements different?
Does the extracted reusable component become extremely long/complex when you combine them?
These are the questions you need to answer.
Related
In my application there are four tabs. Each tab contains, different tables for different set of data. I have implemented a modal and search functionality on 1st tab. How to replicate it without much code repetition.
You have few options:
Create a component which will be the exact styles in all of the tables.
Create a component with className (or any other style) prop, which will look different inside each table.
Create customHook which will be used to search & filter, and use it's exported variables inside your component - here logic will be the same (and the same code), but styles and/or behavior will be different.
You have a variable that allows you which tab to render. Use this variable to figure out which table to search on. The modal instead you have to keep it off the tabs so that you can reuse it properly (global position respect tabs)
Add Switch statement if you want handle the situation (based on this variable).
For the future, post code. We can help you with more ease and less time
I have written a react component composed of two child components. All three are functional components which utilize hooks.
Think of a visit to Amazon searching for a video card. On the left are filters you might use: resolution, type of connection, number of connections, etc. As you choose filter values the component to the right displays applicable thumbnails for those items matching your selected criteria.
When clicking on one of the thumbnails, the parent and children (filter and thumbnails) windows are replaced with a detail component. The original window is not visible. Hitting the back key, the original components, including the selected filters and thumbnails, should be as before.
However, when hitting the back-key, the original component with its children displays without any of the selected filters.
I am using react v16.11.0 and react-router-dom v5.1.2.
Clearly I am lost. Can anyone suggest an approach?
I used rather than . The router was not recording the transition in history. I was already at the route to which I wished to navigate before hitting the back-key.
I'm having trouble figuring out the difference between Lists and Menus in Material-UI.
Docs
Lists - https://material-ui-next.com/demos/lists/
Menus - https://material-ui-next.com/demos/menus/
Description
My thinking is that Menus are used for routing and navigation while Lists are used for configuration or static content, but then I saw these quotes:
Menus appear upon interaction with a button, action, or other control. They display a list of choices, with one choice per line.
Reading this, Menus aren't intended to always show, they're designed to be hidden and only shown temporarily.
Menus should not be used as a primary method for navigation within an app.
This makes it seem like a sidebar with a list of navigation elements should be a List. If so, what if I take the same component and want to also use it in a dropdown menu? Do I have to make a separate component using Menu components?
Question
Since the docs are unclear to me, what instances would I want to use Menus vs Lists?
These components follow the Material Design standards, so their intended use would follow the standards.
For Menu:
Menus display a list of choices on a transient sheet of material.
For List:
Lists present multiple line items vertically as a single continuous element.
So while they're similar, I think the key difference is that Menu is intended for a transient selection, presented within something like a Dialog or Modal.
According to the docs, one should avoid having multiple components with state. I am in the situation where I want to make a text box that automatically expands vertically as the user writes, and for that I'm using this trick http://www.impressivewebs.com/textarea-auto-resize/, which means I need to get the height of a component. Now, I've been playing around with it a bit, and it doesn't seem feasible to pass a ref to my parent component which contains state, so the easy way out would be to keep a piece of state in the component with the textbox, and then use the ref from there.
This got me thinking, how exactly do multiple state components negatively affect my app? Is it only maintainability / comprehensability? Or are there actual performance issues with it? I've noticed a lot of open source react components that you would just plug in to your app keep state, meaning if you use open source components, chances are you will have several state components in your app.
It's totally ok to use local state for this kind of tricks on DOM. It's even better approach, than to share such implementation details to parent components.
In general, use this places for state:
Application-wide data in stores outside React (redux, flux-store, observables)
Form temporary data can be placed in store also. But if don't need it anywhere else except form, it's better to place this data in form component.
Tricks on DOM, short living and very local state can be placed in component that just need it
are there actual performance issues with it?
No. If you'll place all your state in components, your application will become even faster. Because when you update local state, only this component and it's childs updates.
But you shouldn't do that, because it kills maintainability.
lot of open source react components that you would just plug in to your app keep state
If component doesn't allow you to control it through the props - it's bad component. Usually open source components written to be easier to use, so they provide nice defaults, that allow you to just place component to your application, and be happy with that.
For example, Tabs component usually controlls selected tab using local state. But also it takes selectedTab and callback onSelect, so you can control it by yourself.
Stupid components (like your textarea component) should not have state with data. But they can have their own UI state.
In this case you can easily keep textarea height in state of stupid component.
I have a requirement which requires me to use a single dialog with two tabs. Each tab should have a CustomMultiField (multiple sets of four fields). I do not know anything about EXT JS. Can some one point me to right direction where I can find something about requirement as above.
I have built custom components without any explicit understanding of Ext JS. To understand how to set up a dialog with tabs, look at the code for the page component in /libs/foundation/component/page. A directory of all the xytpes you can use, like MultiField, is here.
If you need something that behave like one, but is not necessarily huge specific ExtJS component or custom xtype, and you do not want to dig hundreds of Adobe ‘support’ pages, trying to find some piece of useful doc.
You can simply use multifield xtype and write 4 pure JS listeners, that does what you need.