In ReactJs, what would be the best way to breakdown the component hierarchy in a multi-page application ? For an example take an application with two columns. Left most column is the side bar and the right most column is for loading different views.
One view flow would be as follows. Side bar contains a link to view a list of products. Once the link is clicked a set of product with brief descriptions would be loaded into the right hand column.
If the user selects a specific product, the a full detailed view of that product would be loaded in the same panel replacing the original list view.
Now does that full detailed view component comes under the product list component as it's loaded by clicking on a product or is it better to keep it as a child component of the main application ?
You can take a look at 'Thinking in React' link which kind of goes over the same theory on what you are asking which is how do i breakdown my components.
https://reactjs.org/docs/thinking-in-react.html
You should put your data where you have to click/or triggering an event that will make your data change. In this case you would have to click on a link to trigger a product list, then click on the product to trigger product description.
You should not go more than 1 layer deep if you are passing state so don't pass it from parent to child to child. If this is the scenario you should move your state lower.
I hope this gets you going and thinking towards the right path.
Related
I am working on my first extensive MERN project and part of the functionality involves specific components (like a checkbox to-do list, images, text, ets...) that then allow the user to build out different pages, larger multi-checkbox aggregation lists, etc... Think of it as something like https://www.notion.so/notes.
Building the individual react components and configuring them on static pages is straightforward. However, I'm having a hard time conceptually understanding how to take those components and then dynamically allow users to build out custom pages using them.
In a broad sense, how do page builders functionally work?
Here is a broad idea. You will need a page where the left side lists all your UI components [thump nails] and the right side area for dragging and dropping those compoents. You will need a grid system with rows and columns components like Bootstrap Grid or MUI Grid dividing space into 12 portions for the layout of any page. You should let each dropped component give an option to accept its props so users can set it. Setting props can be another component.
When they save the design you should get the react component tree of what they are saving along with all properties and save it in your DB. You should be able to generate both the design view and the actual view with those saved data.
It was easy to say but I know it's a lot of work. I have seen similar work done using Angular and .NET.
Imagine there is a list being rendered on clicking search with some info in it. when i click on one of the search results another component like a card needs to be rendered on top of the results which is more detailed. I want the component to be floating on top of the other while they both are still being rendered. How would i achieve something like this ?
Background
I have a site which has a master/detail sort of design. The master view is a column chart where clicking on one of the columns (each column represents one month) changes the detail view (which is a nested table listing some details of that period). I've started an accessibility audit and as you might imagine, it is not very accessible. I solved the chart by adding aria-hidden="true" and adding an invisible table with the same content with buttons in the month rows. Now activating the buttons will do the same thing as clicking the chart columns - change the detail view.
Moving focus
When the button in a table in the master view is clicked, my screen reader (VoiceOver Safari in this case) reads "Button clicked", but then using the cursor keys keeps reading the table. I assume a user once they decide which button to click would like to read the detail view and so I would like to move them there.
What I have tried
I changed the buttons to <a href="#detail-view" ng-click="loadDetail"> and gave the detail view container div the id="detail-view". This doesn't seem to do anything.
Simple answer: don't. Shifting focus around on a non-sighted user is actually an accessibility violation. See WCAG criteria 3.2.2.
In short, you shouldn't initiate a change of context automatically after the press of a button or other control interaction. What you should do is inform the user of the new content, either by an announcement, or by providing a description of the change in the accessibility text of the control itself. An example of providing this context would be announcing your master cells as "tabs". Just the simple association of a button behaving as a tab provides a lot of information!
To make your application more accessible you should ensure the user knows they are in a master-detail type of control, by providing proper role information (I find "tab" most likely here, but other roles may be applicable). Also, provide a heading at the top of the master view, and the detail view, so that they can easily navigate between the two. As long as they know where they are, and can easily navigate to important areas of the page, they are fine. Automatically shifting focus around is actually an accessibility violation, and should be avoided.
I'm having a hard time understanding how animate components in React when it involves elements within child components. To set the stage, I have:
A button group component that contains some buttons.
A navigation component that contains some button groups. The navigation component creates arrays of button names and callbacks and then passes them to button group components as props.
Lets say the user takes some action on a page that will change the nav. More specifically, I want to fade out one of the buttons from one of the button groups in the nav.
I'm familiar how to use ReactCSSTransitionGroup and would think to use this in this case, but the tricky part is that the navigation component is the the thing that owns the animation trigger, and the button group component is the thing that owns the button that needs fading. When the navigation component re-renders, it throws away the old button group from the DOM and builds an entirely new one which means the old button group never has the opportunity to fade its button out.
Questions:
Am I using the wrong abstractions here? If I want to fade out the button based on nav state, does the button have to belong to the nav and not in some child component?
When the nav re-renders and new props are given to the button group, why does the button group get trashed and rebuilt rather than the existing one just getting a propsWillChange call?
You're right, it sounds like your child button group components shouldn't need to re-render.
If you're iterating over an array of name/callback pairs to build the buttons, make sure each button is being given a unique key attribute; maybe the name, if that is unique. That will give React a way of identifying which buttons to add or remove and which to leave in place.
With that, your ReactCSSTransitionGroup should work as expected.
We're planning a front end application where you can continuously add/remove UI components in the stage. You can configure them in place and finally can publish the stage (web page).
We’ve an inventory of components. The components are categorized. For example: headers, sidebars. In the inventory they will show a preview (may be an image) of the available components in that category.
An item can be added to the stage (traditionally a simple web page) from the inventory. The stages are related to inventory categories. For example, in the stage, there is one “headers containers” where you can add component only for headers inventory.
Each category may have own rule. For example, You can’t add more than one component in the in “headers containers” (which is in the stage/page) from headers inventory category. However, you can add as many item as you want in the “sidebar containers”.
In the same way, each component may have own rules. Each component may render differently and may have different configuration option. For example, you add an header component from “headers inventory” which has logo, background image. But another may not have background image. Unless a component has a feature (e.g. background image), it won’t be available in the configuration panel.
All of the above components will always work except previewing in inventory. That means, as soon as they’re added to stage, they’re live element, they should work as they should with default settings (unless configured). They will communicate in the backend services to get/save data.
Persisting data: We also want to persists data among the switching of the components (of same type). For example, if you add one header component added on the stage which you configured to have own your logo, switching to another header component (which also has support for logo) should keep the old selected logo.
I am also thinking it will be very good if we can everything a component. For example, logo is a component, background image is a component. Each of them should work independently, with own configurator (file upload button for logo component), validation (check file types for logo component) etc.. The previously mentioned each header component will be container of several components which can hold any number of components and can work as bridge among those components (like merging all the configuration in the same interface rather than individually).
My current thoughts are:
Backbone.js
jQuery UI Widget Factory
But both will require lots of fundamental job at our end. Is there any framework/library that already solved most or some of the problems we’re trying to solve. I am not sure whether Angular.js directive based solution will be good here too. Any suggestion towards that is highly appreciated
If I understand you correctly you want to build a dashboard like functionality. Try taking a look at sDashboard https://github.com/ModelN/sDashboard or commercial options like droptiles http://www.droptiles.com/ or razorflow http://razorflow.com/