I would start with Next.js as a framework. It brings in React Router and abstracts a lot of complexity from it.
I would avoid state management tool until the complexity warranted it. Hooks are promising, but apparently Mobx is more performant.
Stop using bootstrap.... when I give exams, too often developers fall to using bootstrap, and when I ask them to solve a basic problem without it they fail. Learn CSS.
React Form is bloated. Avoid it.
I personally dislike UI kits. They bring in a lot of unnecessary tools. Role your own.
If styling is all you need help with, use tailwindcss. It does not solve making a button look pretty, but you will learn css in a way that is constructive.
Thanks a lot for this
If you're already dedicated to an SPA, then React-Router is probably your biggest next piece. Redux is overrated and frequently unnecessary. A UI toolkit might be something you reach for too. For when you have forms more complex than you want to manually handle, I recommend react-final-form.
BUT, you should usually strongly consider whether you actually want to write an SPA. More on that here: samsch.org/2019/07/08/does-using-r... though that article is approaching a bit from the SEO side first.
It's hard to find a project that justifies the use of a SPA.
This could easily be its own post but I'll give a go at a short answer.
React has such a large eco system that there is no one size fits all solution for any size app. For state management it is best to think of how your components map to state. If it's a 1 to 1 relationship then internal state is best suited. For components that require state from multiple sources, mob-x or Redux would be better suited.
Routers are often paired with state management to handle middleware so authentication can be handled on routes.
I wouldn't advise going down the route of just because people use a library that means it's what you want for your app
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.