What advice would you give to someone who has coded in jquery for years and now wants to gracefully switch to modern js?

IMO there's one big, fundamental, primarily positive change that's been popularised by React: interfaces are now declarative rather than imperative. This isn't limited to React alone, isn't even limited to JS or web development, but React was definitely the library that brought it to the forefront. For me, this is as significant as the change from manual to automatic memory management all those years ago: it removes a major chunk mental overhead and associated boilerplate from the development process, eliminates whole classes of bugs, and in 95% of cases is only taking control of things that developers weren't or shouldn't have been doing directly anyway. People in that balance 5% generally know who they are and have alternatives available if they need them.

In terms of what that actually means: with jQuery, you write instructions. Page starts in state A; user logs in, change these six UI elements to account for that, now we're in state B; user clicks to expand the comment tree on a post they're reading, append a whole new HTML fragment in the correct position, call that state C; user receives a DM, update the navbar to flag that and show a short floating preview in the top corner, state D; three seconds later automatically hide the preview, state E; etc. etc.

This can be fine for small and relatively static applications, but it gets harder and harder as you scale. Firstly, you need to manually track each possible event (e.g. login success) and its associated UI changes. When you're editing things 18 months down the line, it's very easy to miss one of those six places that the interface should update on login, and now you've got a bug where they're still seeing the "Sign Up" link in the footer - minor, perhaps, but little glitches like that can quickly snowball into more serious problems.

Secondly, and more importantly, you're applying these changes onto an unknown and broadly unknowable previous state. In each transition from A to B to C to D in the example, the exact UI mutations you need to perform depend on what the previous state of the system is, and reaching an identical state D from a different initial state X might need different mutations. You need to manually account for all the possible combinations and edge cases: what if a DM comes in while the rest of the UI is in a loading state and the expected target element isn't there? What if the user navigates to another article after clicking to expand a comment, and the XHR callback gets triggered on a different page to the one that initiated it? What if one of your previous transitions did have a small bug, and now the HTML you're applying a change to is unexpectedly inconsistent? Every instruction needs to account for the impact that every previous instruction may or may not have had, and you as a developer need to keep track of all that as you're coding.

Declarative UI is a direct mapping from data state to interface state. Data goes in, UI comes out. Data gets updated, all parts of the UI that depend on it get updated. The same data object will always return the same UI, regardless of what the previous state might have been. The exact transition from state C to D, or from state X to D, is tracked and calculated by the library - at its core that's what React really is: a diffing engine for UI states. Each element can be coded independently and composed together if needed, only considering the input data, without worrying about mutations leaking from one to another or events getting applied inconsistently.

I'd say the specific tooling you choose is separate to that whole conceptual change. I was never a great fan of Angular, they describe it as a "platform" rather than a library and it always felt inflexible because of that. React is really just a UI layer, and I prefer to have that and make my own decisions on the rest of the architecture, although there are larger frameworks like Next.js that bundle it up into something more complete out of the box if that's what you want. There are also options like Svelte, that figures out all the possible mutations for you at compile time rather than diffing at runtime, or Flutter, that skips the DOM entirely and uses its own pixel level rendering layer.