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
Lots of code is provided in this course. We’ll go over the files provided in the project files and how to run our simple app.
Resources
Treehouse 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
Let's get started.
0:00
Download the project files for
this course.
0:01
Navigate to the START-HERE folder and
0:04
open up the project files in
your favorite text editor.
0:06
I'll be using Visual Studio Code.
0:10
The project files contain two folders,
client and api.
0:12
The api folder contains
the back end of our app.
0:17
It's a simple Express REST API
application that authenticates users
0:21
using basic authentication.
0:25
In this course, I'll focus on how to
implement basic authentication in React.
0:28
If you like to learn how to
build the back end as well,
0:33
I've included a link to an instruction
step in the teacher's notes below.
0:37
From these files,
you just need to know that all POST and
0:42
GET requests from the React client will
be made to the api/users end-point.
0:46
All the code we write in this course
will be in the client folder.
0:53
The src folder contains the files
we'll be working within in this course.
0:56
Let's quickly review the main files and
folders.
1:01
The components folder holds all
the individual components for the app.
1:05
For example, components that render
the Home and Authenticated views, and
1:09
the sign-in and sign-up forms.
1:14
The context folder contains
the context used in this app.
1:17
Context is used in React when data needs
to be accessible by many components at
1:22
different nesting levels.
1:27
The ThemeContext contains the states
that control the look of the app.
1:29
Later in this course,
we'll fill out the UserContext to store
1:33
the user's information and hold
the function to sign a user in and out.
1:38
To learn more about context,
take our React Context API workshop,
1:43
I've linked it in
the teacher's notes below.
1:47
The styles folder contains the CSS for
the application.
1:50
We won't be working with the CSS
as we go through the project, but
1:55
feel free to change it,
to add your own style to the app.
1:58
App.js is the main container of the app,
it's responsible for
2:02
rendering the child components of the app.
2:06
Index.js is the entry point
into the application,
2:11
which renders the main App component.
2:15
It also provides both
context to the entire app.
2:17
Feel free to thoroughly review and
explore the code in each project file.
2:22
You'll have a better grasp of
the component file structure and
2:27
will likely pick up a few handy
React tips along the way.
2:31
Let's open up our terminal to get
our front end up and running.
2:35
We'll first need to navigate to
the client folder by typing cd client.
2:39
Once in the client folder, we can install
the dependencies by running npm i.
2:46
After the dependencies
finished downloading and
2:53
installing, we can start
the app by running npm start.
2:57
This will launch your React
app at localhost 3000.
3:01
React Router is currently configured
to render the Home component for
3:05
the root path,
as well as the UserSignIn and
3:10
UserSignUp components for
the signin and signup paths respectively.
3:12
If React Router's Routes component
does not find a matching route,
3:18
it's going to fall back to the notfound
route and render the NotFound component.
3:22
You can view the code for
each route in the file App.js.
3:28
All right, let's get the back end
of the application up and running.
3:33
The front and back end of the application
need to be running at the same time,
3:37
so we'll need to open
up a second terminal.
3:42
In Visual Studio Code, we can do
that by clicking this + button.
3:45
We'll first need to navigate to
the api folder by typing cd api.
3:49
Let's install the necessary
dependencies by running npm i.
3:56
After the dependencies
finished downloading and
4:02
installing, run npm start to
start the express application.
4:05
We know our server is up and
running because we can see the message,
4:10
Express server is listening to port 5000.
4:14
We can even see a welcome message,
we go to localhost 5000 in the browser.
4:17
Our React app is running on localhost
3000 and our server at localhost 5000.
4:24
Even though they use the same host name,
localhost,
4:30
the browser treats them as
separate origins or domains.
4:34
As a result, the browser running the cient
will block any request to the REST API,
4:39
such requests are known as
cross-origin HTTP requests.
4:44
By default, browsers restrict cross-origin
requests because they represent
4:50
potential security risks.
4:55
In our case, the browser should let
the application running at localhost 3000
4:56
have permission to access resources
from the server at localhost 5000.
5:02
This is what's known as cross-origin
resource sharing, or CORS for short.
5:07
CORS supports secure
cross-origin requests and
5:13
data transfers between browsers and
web servers.
5:17
To circumvent the CORS issue and
successfully make requests from
5:21
the React applications domain
to the rest api's domain,
5:25
I've enabled CORS support for
the rest api application.
5:30
In the api folder,
I've already pre-installed and
5:35
configured the CORS npm package.
5:39
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