I want to code some projects in Vanilla (V) then redo them in React (R) to get an idea of their differences, grasp what React is doing behind the scenes for me and to grasp React's value:

1-Create a simple component:

V: Write function that returns HTML content and injects it into DOM (innerHTML or document.createElement) vs
R: Create a functional component that returns JSX to represent my UI

2-State management:

V: Manage state using variables and update the state manually when the state changes vs
R: Use the useState hook to manage state within a component

3-Event handling:

V: Attach event listeners to elements using addEventListener vs
R: Use props (onClick, onChange, etc) to handle events

4-Data fetching:

V: Use fetch API to get data from a server then manipulate the DOM vs
R: Use useEffect to handle side effects like data fetching. Combine useState with useEffect to store and set data fetched from an API

5-Component reusability:

V: Create functions that generate DOM elements and can be reused; pass data as arguments to functions to generate different results vs
R: Build reusable components that accept props

6-Routing:

V: Implement basic routing using # in the URL and listen for changes with window.onhashchange vs
R: Use react router for managing navigation and routes; create route-specific components and learn about dynamic routing

7-Styling:

V: Use inline/CSS stylesheet vs
R: Use CSS-in-JS solutions like styled-components or use module.css for component-specific styles

Please add or subtract from this list using your experience. I think this will be more helpful than the 'should I learn JS first - or how much JS should I learn first' type of threads both for me and other newbies.

I'm also tagging some more experienced devs I've seen emphasizing the importance of learning the basics before React so I figured you all might have some confirmation/input on the above list if you have the time:

u/FistBus2786
u/akshullyyourewrong
u/rangeljl
u/double_en10dre
u/elafor

Thanks for your help everyone.