DEV Community

loading...

State in Web Dev Explained to a 10Y/O

mosesmbadi
Freelance Web and Mobile app developer.
・1 min read

Let's go straight to the point.You are building a website (assuming the 10y/o has already learnt the basics of web development),so you have the header,a few this and that for the landing page,and a footer at the bottom.

Now just above the footer you have a form,with maybe the Name field and the Message field.Now state,simply put is what your user will be looking at before and after a certain activity.For example,when a user scrolls and reaches the form,it's just an empty form with the fields,now that is the 'initial state'...then the user enters some values and clicks the submit button,then you have a red alert that the says the name is invalid,now that's another state.After correcting,the user clicks the submit button and a 'success' message pops up,that's another state.

When developing this,you'll need,well 3 code blocks for the three states,this is why you see the getInitialstate ,setState,this.state getState in that repo you cloned.

I understand that there might be a more broader and technical way to explain this,but after hours of googling to try and understand state in web dev,this is how I wish someone would have explained it to me.

Discussion (0)