1
00:00:02,000 --> 00:00:04,000
Now when reusing components.

2
00:00:04,000 --> 00:00:07,000
So using one at the same component multiple times

3
00:00:07,000 --> 00:00:09,000
as we're doing it with Post.

4
00:00:09,000 --> 00:00:12,000
There's also another important React feature you

5
00:00:12,000 --> 00:00:16,000
must know to make those reused components more useful

6
00:00:16,000 --> 00:00:19,000
because at the moment the component we have here,

7
00:00:19,000 --> 00:00:20,000
the Post component,

8
00:00:20,000 --> 00:00:23,000
is of course still fairly static.

9
00:00:23,000 --> 00:00:27,000
Sure it has this random name that's being output

10
00:00:27,000 --> 00:00:28,000
but in the end here

11
00:00:28,000 --> 00:00:31,000
we also just have a static choice between two names.

12
00:00:31,000 --> 00:00:35,000
This component isn't really useful yet.

13
00:00:35,000 --> 00:00:38,000
Later when we're able to create posts

14
00:00:38,000 --> 00:00:41,000
and store them in some database and fetch them from there

15
00:00:41,000 --> 00:00:44,000
we wanna be able to reuse that component

16
00:00:44,000 --> 00:00:46,000
with different names

17
00:00:46,000 --> 00:00:50,000
and different text values that are coming from a database

18
00:00:50,000 --> 00:00:51,000
for example,

19
00:00:51,000 --> 00:00:54,000
so that are not hard coded into the code.

20
00:00:55,000 --> 00:00:58,000
Well we don't have the database part yet.

21
00:00:58,000 --> 00:01:00,000
We don't have any data fetching yet,

22
00:01:00,000 --> 00:01:03,000
but we can still start preparing this component to

23
00:01:03,000 --> 00:01:07,000
be more useful by adding a feature called Props to it.

24
00:01:08,000 --> 00:01:10,000
For that I'll first of all get rid of that

25
00:01:10,000 --> 00:01:13,000
randomness code because I don't need it anymore

26
00:01:13,000 --> 00:01:16,000
and instead I wanna make sure that both the name

27
00:01:16,000 --> 00:01:20,000
and the text here can actually be configured

28
00:01:20,000 --> 00:01:24,000
from inside the place where this component is being used.

29
00:01:24,000 --> 00:01:29,000
So from inside the app component in this case here.

30
00:01:29,000 --> 00:01:32,000
So it would be great if we could use the Post component here

31
00:01:32,000 --> 00:01:35,000
or anywhere else in the app, doesn't matter.

32
00:01:35,000 --> 00:01:38,000
And we could pass different values

33
00:01:38,000 --> 00:01:42,000
to that component just as you can pass different arguments

34
00:01:42,000 --> 00:01:44,000
to one at the same function

35
00:01:44,000 --> 00:01:46,000
if you're calling a function in your code.

36
00:01:47,000 --> 00:01:51,000
If you have an add function that takes two numbers

37
00:01:51,000 --> 00:01:54,000
and returns the sum of those two numbers

38
00:01:54,000 --> 00:01:57,000
then in JavaScript you can call this function

39
00:01:57,000 --> 00:02:00,000
with different arguments, right?

40
00:02:00,000 --> 00:02:02,000
That's how JavaScript works.

41
00:02:04,000 --> 00:02:04,000
Now it would be nice

42
00:02:04,000 --> 00:02:07,000
if you could do the same thing with components

43
00:02:07,000 --> 00:02:11,000
and pass different values to one at the same component

44
00:02:11,000 --> 00:02:14,000
and that's where this Props feature comes into play.

45
00:02:15,000 --> 00:02:19,000
React allows you to add your own attributes called Props

46
00:02:19,000 --> 00:02:21,000
to your components.

47
00:02:21,000 --> 00:02:23,000
For example here,

48
00:02:23,000 --> 00:02:27,000
an author prop which could be Maximilian in my case here,

49
00:02:27,000 --> 00:02:30,000
and then maybe a text or a body prop,

50
00:02:30,000 --> 00:02:33,000
which could be "React.js is awesome."

51
00:02:34,000 --> 00:02:37,000
And then the second time we use the Post

52
00:02:37,000 --> 00:02:40,000
we could set a different author like Manuel

53
00:02:40,000 --> 00:02:45,000
and give it a body like "Check out the full course."

54
00:02:47,000 --> 00:02:50,000
So now I'm using the same Post component function here

55
00:02:50,000 --> 00:02:54,000
with different values set for author and body.

56
00:02:55,000 --> 00:02:58,000
This alone won't do the trick though.

57
00:02:58,000 --> 00:03:00,000
If we save all files,

58
00:03:00,000 --> 00:03:02,000
we now got no content on the screen.

59
00:03:03,000 --> 00:03:05,000
Because whilst we're passing data

60
00:03:05,000 --> 00:03:09,000
to the post component with our custom attributes here,

61
00:03:09,000 --> 00:03:11,000
so with that feature called Props

62
00:03:11,000 --> 00:03:16,000
we're not using these values inside of the Post component.

63
00:03:16,000 --> 00:03:18,000
How would React know where the author

64
00:03:18,000 --> 00:03:21,000
or body information should be output

65
00:03:21,000 --> 00:03:22,000
if it should be output at all?

66
00:03:23,000 --> 00:03:24,000
Well, it doesn't.

67
00:03:24,000 --> 00:03:28,000
That's why we have to tell React how to treat those props.

68
00:03:28,000 --> 00:03:30,000
But how do we tell React?

69
00:03:31,000 --> 00:03:33,000
Well again if you have a regular function

70
00:03:33,000 --> 00:03:34,000
like the add function,

71
00:03:34,000 --> 00:03:36,000
you receive parameters

72
00:03:36,000 --> 00:03:39,000
and you can work with these parameters then.

73
00:03:39,000 --> 00:03:41,000
A and B in this simple example.

74
00:03:42,000 --> 00:03:44,000
It's the same with custom components.

75
00:03:44,000 --> 00:03:48,000
There you receive a parameter, a single parameter though,

76
00:03:48,000 --> 00:03:51,000
and the value for this parameter will be passed

77
00:03:51,000 --> 00:03:53,000
to this function by React

78
00:03:53,000 --> 00:03:56,000
which should make sense because I mentioned before already

79
00:03:56,000 --> 00:04:00,000
that React will be executing your component functions.

80
00:04:01,000 --> 00:04:03,000
So here we can receive this parameter

81
00:04:03,000 --> 00:04:04,000
and I'll name it props,

82
00:04:04,000 --> 00:04:06,000
though the name is up to you

83
00:04:06,000 --> 00:04:10,000
because it will be an object using this concept called props

84
00:04:10,000 --> 00:04:12,000
in the React world.

85
00:04:12,000 --> 00:04:14,000
So this is simply a name made up

86
00:04:14,000 --> 00:04:17,000
by the React team that we get this props,

87
00:04:17,000 --> 00:04:20,000
this property collection object here

88
00:04:20,000 --> 00:04:24,000
as an argument in this function.

89
00:04:24,000 --> 00:04:27,000
So this will always be an object what we get here.

90
00:04:27,000 --> 00:04:30,000
And the special thing about this object is

91
00:04:30,000 --> 00:04:34,000
that it will have all these custom attributes that were set

92
00:04:34,000 --> 00:04:36,000
on the component as property names,

93
00:04:36,000 --> 00:04:39,000
so as keys that we can access.

94
00:04:40,000 --> 00:04:41,000
So here

95
00:04:41,000 --> 00:04:44,000
since I'm setting author and body on my custom component

96
00:04:44,000 --> 00:04:46,000
I can access props.author

97
00:04:46,000 --> 00:04:50,000
and props.body on this props object that's passed

98
00:04:50,000 --> 00:04:54,000
into this component function automatically by React.

99
00:04:56,000 --> 00:04:57,000
So therefore here

100
00:04:57,000 --> 00:05:00,000
in the place where I wanna output the author name,

101
00:05:00,000 --> 00:05:02,000
I can output props.author,

102
00:05:02,000 --> 00:05:04,000
and here where I wanna output the text

103
00:05:04,000 --> 00:05:09,000
I can output props.body and remove this code here.

104
00:05:10,000 --> 00:05:14,000
And with this simple yet important change

105
00:05:14,000 --> 00:05:18,000
and by using this super important feature called Props,

106
00:05:18,000 --> 00:05:20,000
we can save all our code files

107
00:05:20,000 --> 00:05:23,000
and we got our two components back,

108
00:05:23,000 --> 00:05:25,000
but now this time configured

109
00:05:25,000 --> 00:05:27,000
with different values.

110
00:05:28,000 --> 00:05:30,000
So it's the same component function,

111
00:05:30,000 --> 00:05:32,000
it's a single component function

112
00:05:32,000 --> 00:05:35,000
used with different configurations

113
00:05:35,000 --> 00:05:38,000
with different values for these props.

114
00:05:38,000 --> 00:05:41,000
And thanks to us using this props feature inside

115
00:05:41,000 --> 00:05:43,000
of the component function,

116
00:05:43,000 --> 00:05:44,000
we therefore do see

117
00:05:44,000 --> 00:05:47,000
this different content on the screen.

118
00:05:47,000 --> 00:05:50,000
And that's how you make components reusable.

119
00:05:50,000 --> 00:05:52,000
Now as mentioned before,

120
00:05:52,000 --> 00:05:55,000
not all components must be reusable,

121
00:05:55,000 --> 00:06:00,000
and some components might not need any props at all.

122
00:06:00,000 --> 00:06:02,000
But that's up to you as a developer.

123
00:06:02,000 --> 00:06:04,000
You can build your own components

124
00:06:04,000 --> 00:06:07,000
and if you have a certain component that should be used

125
00:06:07,000 --> 00:06:10,000
in different places with different values

126
00:06:10,000 --> 00:06:12,000
this props feature is your friend.