1
00:00:08,670 --> 00:00:09,780
In this video.

2
00:00:09,780 --> 00:00:16,680
Let's get started with Context API, how we can create it and how we can use it.

3
00:00:17,340 --> 00:00:27,330
I have created Fresh React application and it is running on Port 3001, so let's go ahead and then implement

4
00:00:27,330 --> 00:00:29,230
that before we continue.

5
00:00:29,310 --> 00:00:31,420
Let's do some housekeeping here.

6
00:00:31,500 --> 00:00:45,870
Inside the app, let's remove everything from this one and let's add h16 context API and let's remove

7
00:00:45,870 --> 00:00:47,400
the CSS from here.

8
00:00:47,400 --> 00:00:50,550
And this is what we are going to have.

9
00:00:50,670 --> 00:00:51,330
Good.

10
00:00:51,330 --> 00:00:56,160
So let's go ahead and create one for the core component.

11
00:00:59,850 --> 00:01:03,660
Inside that we are going to create three components.

12
00:01:03,660 --> 00:01:07,410
That is component A, B and C.

13
00:01:19,000 --> 00:01:19,530
All right.

14
00:01:19,540 --> 00:01:23,980
Components A, component B and then component C.

15
00:01:24,700 --> 00:01:28,870
Next step is that let's create a folder called context.

16
00:01:31,740 --> 00:01:32,310
Great.

17
00:01:32,430 --> 00:01:38,190
So for context, we can create different file based on a type of state.

18
00:01:38,340 --> 00:01:41,750
Let's say that we are developing a blog application.

19
00:01:41,760 --> 00:01:46,740
Definitely we need posts, users comment and many more.

20
00:01:46,770 --> 00:01:52,440
So for this, we are going to create a context for each type of state.

21
00:01:53,040 --> 00:02:00,320
For our case, let's just create one context called user of contact for authentication.

22
00:02:00,330 --> 00:02:09,630
So let's go ahead and create one file for user of context dot JS.

23
00:02:09,930 --> 00:02:18,630
So the logic here is that we are going to create a state which is not part of our component and any

24
00:02:18,630 --> 00:02:26,190
of this component, whether A, B and C that want a particular area from the context that you are going

25
00:02:26,190 --> 00:02:33,060
to create, that component can access a directly with that using what is called Prop trillion.

26
00:02:33,090 --> 00:02:35,900
So let's see how we are going to create that one.

27
00:02:35,910 --> 00:02:36,930
So here we go.

28
00:02:36,930 --> 00:02:38,850
Let me collapse this side by here.

29
00:02:39,360 --> 00:02:48,170
And the first step is we need to bring in the react because we need the context API.

30
00:02:48,180 --> 00:02:56,280
So react from React and what we want is called the create context.

31
00:02:56,760 --> 00:03:02,100
We create context using this hook called create contexts.

32
00:03:02,100 --> 00:03:04,290
So here we go.

33
00:03:04,590 --> 00:03:09,000
We are going to create an instance of create context.

34
00:03:09,000 --> 00:03:17,580
So going to be as export because you may need this one in other component export counts and then going

35
00:03:17,580 --> 00:03:28,840
to be as user of context and is equal to create contexts and that is it.

36
00:03:28,860 --> 00:03:31,140
We are done with the first part.

37
00:03:31,500 --> 00:03:40,740
The second part is that we are going to create a component and that component is going to take any component

38
00:03:40,740 --> 00:03:45,690
that want to have access to a particular state that we are going to create.

39
00:03:45,990 --> 00:03:58,530
So we are also going to export this components as costs and user of provider and the name implies.

40
00:03:58,650 --> 00:04:06,960
This is going to provide a state, a component that need to access it so it's equal to and start.

41
00:04:06,960 --> 00:04:09,000
And here we go.

42
00:04:09,420 --> 00:04:15,870
So because this one going to be a wrapper, meaning it's going to wrap in a component we need to pass

43
00:04:15,870 --> 00:04:17,790
in what is called children.

44
00:04:18,060 --> 00:04:23,390
So this children represent the component that we want to drop.

45
00:04:23,400 --> 00:04:28,260
So here we are going to return just sex.

46
00:04:28,260 --> 00:04:37,080
And here we bring in the user of context, dot provider, uppercase provider and insert.

47
00:04:37,080 --> 00:04:44,700
Here we are just going to inject the children, meaning a component that are going to pass in here.

48
00:04:44,880 --> 00:04:45,420
Great.

49
00:04:45,420 --> 00:04:53,970
So now with this one, we need to pass in addition attribute to the provider and going to be the value.

50
00:04:54,150 --> 00:05:00,450
So this value is going to hold a state that can be accessed in any component.

51
00:05:00,540 --> 00:05:05,760
So let's say that we are going to manage some internal state using you state.

52
00:05:05,760 --> 00:05:10,680
And for this we are just going to keep track of user authentication.

53
00:05:11,130 --> 00:05:20,370
For the meantime, let's use some dummy user here as user and then set user is equal to and for the

54
00:05:20,370 --> 00:05:20,790
user.

55
00:05:20,790 --> 00:05:25,710
Let's pass in some objects and let's say the name is John.

56
00:05:27,520 --> 00:05:34,780
And then the email is going to be as John at Gmail dot com.

57
00:05:35,050 --> 00:05:44,020
So now we have our state so we can pass in here to this value as user and that is it.

58
00:05:44,350 --> 00:05:49,600
So the next question is that how can a component consume this data?

59
00:05:49,690 --> 00:05:52,420
Let's get into that in the next video.