React for Someone Who Started with jQuery
If you learned the DOM by selecting elements and changing them, React's mental model will feel backwards for a week. Here is the shortest path through it.
The mental model shift
jQuery is imperative: find the element, then change it. React is declarative: describe what the interface should look like for the current data.
That inversion is the whole learning curve.
- You never mutate the DOM directly — you change state
- Markup is a function of props and state
- Re-rendering is cheap; reconciliation is the library's job
State is the whole game
Every bug I fixed in my first months of React came from duplicating state. When two pieces of state can disagree, they eventually will.
- Derive values instead of storing them alongside their inputs
- Keep state as close to where it is used as possible
- Lift only when a sibling or parent actually needs the value