1
00:00:00,210 --> 00:00:02,690
In the previous video,
I asked you to write the routes for

2
00:00:02,690 --> 00:00:04,790
the teachers and courses components.

3
00:00:04,790 --> 00:00:07,582
If you haven't created them yet,
that's okay, we'll write them now.

4
00:00:07,582 --> 00:00:12,811
So first, let's import the teachers and
courses components in app.js,

5
00:00:12,811 --> 00:00:16,133
with import Teachers from './Teachers'.

6
00:00:19,194 --> 00:00:22,942
And import Courses from './Courses'.

7
00:00:27,730 --> 00:00:33,228
Now we'll render these components into app
at their respective paths using the route

8
00:00:33,228 --> 00:00:38,207
component, so below the about route
I'll include a new route for teachers.

9
00:00:38,207 --> 00:00:41,705
Where path =" /teachers", and

10
00:00:41,705 --> 00:00:45,910
the component to render will be Teachers.

11
00:00:47,870 --> 00:00:52,756
Below that, include a new route for
courses, so

12
00:00:52,756 --> 00:00:59,482
I'll set path to /courses,
And component to Courses.

13
00:01:03,582 --> 00:01:07,766
So now each route should render it's
assigned component when it's path matches

14
00:01:07,766 --> 00:01:09,890
the URL, let's try it out.

15
00:01:09,890 --> 00:01:15,300
Over in my app,
if I change the URL to /teachers,

16
00:01:15,300 --> 00:01:18,920
we see the teacher's component
displaying the list of teachers,

17
00:01:18,920 --> 00:01:24,140
change it to /courses and
we see the courses component, great.

18
00:01:24,140 --> 00:01:27,920
Now there aren't any courses listed here
yet, you'll be adding those later in this

19
00:01:27,920 --> 00:01:31,370
course, in fact, I'm saving that for
a special challenge for you.

20
00:01:31,370 --> 00:01:35,690
Now remember earlier when I mentioned that
react router is just a set of components?

21
00:01:35,690 --> 00:01:39,962
Well, if you open up the react
DevTools in your browser,

22
00:01:39,962 --> 00:01:44,490
you'll see the BrowserRouter
component inside app.

23
00:01:44,490 --> 00:01:49,370
And nested inside is Router, which is the
core routing component that provides all

24
00:01:49,370 --> 00:01:54,240
the context its descendant components
need in order to match a path to the URL.

25
00:01:54,240 --> 00:02:00,260
Then we have our Route component
inside Router, and notice that when

26
00:02:00,260 --> 00:02:06,350
a route's path does not match the current
URL, the router renders null.

27
00:02:06,350 --> 00:02:14,210
Now, currently the URL is /courses, so the
Home, about, teachers route render null.

28
00:02:14,210 --> 00:02:18,960
While courses is the only Route that's
rendering a component into the DOM.

29
00:02:18,960 --> 00:02:23,300
Also, react doesn't render any of
the routing components to the actual DOM,

30
00:02:23,300 --> 00:02:25,180
they just manage what gets rendered.

31
00:02:25,180 --> 00:02:29,220
So if I switch over to the Elements tab
here in Chrome DevTools, you'll see just

32
00:02:29,220 --> 00:02:34,180
the HTML for our app, and it's displaying
the markup for the courses component only.

33
00:02:35,340 --> 00:02:40,240
The react empty comments you see here, are
a result of the other routes like home,

34
00:02:40,240 --> 00:02:42,652
about, and teachers being
rendered as null for this URL.

35
00:02:44,690 --> 00:02:49,655
There are other ways you can render a
component with Route besides the component

36
00:02:49,655 --> 00:02:54,300
pro, so, for example, the render prop
lets you do inline component rendering.

37
00:02:55,840 --> 00:02:58,900
Instead of passing at name
of the component to render

38
00:02:58,900 --> 00:03:01,760
you pass it a function that
returns the component.

39
00:03:01,760 --> 00:03:07,444
So let's pass the about Route and arrow
function that returns the about component,

40
00:03:10,840 --> 00:03:16,472
So now whenever the URL matches the about
path the function here gets called and

41
00:03:16,472 --> 00:03:18,529
renders the about component

42
00:03:22,629 --> 00:03:26,820
Now one of the main reasons you'd wanna
use the render prop over the component

43
00:03:26,820 --> 00:03:30,970
prop is when you need to pass props
to the component you're rendering.

44
00:03:30,970 --> 00:03:34,970
Remember, in react, we pass data to
components via attributes called props,

45
00:03:34,970 --> 00:03:37,290
props are how components
talk to each other.

46
00:03:37,290 --> 00:03:42,270
Props passed to a component can be used to
render dynamic content, so far example,

47
00:03:42,270 --> 00:03:49,910
we can give the about component a prop
of title and set the value to About.

48
00:03:49,910 --> 00:03:54,410
And the title prop is now available
in our about component as props and

49
00:03:54,410 --> 00:03:57,150
can be used in its render
method to render content.

50
00:03:58,470 --> 00:04:03,013
So About is a stateless component,
written using an error function,

51
00:04:03,013 --> 00:04:07,941
when describing a component using
a function you can access props by passing

52
00:04:07,941 --> 00:04:11,497
the function the props object
via the props argument.

53
00:04:11,497 --> 00:04:16,300
A common name for this argument, so
to display the title dynamically I'll

54
00:04:16,300 --> 00:04:19,731
replace the text in the h2
with a set of curly braces,

55
00:04:19,731 --> 00:04:23,561
then inside the curly braces,
I'll write props.title.

56
00:04:26,789 --> 00:04:30,800
And as you can see, this renders
the about heading in the component.

57
00:04:30,800 --> 00:04:35,880
Now this is a basic example of
passing a string, as a prop,

58
00:04:35,880 --> 00:04:39,800
but as you've learned in a previous
course, you can pass other types of props,

59
00:04:39,800 --> 00:04:42,180
like arrays, objects, and functions.

60
00:04:42,180 --> 00:04:45,530
So far example, in a later video,
we'll use inline rendering

61
00:04:45,530 --> 00:04:51,190
to pass the data from inside the courses
array into a component via props.

62
00:04:51,190 --> 00:04:52,929
You can learn a whole
lot more about props and

63
00:04:52,929 --> 00:04:55,569
arrow functions in the resources
posted in the teacher's notes.

64
00:04:57,330 --> 00:05:01,340
The directory app is missing two important
features, the functionality of the main

65
00:05:01,340 --> 00:05:05,390
navigation, and the list of courses
inside the courses component.

66
00:05:05,390 --> 00:05:06,670
So coming up in the next stage,

67
00:05:06,670 --> 00:05:10,560
you'll learn more useful features of react
router that let you navigate between

68
00:05:10,560 --> 00:05:14,690
routes, render nested routes, pass data
to components via routes, and more.

69
00:05:14,690 --> 00:05:15,190
See you soon.