What exactly is "plain React" though? Not sure I've ever seen a project that used only React and nothing else. It would seem you'd need a build step, at the minimum.
Alternatives are Webpack (stable, boring), Vite (starting to overtake Webpack since it's significantly simpler), and 1000 other libraries.
Again, there is some movement here, but Webpack has been in a dominant position for nearly a decade and there's no reason you can't continue to use it today if you value stability. It's the equivalent of choosing to host your backend on a VPS instead of trying out serverless.
Needing a build step is part of the complexity of frontend. I think frontend is getting much simpler with build tools like Vite and the addition of ES modules. But, even with these new things coming out, you can stick to your boring stable choices on the frontend just like you can on the backend.
This is insane for beginners.
> You need at least a router
You only need a router if you want to build a SPA with different routes, not all web applications are that! Tons of practical React apps are just a single screen, or even embedded component.
> some way to manage state
You do not need an external library for complex state management, the React docs have some great guides on how to achieve this with plain React:
https://react.dev/learn/scaling-up-with-reducer-and-context
> some way to manage style
Plain CSS and the JSX style property are entirely enough for most apps. If you are using a build tool like Vite, you can also do CSS modules for scoping styles to your React components for more complex applications. I do agree that styling is not a strong point of React, but I don't think pulling in a dependency is necessary.
I just wanna vomit reading that article (which is in official docs!!!). There is a much cleaner way of managing state with just a single `useState` per component instead of bringing over some Redux dogma for some inexplicable reason:
```
const [state, dispatch] = useState()
// ...
dispatch(doThis)
dispatch(doThat)
```
https://react.dev/learn/managing-state
I was linking this later section about extracting state logic into a reducer, because you suggested that you would need "something for state management", I assumed you were talking about something like redux.
But of course you can get pretty far with a single useState and prop drilling as well. Not sure how it supports your point that 'plain react is useless', it sounds like you are arguing against yourself with that comment?
The Redux "pattern" you speak of, does nothing to manage state better than useState(). So I'm not sure why that API even exists, or why you think that is a good response to "need something to manage states".
Let's go back to that, managing state would be for example error and pending state for every async action. In react, that basic, repetitive task is a whole celebration if you just do plain. Try do do form with per-field back-end validation feedback and see how much boilerplate you need for that.
I 100% agree that React is super boilerplate heavy, a lot of things are indeed 'a whole celebration', I personally choose something like Svelte over React if I have the choice, because I don't enjoy that either. All I'm saying is that plain React is not useless! It's completely fine. I don't mind working with it, it makes a tradeoff of being more ceremony but perhaps less magic and I think the tradeoff is okay.
If you want an actual website with proper routing and possibly SSR and want to use “plain” React with no additional libraries you’ll have to waste a lot of time reinventing the wheel.
Joking aside, you really do need to solve the problems jsx solves, but also webpack, next.js, react-router and depending on your application, something like mantine or tailwind. These are the minimum I think.
If you have a smallish project you can get by hand-rolling your own solutions, but it doesn't make the problems themselves go away.
In fact, it is exactly the claim in this thread that there are a lot of beaten paths in backend languages with relative stability over time, whereas in frontend it is 1) not clear what the beaten path is (there isn't one) and 2) when there appears to be favored solution, it often changes radically or disappears after just a couple of years.
For example, create-react-app used to be the default way to start a react app, it is now deprecated. But for python, Django has been a stable beaten path for many, many years. Same for Rails. C# also tends to change every couple of years, but there is always just one single Microsoft recommended way to do things.
Sure there are many experimental libraries and contenders in these languages as well, but there isn't really anything with the same maturity and stability in frontend.
<script src="react.js">
<script src="react-dom.js">
<script>
const recognition = undefined
var foo = document.querySelector("#foo")
let bar = ReactDOM.createRoot(foo)
foo.innerHTML = bar.render("<b>eyond<a>ll{recognition}");
</script>