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 Create a Portfolio Using React!
You have completed Create a Portfolio Using React!
Preview
In this video, we’ll setup the components for our webpage.
Resources
Snippets
const projectList = [
{
id: 1,
title: 'AI Story Generator',
tech: ['React', 'Tailwind', 'TypeScript'],
description:
'I created a random story generator using React and Tailwind, with a series of prompts a story and matching images will be generated using the OpenAI api!',
liveLink: '#',
githubLink: '#',
image: storyGenerator,
},
{
id: 2,
title: 'Digital Business Card',
tech: ['HTML', 'CSS', 'JavaScript'],
description:
"This project was created for Treehouse's Front End Web Development TechDegree",
liveLink: '#',
githubLink: '#',
image: businessCard,
},
{
id: 3,
title: 'SVG Animations',
tech: ['HTML', 'CSS'],
description:
'I learnt to create SVG animations using CSS. I also got to implement more advanced CSS techniques like clip-path and keyframes. I had also struggled with media queries before, but this project really helped!',
liveLink: '#',
githubLink: '#',
image: svgAnimations,
},
];
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
Time to set up our components.
0:00
Let's start off at the top
of the page with the header.
0:01
I'll create a new components directory and
a new file called Header.jsx.
0:04
Let's create a new component
with the rafce snippet.
0:09
We want our header component
to return a header element.
0:15
Inside it,
0:19
we'll add a span with our name followed
by a button with the class of menu-BTN.
0:20
Inside the button, we'll set up an image
tag with an src attribute of menu and
0:33
an alt of menu.
0:38
Don't forget to import the menu icon from
our assets file at the top of the file.
0:42
Let's have a look in the browser.
0:51
Oops.
0:54
Looks like I forgot to render
the header in our App component.
0:55
Let's fix that quickly by changing
the text app to our new header component.
0:59
Don't forget to import the component.
1:04
That looks great.
1:08
Now let's get the links to render for
1:09
our desktop sized screens by adding the
navigation back in our header component.
1:11
I'll add a nav tag underneath the button.
1:16
Let's give it the class name
of nav to apply the styling.
1:18
Inside the nav tag,
1:22
we'll create a ul with an li containing
the link to our about section.
1:23
I'll copy that list item
a couple of times and
1:30
change the link to go to our projects and
contact sections.
1:33
In the browser, when I zoom out a little,
we'll see our navigation pop up for
1:46
desktop-sized screens.
1:51
Perfect, we'll work on adding
interactivity to our hamburger menu in
1:52
the next video.
1:57
Next, we'll create the hero
section of our page.
1:59
In the components folder,
let's create a new file named hero.JSX.
2:02
And bootstrap a new
component using our snippet.
2:07
This component should return a section
tag with the class of hero and divider.
2:11
The divider class will add the styles of
the green squares in between the sections.
2:16
This section will contain two dive,
2:20
one for the profile image which
will give the class name of image.
2:22
In this wrapper, we'll place an image tag
with a source attribute of profile image
2:26
and an alt tag of photo of Chuck.
2:31
We'll import the profile image up at the
top of the file from our assets folder.
2:33
Great, let's now give our section
a second div to contain our content and
2:43
give it an h1 with our fictive name.
2:49
And I'll copy in the paragraphs
containing our title and
2:52
location from the project files.
2:54
Finally, we'll add a link that
navigates the visitor to our projects.
3:00
I'll give the anchor tag
a class name of BTN,
3:08
which will apply the button-like styles.
3:11
Now, in our App.jsx, we can render our new
hero component within a set of main tags.
3:15
Make sure to import the component
at the top of the file.
3:22
In the browser, we will see our
component rendering as expected,
3:25
including the divider at
the bottom of the section.
3:29
Awesome, next up is our About Me section.
3:32
In the Components folder,
I'll create a new file named about.jsx and
3:36
bootstrap a new component.
3:40
I'll copy over the HTML structure
from the project files and
3:43
update the class attributes
to be named classname.
3:47
In the App.jsx file, we can import and
3:52
render our new component
underneath the hero.
3:55
Moving over to the browser,
3:59
we'll see our about component
being rendered just as expected.
4:01
But scrolling down, you'll notice that we
have the exact same button style link here
4:05
as we had up in the hero section.
4:10
Let's extract that logic
into a separate component.
4:12
Back in VS code,
I'll create a new file called link.jsx and
4:16
set up a new functional component.
4:21
We want our link component to return
an anchor tag which has an h ref attribute
4:24
we'll set to h ref.
4:28
And let's render the children pass
to our component between these tags.
4:29
These two properties will
come in through the prompts.
4:35
So let's destructure them right here.
4:38
Also, let's not forget to apply
the button styles by giving the tag
4:40
a class name of BTN.
4:44
Now let's update our existing links
to use our reusable link component.
4:47
In about.jsx, I'll remove the class name
and change the tag to our link component.
4:52
We'll do the same in our hero component.
4:58
Make sure that the link
component is being imported.
5:01
In the browser, everything still looks the
same, but our buttons are now reusable for
5:08
future use.
5:13
Our next component will
be the project section.
5:15
Let's clean up a little by closing
the tabs we no longer need.
5:18
Then create a new projects
component in our components folder.
5:21
I'll paste in an array containing
the data for my projects.
5:26
I'll share the snippet in
the teacher's notes below this video.
5:30
Each project has an ID, title,
array of technologies used,
5:33
a short description links to our Github
and live page as well as an image.
5:37
I've added some screenshots of my code
adventure projects in the assets folder.
5:42
So let's import those images
at the top of the file.
5:46
Copilot can be helpful with auto
completing these suggestions, but
5:49
the file names aren't quite right, so I'll
manually adjust them to match our assets.
5:53
Perfect, now, let's collapse our
projects array and create our component.
6:02
We want the component to return
a section with the ID of projects and
6:10
a class name of divider in there we'll
add an h2 title saying my projects and
6:14
a div that will contain our projects.
6:19
Within the div tags,
I'll map over the project list array, and
6:26
for each project I want it to
render a project component.
6:30
We'll pass it a key, and
the project object itself.
6:34
Let's rename the project prop suggested
by copilot to data to avoid confusion
6:38
caused by multiple things
having the same name.
6:43
All right, let's create this
component while we're at it.
6:47
This component should return an article
tag with the class name of project to
6:55
apply the proper styling.
6:59
In the article, we'll create a div
with the class name of image,
7:03
which will contain our actual image tag.
7:07
Let's give the source attribute
a value of data.image and
7:11
the alt attribute to be
the project's title.
7:15
This data comes in from our props,
so let's destructure it right away.
7:21
Underneath the image div, we'll create
a second div with the class of content.
7:26
Inside that div,
we'll render a level 3 heading and
7:31
set it as the title of the project.
7:33
Next, I'll create a ul and
loop over the data.tech array.
7:37
For each technology in the array,
we'll create an li tag with a key and
7:41
set its content to be the tech.
7:45
After the URL, we'll add the description,
copilot is being very helpful here.
7:48
Thank you.
7:52
Lastly, we'll set up a div
containing our two links.
7:54
We'll use our reusable link component,
and pass it the href.
7:57
Co pilot is trying to be helpful again but
we don't have a text prop set up for
8:01
our link, so
let's just pass the content manually.
8:05
Now that we've shown co
pilot how it's done,
8:09
it figured out how to
set up the GitHub link.
8:11
Beautiful, let's ensure that our
new project component is being
8:15
imported in our projects file.
8:19
And that our app component renders
the projects underneath our about section.
8:24
Let's switch to the browser and
examine the result.
8:32
Look at that.
8:36
All project components
are being rendered as expected,
8:36
complete with their images and data.
8:39
Well done.
8:42
Our next component is the contact
section containing links to our socials.
8:44
I'll create a new file and
bootstrap the component.
8:49
This component will render
a section tag with class and
8:53
id attributes set to contact.
8:57
We'll give the section an h2
saying contact, and underneath,
9:00
we have a paragraph asking
the visitor to connect.
9:04
For our icons, I'll create a wrapping
div with the class of socials-container.
9:10
Inside it, we'll create an A tag for
each of our socials.
9:15
Now for icons,
I usually prefer creating a separate file.
9:19
It might be excessive for this project,
but when working on larger projects,
9:23
you often need to reuse icons in
multiple locations within the app.
9:27
Having a separate icons file makes it
easier to update them when redesigning
9:30
the app or if Elon decides to
change the name and icon of X,
9:35
formerly known as Twitter.
9:38
In our Icons.jsx file,
I'll export an object named icons.
9:40
This object will have properties for
each social icon, where each property is
9:45
a function that returns
the corresponding SVG from our assets.
9:50
Let's import our new icon.
9:56
Oops, that's the wrong file.
9:58
We should go to our Contact component.
10:00
There we go.
10:02
In our anchor tag,
we can render out our icons.facebook icon.
10:04
Make sure that the icons object is
imported at the top of the file.
10:08
In our app.jsx file,
I'll import our contact component and
10:11
add it in our JSX below our projects.
10:16
Let's check it out in the browser.
10:23
And there is our Facebook
icon showing up as expected.
10:25
Great, back in VS Code,
we can finish up our other components.
10:29
I'll add an Instagram property
to our icons object and
10:34
set it to be a function returning the SVG.
10:37
There we go, and
I'll paste in the same thing for
10:45
the remaining three icons Twitter,
LinkedIn, and
10:48
GitHub Perfect, let's move back to our
10:51
contact component and finish things up by
adding these last couple of social links.
10:57
Co pilot is very helpful here once again,
I'll leave the href attributes blank, but
11:02
you can of course update them
to link to your own profiles.
11:06
In the browser, all five of our
icons are now being rendered, and
11:13
they are easily maintained
from a single location.
11:16
Way to go.
It's time for our final component,
11:19
the footer.
11:22
The footer will only include our name,
and a copyright with the current year.
11:24
To obtain the current year, I will use
the date object and create a variable
11:32
called current year to access the year
using the getFullYear method.
11:37
In the return statement,
we will add a span containing our name,
11:43
the current year variable we just created,
and a copy icon.
11:47
Let's import our footer
in the app component and
11:53
render it below our closing main tag.
11:56
Now, at the bottom of our page,
12:04
we have our nice green footer
containing the current year.
12:06
We won't have to come back and manually
update this year after new year's,
12:10
which is great.
12:13
In the next video, we'll add some
finishing touches like functionality to
12:14
our hamburger menu and we'll deploy
our portfolio to share with the world.
12:18
Hope to see you there.
12:22
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