We Keep Coding

Redux or simple React to handle navigation

I am very new to React and Redux and I am currently trying to wrap my head around how states are shared through the UI.
I have a pretty simple use case.
Picture a container with three columns:
A left Side Menu with four buttons
A central content section
A right container with some other content
When I click one of the four buttons I want three things to happen:
The class on the button is updated so it has borders
The class on the other buttons is updated so if they had been clicked before their border class is removed
The content in one part of the middle section is updated. This content requires data from the backend (Django Rest) to be fetched
Here are my questions:
Should I separate this interaction into a UI only concern and a Data driven one or handle both with a single state?
Because the buttons share a parent component but they do not with the central component, would I be better off using Redux if I do not want to define the state at the very top level of the Container?
Because I am new and Hooks seem to be the way to go I am trying to use hooks rather than classes, does it still make sense to separate components and containers?

You can use react-router-dom library to achieve want you want.
for your left side menu you can create active class in css and then check for current route with location.pathname property of react-router-dom and if it is for that button, active class set for it.
and for your main section you can fetch data in useEffect hook.
I think it is good to separate data and UI but for buttons what I say is good.
and you can store data in redux for your main section.

Create multi page design with single URL

My goal is to create multi screens in one single page.Depending upon the action the user will be able to navigate from one screen to another screen.I have shared the images below
When the user clicks on any of the categories ,it will navigate to a second screen.
While clicking back it will again comeback to the first screen without change in URL.I have tried creating a full page modal and could not achieve this kind of functionality.I am not sure whether it should be done as a modal with multiple screens.
Please suggest me any method I can achieve this.

What you are likely referring to is creating an SPA or Single Page Application. This can be done through 'Vanilla' JavaScript at great effort or via one of many JavaScript Libraries or Frameworks.
Reactjs, Angular and Vuejs are probably the most common.
IF you were to use Reactjs then you could use what's called React Router. React Router would do what you want to do very easily. Doing it in Vanilla JavaScript would require a great deal of work or it would be very ugly.
However you did ask, so one way of doing would be to use JavaScript to load an iFrame or to make a top level parent element display: none and another to then display:...
Also if you are thinking of something less hacky, but not something as sophisticated as React or it's peers, then check this link out for a relevant article. Perhaps it's a path forward that you would prefer.
https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng

To help rookies like me, you can make a single page app or SPA, or a dynamic page that updates based on user actions with a single URL, in vanilla Javascript. You don't have to use a framework.
There are 3 concepts you need to understand:
The server doesn't see past the # in the URL
You need to tell your code what screen you want to display. Normally you would have URL.com/page-you-are-on and click a link to go to URL.com/page-you-want
However, in a single page app, you don't go to different URLs. So how does it work? You use a fragment identifier or a pound symbol. #
The # in the URL doesn't get recognized by the server. So URL.com/page#page1 and URL.com/page#page2 to the server is the exact same URL.com/page.
So you can use the URL to indicate to the server what page you want, in your single page app.
A Router can decide what to show based on the # URL fragment
So your page loads at URL.com/page#page-you-want. You need to inspect the URL and get the piece past the #. You inspect the URL, and split it on the #. That means you get page-you-want. Your code then uses that to decide what content to display. The function or file that does this is commonly called a router because it routes to the file or function you want displayed.
Once you know what to show, dynamically update the DOM
This is where the magic happens. Your website looks at the URL, gets everything past the #, sends it to function that decides what to display. You now need to display it.
The DOM has lots of functions and methods that help it update and create various things. It could be as simple as this:
function displayPageAbout() {
// the router calls this if the URL is URL.com/page#about
let pageSection = document.getElementById('pageSection') //this is where the page will be displayed
//create the div and give it content
let page = document.createElement('div');
page.textContent = 'This is the About Page'
//add the div to the spot on the page where the content should go
pageSection.appendChild(page);
}
That is basically it.
If found these two examples and tutorials useful in understanding what it is, and how it could work.
https://blog.jeremylikness.com/blog/build-a-spa-site-with-vanillajs/
https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng
Good luck!

Is tabbing behavior affected when used inside an iframe?

I'm currently attempting to tab through some react components that I've (text inputs, checkboxes, radio buttons, etc) implemented (using material-ui). Something I've discovered is that tabbing through my components locally works as expected but as soon as I put it on the server, it skips through my checkboxes & radiobuttons (but tabbing to text inputs works fine).
The website that I'm displaying my react project on is built on backbone and I'm basically displaying an iframe with my react project inside that. Is it possible that this has some effect on a user's ability to tab through the components inside an iframe?
Thanks for your help!

With some help from above, I was able to figure out that when I render my react project inside the backbone project, some components such as my checkbox and radio buttons are wrapped inside a <span> tag and in order for it to be able to be tabbed I had to add the tagIndex attribute to it. Thanks everyone!

What would be the best way to have a dynamic footer that can be triggered from multiple locations using AngularJS

So I've been going round and round trying to figure out the best way to have a footer that has a hidden panel for actions that slides up. The site is pretty basic, it has a header, content area and footer. I made a simple wireframe to explain this a bit easier:
So ideally the content panel are say something like posts, when clicked I would like to open the Secondary actions panel with the edit form prepopulated with the data from the content panel. If the Icon is clicked I would like to pop that same Secondary actions panel with a blank add new post form. Where I struggle with this is the convention of how to do this and what is the best via AngularJS. The secondary actions panel and footer are wrapped within a FooterController, but the content panels are wrapped inside a separate controller. I'm not sure whether I should be using a directive or a service.
I'm currently utilizing angular-ui-router but this doesn't manage the ui events that I need to happen.
Any advice would be greatly appreciated, I'm very knew to AngularJS so I'm trying to learn the right way of doing things with AngularJS rather than just building some hacked up crap that I'll end up scrapping later on!
Thanks!

I think secondary panel should have its own ui-view (with its own controller) instead of staying inside the footer.
For it to know which item has been clicked, you can pass through the ui-router state.
Let's say your control panel has post id 1234, then it should have a ui-sref="stateName({postId: post.id})"
And this state in ui-router will specify which controller/template it should fire, and inside that controller you can get the id from $stateParams.postId
You can then use the post id to get the post either remotely or from service if you have stored them earlier.

How can I dynamically include one of several AngularJS partials depending on the route?

I'm working on a music app which has urls of the form my-app.com/[0-9]{10}, like so:
my-app.com/0123456789
my-app.com/1293938388
Each one of these is either a song, a playlist, or a user page, and I can query the backend to figure out which one. However, since these URLs are not distinguishable without querying the database, I can't do the normal $routeProvider.when('route-prefix/:routeArgument') to instantiate a different partial for each one.
I'd like to be able to specify a default handler which shows a spinner and queries the database, and then include one of a number of partials and with one of a number of controllers based on the type of the response.
What's the right way to do this in angular? Should I be using ng-include? I would like it if the inactive controllers didn't execute at all, which is why the obvious solution of using a partial with multiple ng-controller directives doesn't seem right.
Thanks!

As discussed in the comments, ng-switch can be used conditionally add or remove content from the DOM, based on the route. (This is in contrast to ng-show/ng-hide, which currently only modify CSS properties to show or hide content that is always in the DOM).