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, we’ll take a look at what we’re going to be building and get our files prepared.
Prerequisites
To follow along with this workshop we recommend finishing the following courses first:
Resources
VS Code Extensions Used
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
[MUSIC]
0:00
Hey team, Rohald here.
0:09
Today, we will create a portfolio site,
an essential tool for
0:11
web developers of all levels.
0:14
A portfolio is your personal showcase
where you display your best works,
0:16
projects, and skills.
0:20
It demonstrates your abilities,
style, and dedication.
0:22
Creating a portfolio is not just
about showcasing past work,
0:27
it's a project in itself.
0:31
In this workshop, we'll create
a portfolio project using React.
0:33
We'll solely focus on the React
aspect of the project,
0:37
like setting up reusable components and
using state for a hamburger menu.
0:41
We'll be using the project Travis
created with HTML, CSS, and JavaScript.
0:47
If you're interested to see how
the styles and structure were created,
0:52
you can find a link to his workshop
in the teacher's notes below.
0:56
In the project files,
you'll find the assets we'll be using for
0:59
this project, like the project images,
the CSS file, and an HTML file.
1:04
In this file, you'll find the structure
we'll be using to set up our components.
1:09
Without further ado, let's start
by setting up our React project,
1:15
we'll use Vite to bootstrap our project.
1:19
If you wanna learn more about Vite, I've
added a link to our workshop on how to set
1:22
up a React project in the teacher's
notes below this video.
1:26
To create a new Vite project, we'll run
the command npm create vite@latest.
1:30
Let's call our project react-portfolio.
1:35
When prompted for a framework,
we'll select React, and
1:39
we'll use regular JavaScript as a variant.
1:42
Vite will provide a couple of commands
to install the dependencies and
1:45
start the development server, so
let's run those as suggested.
1:49
Once finished, Vite will give us
the port where our project is running.
1:57
By clicking the URL,
we can visit our project.
2:01
Perfect, let's open up our
project in VS Code and
2:04
prepare it by deleting the app.cssfile.
2:08
Next, let's bring in our images by
dragging the assets folder from our
2:12
project files into the src folder of our
react app, replacing the existing one.
2:16
We'll do the same with the index.css file.
2:22
With those files set up,
I'll remove the contents of app.jsx and
2:30
overwrite it with an empty component for
now.
2:34
To quickly create a new
component like this,
2:40
I'm using an extension
called ES7+ React snippets.
2:43
It sets up a snippet that allows
you to create an empty component by
2:47
typing R-A-F-C-E.
2:52
Finally, let's change the title of
our project in the index.html file,
2:54
I'll call it portfolio,
followed by our fictive name, but
2:58
feel free to personalize
it in your project.
3:02
In the browser, we'll see the content of
the app, which is just the title at this
3:05
time, and the background has been
changed to match our new styles.
3:09
Awesome, that's it for now.
3:13
In the next video, we'll start creating
components for our different sections.
3:15
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