WEBVTT

1
00:00:00.800 --> 00:00:05.530
Hi and welcome to this tutorial
on react native props and prop types.

2
00:00:05.560 --> 00:00:07.650
Props, short for properties,

3
00:00:07.680 --> 00:00:11.900
are a way to pass data from a parent
component to a child component.

4
00:00:11.930 --> 00:00:13.140
In react native.

5
00:00:13.170 --> 00:00:15.260
Prop types is a way to validate

6
00:00:15.290 --> 00:00:20.540
that the data that is passed to your
component is of the expected type.

7
00:00:20.570 --> 00:00:23.460
In this tutorial we will learn why props

8
00:00:23.490 --> 00:00:29.220
are useful, how to them in your react
native app, and also how to use prop types

9
00:00:29.240 --> 00:00:34.460
to validate that the data that is
passed is of the expected type.

10
00:00:34.490 --> 00:00:36.660
You're now looking at my screen

11
00:00:36.680 --> 00:00:42.580
with my editor opened and my simulator
opened and my Metro running,

12
00:00:42.610 --> 00:00:48.020
and the editor is displaying the code
that we had exactly in the last video.

13
00:00:48.050 --> 00:00:52.620
We're now going to clean up
our app component.

14
00:00:52.650 --> 00:00:55.860
We're going to get rid
of my text component here.

15
00:00:55.890 --> 00:01:00.900
Going to take a look at how to use props
in a real world scenario.

16
00:01:00.930 --> 00:01:05.620
Today for the purpose of displaying how
props work exactly, we're going to create

17
00:01:05.650 --> 00:01:10.850
a new component that we're going to call
an item, and this item is going to be

18
00:01:10.880 --> 00:01:15.410
displaying the name of the item
and the price of the item.

19
00:01:15.440 --> 00:01:16.980
In the parent component,

20
00:01:17.010 --> 00:01:20.980
we usually would define the props that we
want to pass to the child component

21
00:01:21.010 --> 00:01:25.740
and then pass them as attributes
whenever we render the child component.

22
00:01:25.770 --> 00:01:28.140
Now let's create this child component.

23
00:01:28.160 --> 00:01:30.210
We're going to be creating a new directory

24
00:01:30.240 --> 00:01:34.980
called item,
and then we're going to be creating a new

25
00:01:35.010 --> 00:01:38.660
JavaScript file that's also
going to be named as Item.

26
00:01:38.690 --> 00:01:41.840
We're going to import react and we're

27
00:01:41.870 --> 00:01:48.740
going to create the item variable
that is going to be a functional component

28
00:01:48.770 --> 00:01:53.900
and it's going to be returning something
that we're going to define later.

29
00:01:53.930 --> 00:02:00.210
For now, let's export the item
component so that it's useful for us.

30
00:02:00.240 --> 00:02:08.540
Let's create a view container
and let's import view and text

31
00:02:08.570 --> 00:02:15.980
from react native
and let's define our text

32
00:02:16.010 --> 00:02:21.060
and that we're going to have a name here
and let's define a second text

33
00:02:21.090 --> 00:02:24.420
and this is going to be our price.

34
00:02:24.450 --> 00:02:32.730
Now, if we want to use this component
in our application, simply import the item

35
00:02:32.760 --> 00:02:39.060
from the components folder,
item directory, item file.

36
00:02:39.090 --> 00:02:41.300
And now we're going to use this item tag

37
00:02:41.330 --> 00:02:47.420
here and we're going to be seeing
name and price in our simulator.

38
00:02:47.450 --> 00:02:53.020
So now what we want to do is create
the actual props for this component.

39
00:02:53.050 --> 00:02:55.180
And the way to do this is that we have

40
00:02:55.210 --> 00:03:02.220
to make the item component
accept name and price as data.

41
00:03:02.250 --> 00:03:04.860
So let's say that we're going to be

42
00:03:04.890 --> 00:03:10.700
passing name and price to this item,
and let's use the JavaScript expression

43
00:03:10.730 --> 00:03:17.980
here to say that we need to display the
variable values of name and price here.

44
00:03:18.010 --> 00:03:21.180
Now, if we save this,
we're going to see that nothing is

45
00:03:21.210 --> 00:03:24.580
displayed because both of these
variables are undefined.

46
00:03:24.610 --> 00:03:26.660
And the reason they are undefined is

47
00:03:26.690 --> 00:03:31.460
because we haven't passed
any properties from here.

48
00:03:31.490 --> 00:03:38.860
So what we want to do is create a property
here called Name and we're going to say

49
00:03:38.890 --> 00:03:49.420
that we're selling a table
and the price of this table is $20.

50
00:03:49.450 --> 00:03:54.740
Now we see that a table
with a price of $20 appears here.

51
00:03:54.770 --> 00:03:57.020
What we can also do is create a list

52
00:03:57.050 --> 00:04:03.860
of items
and we can be selling a chair and we can

53
00:04:03.890 --> 00:04:10.400
also be selling a desk
and the prices can change.

54
00:04:13.520 --> 00:04:16.220
This means that we created one reusable

55
00:04:16.250 --> 00:04:20.580
component that accepts name
and price as variables.

56
00:04:20.600 --> 00:04:25.500
And we can use this component to display
any price and any name of the item

57
00:04:25.530 --> 00:04:30.500
that we're selling as long as we give
it the information that it requires.

58
00:04:30.530 --> 00:04:32.620
Previously, we saw that even though we

59
00:04:32.650 --> 00:04:38.780
didn't give any properties to the item
component, we didn't get any errors here.

60
00:04:38.800 --> 00:04:42.100
And Prop Types is what could help here

61
00:04:42.130 --> 00:04:48.780
to ensure that the data is passed to our
component and that it's of expected type.

62
00:04:48.800 --> 00:04:51.580
Let's start using prop types here.

63
00:04:51.600 --> 00:04:55.740
For this, what we're going to have
to Dom is import Prop Types.

64
00:04:55.770 --> 00:04:59.380
However, Prop Types has its own
library that we need to install.

65
00:04:59.410 --> 00:05:01.740
So let's go to terminal.

66
00:05:01.770 --> 00:05:10.260
I'll need to open a new terminal
and I'll navigate to my project

67
00:05:10.280 --> 00:05:16.780
which is new application,
and then I'm going to install Prop Types.

68
00:05:16.800 --> 00:05:20.340
The way to do this is NPM install

69
00:05:20.360 --> 00:05:24.940
Prop Types and the Prop Types
has been installed.

70
00:05:24.970 --> 00:05:27.940
So now we're ready to use Prop Types.

71
00:05:27.970 --> 00:05:36.540
All we need to do for this is import
Prop types from Prop Types.

72
00:05:36.570 --> 00:05:40.300
And just before we export our functional

73
00:05:40.330 --> 00:05:45.900
component, we're going to define
the properties that it's expecting.

74
00:05:45.920 --> 00:05:51.940
The way to do this is just to
open an object, say that we're expecting

75
00:05:51.970 --> 00:05:58.500
a name and it has to be of type
string and that it's required.

76
00:05:58.520 --> 00:06:00.500
And then we're going to say that we also

77
00:06:00.530 --> 00:06:06.740
need a price and it needs to be
a number and it's also required.

78
00:06:06.770 --> 00:06:11.940
Now, if we save this, we're going
to see that we have a warning here.

79
00:06:11.970 --> 00:06:16.100
And if we click on this,
we're going to see that it is marked as

80
00:06:16.130 --> 00:06:20.100
required, but its value
is actually undefined.

81
00:06:20.130 --> 00:06:22.300
So we can dismiss this warning here.

82
00:06:22.330 --> 00:06:25.420
We can go back to our app file and we can

83
00:06:25.450 --> 00:06:31.340
say that the name is Desk and the price

84
00:06:31.360 --> 00:06:36.020
is 200 and now we get no warning.

85
00:06:36.040 --> 00:06:41.220
Prop Types can be used to check
for strings, numbers, booleans and more.

86
00:06:41.250 --> 00:06:45.820
An advanced developer would use Prop Types
to validate the data passed in their

87
00:06:45.850 --> 00:06:49.500
application to ensure that the data
is of the expected type

88
00:06:49.530 --> 00:06:53.540
and this will be preventing bugs
and any unexpected behavior.

89
00:06:53.570 --> 00:06:55.540
It also makes the code more readable

90
00:06:55.570 --> 00:07:00.340
and maintainable for other developers
who might work on the same project.

91
00:07:00.360 --> 00:07:03.780
Additionally, it can be a great tool
for catching errors early

92
00:07:03.800 --> 00:07:07.780
in the development process before
they become a bigger issue.

93
00:07:07.800 --> 00:07:10.060
Props and Prop Types are powerful features

94
00:07:10.090 --> 00:07:14.980
in react native that allow for easy and
efficient data management and validation.

95
00:07:15.010 --> 00:07:20.100
By understanding how to use prop types
and props, you can create more modular

96
00:07:20.130 --> 00:07:24.380
and reusable components in your
React native application.

97
00:07:24.400 --> 00:07:26.800
Thanks for watching and see
you in the next video.