1
00:00:00,480 --> 00:00:05,147
In this course, you're going to create
a single page app using React and

2
00:00:05,147 --> 00:00:06,918
the React Router library.

3
00:00:06,918 --> 00:00:09,462
Single page apps, or SPAs,

4
00:00:09,462 --> 00:00:14,455
are web applications that
display on a single web page.

5
00:00:14,455 --> 00:00:20,286
The app's HTML, JavaScript, and
CSS are loaded only once by the browser,

6
00:00:20,286 --> 00:00:26,041
and the content changes dynamically
as the user interacts with the app.

7
00:00:26,041 --> 00:00:31,479
The app itself never reloads unless
the user manually refreshes it.

8
00:00:31,479 --> 00:00:36,119
This provides a smoother
browsing experience for users,

9
00:00:36,119 --> 00:00:40,389
like one found in desktops and
mobile applications.

10
00:00:40,389 --> 00:00:44,604
In single page apps,
routing is responsible for loading and

11
00:00:44,604 --> 00:00:50,565
unloading content, while matching the URL
with a set of components being rendered.

12
00:00:50,565 --> 00:00:56,773
For instance, if a user clicks a Signup
Link to visit a signup form in your app,

13
00:00:56,773 --> 00:01:02,323
the router finds the component that
corresponds with the Signup URL,

14
00:01:02,323 --> 00:01:05,067
and loads of them onto the screen.

15
00:01:05,067 --> 00:01:09,254
A good, dependable routing
solution should also keep

16
00:01:09,254 --> 00:01:14,086
track of the browser history to
keep the UI in sync with the URL.

17
00:01:14,086 --> 00:01:20,245
That way, users can navigate the app using
the browser's Back and Forward buttons.

18
00:01:20,245 --> 00:01:25,524
Routing should seamlessly link users
to specific sections of your app.

19
00:01:25,524 --> 00:01:30,187
For example, if a user bookmarks or
shares a URL in your app,

20
00:01:30,187 --> 00:01:35,041
the URL should always direct
the user to the correct location.

21
00:01:35,041 --> 00:01:39,435
In other words, routing in single
page apps should work in a way that's

22
00:01:39,435 --> 00:01:44,506
consistent with the navigation experience
of regular multi page sites and apps.

23
00:01:44,506 --> 00:01:49,417
Otherwise, users may experience usability
problems, like not knowing which part of

24
00:01:49,417 --> 00:01:52,591
the app they're visiting,
or visiting a broken link.

25
00:01:52,591 --> 00:01:57,853
JavaScript frameworks like Angular and
Ember come with built-in routing features.

26
00:01:57,853 --> 00:02:01,552
But as you've learned in the previous
course, React is not a framework.

27
00:02:01,552 --> 00:02:04,829
It's a library concerned
with rendering your UI.

28
00:02:04,829 --> 00:02:09,081
So the talented React community
developed additional libraries and

29
00:02:09,081 --> 00:02:14,150
useful add-ons for building apps, React
router being the most popular router.

30
00:02:14,150 --> 00:02:18,979
So coming up in this course, you'll
learn how React Router fits into React's

31
00:02:18,979 --> 00:02:22,797
declarative and
modular style of building user interfaces.

32
00:02:22,797 --> 00:02:27,250
And why it's one of the most intuitive and
reliable routing solutions for React.