Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React Router v6 Basics!
You have completed React Router v6 Basics!
Preview
In this video, you'll have a look at the app you're going to build and get started with the project files.
Resources
Related courses and workshops
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now it's time to open up
the project files and start coding.
0:00
You can download the starter files for
0:04
this course in the download
section of this video.
0:06
I've also posted the link
in the teacher's notes.
0:08
Before you get started,
you'll need to have Node.js and
0:11
NPM installed on your computer.
0:15
If you haven't done that yet,
0:17
you'll find links in the teacher's notes
to instructions on how to install these.
0:18
So first, let's have a look at
the app you're going to create.
0:24
The project for
0:27
this course is a simple front end
course directory built with React.
0:28
The colorful directory has four
main sections, Home, About,
0:33
Teachers, and Courses.
0:38
When the app loads, you immediately know
that you're visiting the Home section,
0:41
because the home link
in the menu is active.
0:47
As you navigate through the app
by clicking the nav links,
0:51
you'll notice that the menu
links become active and
0:55
the browser doesn't reload
the app when the URL changes.
0:58
This is all done via routing.
1:03
For example,
clicking About renders an about component.
1:05
Clicking Teachers renders
a list of teachers, and so on.
1:11
Over in the Courses section,
you'll see a sub
1:16
navigation that links to
courses on different topics,
1:20
like HTML, CSS, and JavaScript.
1:26
Clicking a sub navigation link
not only loads new content,
1:29
but also changes the path in the URL,
1:35
while keeping both the topic and
courses link active.
1:38
And you can navigate the app with
the browser's back and forward buttons,
1:43
even refresh the app and the UI will
always be in sync with the URL.
1:48
Later in the course, you'll even learn
how to change routes programmatically and
1:53
build routes that accept
dynamic parameters.
1:59
For example, in the Home component,
I included a simple form
2:03
that navigates to a route in
response to the form submission.
2:08
If you type a name and
subject into the fields,
2:12
the form directs you to a URL that
includes the name and subject in its path.
2:16
You can even render the name and
subject in your content via routing.
2:23
All right, now let's take a look
at the project starter files.
2:29
I'm using Visual Studio Code as
my text editor for this course.
2:34
But you can use your
preferred text editor.
2:38
I set up the app using
the tool Create React app.
2:42
Navigate to your terminal by pressing
Cmd+J or clicking this button.
2:47
In the terminal, navigate to
the course directory project folder and
2:53
run npm i to install
the project's dependencies.
2:58
We're going to be working with
the files in the source directory.
3:09
This contains the app's main entry file,
index.js.
3:13
A components folder with all
the components that make up the app.
3:18
The style sheet already contains
the styles for the app, so
3:24
we won't be working with the CSS,
but you can change it as you please.
3:29
Our project consists mostly
of stateless components.
3:34
In other words, components that
don't initialize or change a state.
3:39
They're simply functions with just
a render method and no state.
3:44
And the data we're going to use in the app
will come from the teachers.js and
3:49
courses.js files located
inside the data folder.
3:56
For example, we'll use the CSS, HTML, and
4:00
JavaScript courses array to render
a list of front end courses,
4:04
and the teachers list array
to render a list of teachers.
4:10
Most of the time, you won't keep
your data in a file like this.
4:15
More commonly, you'll retrieve this
data from the server using an API.
4:19
But for this course,
since we're focusing on routing and
4:24
just the components being rendered,
we'll use this data along with the simple
4:28
stateless components to make the concepts
I'm teaching easier to understand.
4:34
All right, let's launch the app from
the terminal by running npm start.
4:40
We're not seeing anything too
exciting in the browser just yet.
4:47
We're only seeing the course directory's
container slash wrapper div,
4:51
which lives here inside the file App.js.
4:58
As I showed you earlier in the project
demo, we're going to use React Router
5:02
to dynamically load and unload
components inside this app component.
5:08
React Router will pay attention
to the browser's address bar for
5:13
changes in the URL,
then render the components for that URL.
5:18
Coming up in the next video,
you'll install React Router and
5:23
create your first route.
5:27
See you there.
5:28
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up