"React Router 4 Basics " was retired on October 1, 2023. You are now viewing the recommended replacement.
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