WEBVTT

00:00.000 --> 00:05.000
State Management and JavaScript Frameworks.

00:05.000 --> 00:10.000
In this video, we will understand what is State Management?

00:10.000 --> 00:14.000
The Update Score, Function.

00:14.000 --> 00:16.000
What is State Management?

00:16.000 --> 00:21.000
State Management in JavaScript is like keeping track of important information in a website or app.

00:21.000 --> 00:24.000
Just like you keep track of your Toys or Game Score.

00:24.000 --> 00:28.000
State Management is the way we control and update that information.

00:28.000 --> 00:33.000
So the app always knows what's happening and shows the right things on the screen.

00:33.000 --> 00:36.000
Use of State Management in the game.

00:36.000 --> 00:43.000
In our game, the State Management is used in adding the score or subtracting the score after each click.

00:43.000 --> 00:47.000
Understanding State Management Code.

00:47.000 --> 00:52.000
In continuation with the previous video, we will understand the State Management.

00:52.000 --> 00:56.000
We have added the code in the components.

00:56.000 --> 01:01.000
We will understand it with GameJS code.

01:01.000 --> 01:05.000
Here, Const, Player, Set Player.

01:05.000 --> 01:07.000
Use State.

01:07.000 --> 01:15.000
We have created a state variable called Player, which stores the current player's name, initially an empty string.

01:15.000 --> 01:19.000
Set Player is a function that updates the value of the player.

01:19.000 --> 01:23.000
React remembers the player even when the component re-renders.

01:23.000 --> 01:28.000
Const, Scores, Set Scores, Use State.

01:28.000 --> 01:35.000
This creates another state variable called Scores, which is an array used to store the list of player scores.

01:35.000 --> 01:39.000
Set Scores updates that array whenever a player's score changes.

01:39.000 --> 01:45.000
Starts off as an empty array, and new scores are added over time.

01:45.000 --> 01:49.000
The Update Score function.

01:49.000 --> 01:55.000
This is used to update score function, plays an important role in keeping the scoreboard correct.

01:55.000 --> 02:04.000
It updates the score state by removing the old score for the current player, adding the new one, and sorting all scores from highest to lowest.

02:04.000 --> 02:09.000
This ensures the scoreboard always shows the correct rankings in real time.

02:09.000 --> 02:14.000
In this video, we understood State Management used in the game.

02:14.000 --> 02:19.000
We will continue with routing and JavaScript frameworks in the next video.