Visualise DOM It means how a web page looks & after a state change how a web page will look

Main Formula

State -> Event -> State

Understanding f(state) -> view It means our view is a function of the State.

f(state change') -> view also get change' Based on how the view is changing, the view should basically React to that state change or update. In simple words, reacting to the changes in states.

When thinking about functionality think of the program in two or multiple states then see what events will be required to change the state from A -> B & to B -> C.

Let's take a simple example of an age checker on the signup form

How we can approach the above problem

Initial State { isAgeLessThan18: false } ( Here we are assuming that the user's age is always greater than 18) Initial View isAgeLessThan18, if yes then show an error message else keep hidden View Error Hidden Event

• Read Input

• Use the input to calculate age. New State If age < 18 then set state to { isAgeLessThan18: true } New View isAgeLessThan18, if yes then show error message else keep error hidden. View Show Error

Keep In Mind Initial State, Initial View -> Event -> New State, New View

In react, we don't have to change anything, so we should only change the state & based on the state change, our view should be capable of rendering new views or new things.

Conclusion: React is simply a function of state.