I have coded the same App in plain JavaScript to React. Here is my experience.

Direct javascript browser API Using document.createElement or jQuery

- component creation is ok.

- the first render can be done easily using Loops.

- value manipulation after render becomes tedious. To edit values in a select box you need to clear all values and then populate it again. - if you change components with javascript you need to reattach event handlers as they are removed after the component update.

- if you do a large number of operations then it's quite slow and you can see sluggish movement and jitter in UI.

- code is very unreadable and debugging is hard.

- for state management, you need to use plain JavaScript objects. - most of the time there is one global state which itself is an anti-pattern. - events are hard to manage.

- there is no way to divide app in multiple components. If you make one there is a lot of complexity to maintain.

- large projects are difficult to manage. How React helps - Apps can be divided into components for easy management.

- The state can be managed independently from the UI.

- States can be nested and can have a hierarchy.

- UI update is efficient due to the reconciler. - No need to deal with event handlers as it's automatic.

- Debugging is easy due to the structured approach. So there is absolutely no need to use JavaScript directly for a project unless for learning.