Why React?
React changed the way we build web interfaces by addressing specific pain points in traditional web development. To understand its value, we have to look at what problems it solves and how its philosophy differs from previous approaches.
- •The problems React was designed to solve
- •The advantages of using React
- •The mental model: View = f(State)
- •How React separates concerns
The Problems React Was Designed to Solve
Before React, maintaining large applications was difficult due to "spaghetti code" where data updates were hard to trace.
What problems was React designed to solve?
Complexity caused by implicit state changes
HTML not being powerful enough
Unpredictable DOM mutations
Lack of reusable components
The Advantages of Using React
Why do so many developers choose React over other libraries or plain JavaScript?
What are the advantages of using React?
Smaller bundler sizes
Rich ecosystem of 3rd party components
Declarative API
Your view becomes a function of your application's state
Understanding the Mental Model: View = f(State)
The core philosophy of React can be summarized by the formula view = f(state).
What does view = f(state) mean?
The view will always reflect the current state
The view can be updated by changing the state
The view holds the application state
The view modifies the state
Separation of Concerns
Historically, web developers were taught to separate technologies: put HTML in one file, CSS in another, and JS in a third. React takes a different approach.
How does React separate concerns?
By separating style, markup, and behavior
By separating behavior into reusable components
By separating DOM from HTML
By separating code into smaller bundles