Yeah, it is quite complicated. React is all JS: even the bit that looks like HTML is not HTML, it is sugar over functions that create JS objects. It can ask a lot of you, and it is extremely helpful to know JS well to be able use React well. Contrast that with jQuery, which is all about manipulating the DOM – after learning HTML and CSS, jQuery seems familiar, a set of simple commands you can use to manipulate things you already know.
You don’t need to use React for the projects. The projects all ask you to do a single thing, and as a result, are not terribly complicated; in many [most!] ways it is much easier to not use React (or a similar frontend framework) – you’re adding a lot of complexity for not much gain.
But let’s assume one of those projects is a real-life app. It stops being so simple almost immediately. Here are a few normal things that you may need to think about in addition to just rendering some UI and printing some data on the page:
- what happens when a request errors out?
- what happens when a request times out?
- what happens when there is an error?
- what happens when there is nothing to display?
- what happens to the local data when the data updates remotely?
- what happens to the remote data when the data updates locally?
- what happens to the browser history when you use the app?
- what happens when you press the back button?
- if the browser history reflects what data you are currently viewing, can you navigate directly to a specific thing in the app? How is that handled?
- what happens when you request a collection of things?
- if you do have a collection of things, what happens if you update one of those things? Does you need to rerender the whole app?
- multiply that amount by 1000. What happens now? Does the app fall over or grind to a halt? If so, how do you fix that?
- multiply that amount by 1000 again. What happens now? Does the app fall over, etc?
- what happens when you are on a slow connection?
- how would you handle translating the UI text into a different languge?
- etc etc etc
So you start to see that maybe you’re going to have to write logic for all of those things. And that logic is going to get quite complex. And maybe the things you need are common things. And maybe someone has already done this before, and what they’ve created hides away some of that complexity.
And you so get libraries and frameworks. jQuery is one example, but it doesn’t really help much when you want your app to work like a desktop/native app (single page apps). React is one of the tools that have been built to allow that. Redux is something else, it’s a library designed to deal with state. Also, tbh, if you’re using Redux, it is likely that Redux can be the app; React is then “just” the library you use to render out the current state.
Building GUIs is quite hard, so many different patterns for building them have been tried. How React approaches the problem is that allows you to take some data and declare how you want it to display visually. When the data changes, the UI automatically updates: React updates the DOM. Contrast that with a GUI written using jQuery, where this is not the case: when the data changes, you need to write logic to manually change the DOM. And in React, you split the bits of the app out into small components that all do a small job. Each of those components may/may not have data passed into them (via props
, like arguments to a function), and/or internal data (state
, like an object, where you can change properties inside the object).
Hooks are basically the same thing as the lifecycle methods in classes, but with hooks you can extract that logic out – it isn’t as tightly bound to the code of the component it exists in. For example, fetching data in in a class component within componentDidMount
could, instead, make use of a useFetch
hook (that internally uses useState
and useEffect
) that gets used in any function components that need it.
It doesn’t make sense to say they’re replacing Redux because they’re completely different things - that’s like saying class lifecycle methods like componentDidMount
make Redux obselete. I think there were a few tutorials and articles that suggested that when hooks first dropped, but that seems to completely misunderstand what hooks are. Plus Redux was being used for stuff it didn’t need to be used for (where local state would be a better choice), and hooks seem a nice alternative to lifecycle methods in that case.