WEBVTT

1
00:00:01.120 --> 00:00:03.340
Hi and welcome to this exciting tutorial

2
00:00:03.370 --> 00:00:07.740
about React Native class-based components
with state and event management.

3
00:00:07.770 --> 00:00:10.500
I want to talk to you about state a bit.

4
00:00:10.530 --> 00:00:12.660
State is a crucial concept in React Native

5
00:00:12.690 --> 00:00:17.420
and it refers to the data or variables
that determine a component's behavior

6
00:00:17.450 --> 00:00:19.847
and render information to the user.

7
00:00:20.047 --> 00:00:22.860
In
class-based components state is created

8
00:00:22.890 --> 00:00:25.980
using the constructor we would create our

9
00:00:26.010 --> 00:00:32.300
state here like this, this state
and then empty object.

10
00:00:32.320 --> 00:00:33.820
That's it.

11
00:00:33.850 --> 00:00:36.060
So this is the initial state of our

12
00:00:36.090 --> 00:00:39.480
components and now let's see how we can
update the state in response

13
00:00:39.500 --> 00:00:42.820
to the simplest event such as
clicking on a text component.

14
00:00:42.850 --> 00:00:50.220
So let's create an onPress event here
and in order to update the state all we

15
00:00:50.250 --> 00:00:58.420
need to do is say for example this
set state and pass an object saying

16
00:00:58.450 --> 00:01:07.020
name Nata for example let's save this and I
have an error because I forgot one brace.

17
00:01:07.050 --> 00:01:08.130
Great.

18
00:01:08.160 --> 00:01:17.740
And now let's see what would happen
if I put this state name here.

19
00:01:17.770 --> 00:01:22.100
I'm just going to put a question mark
because it is initially not defined so we

20
00:01:22.130 --> 00:01:28.290
don't want to get an error and before we
click on this we see hello and that's it.

21
00:01:28.320 --> 00:01:31.930
But after we click on this
we're going to see hello Nata.

22
00:01:31.960 --> 00:01:35.210
Because our state was reset,

23
00:01:35.240 --> 00:01:39.570
it's important to note that state should
only be updated using set state and never

24
00:01:39.600 --> 00:01:44.570
directly as this can lead to unexpected
behavior in your components and any change

25
00:01:44.600 --> 00:01:49.290
will rerender the component and it will
ensure that component updates

26
00:01:49.320 --> 00:01:53.820
with the latest state and displays
the updated information to the user.

27
00:01:53.850 --> 00:01:55.850
So that's a brief introduction to state

28
00:01:55.880 --> 00:01:58.700
in React Native and how it works
in class based components.

29
00:01:58.730 --> 00:02:02.780
And in the next video we'll talk about
what lifecycle methods are and how they

30
00:02:02.810 --> 00:02:06.460
can be used to control and manage
the behavior of your component.

31
00:02:06.480 --> 00:02:08.600
Thanks for watching and see
you in the next video.