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