Why You Should Build Your Portfolio with ReactBuilding a Portfolio with React

React is the best programming language for building your portfolio website. Learn why, plus how to do it step by step.

avatar

Anne Lee

August 14, 2019

Anne recently set out to design 30 prototypes in 30 days with Framer X. She is also a proficient programmer, working with HTML, CSS, and JavaScript.

There are many ways to create a portfolio, and designers looking for maximum customizability will turn to code. Before you dive right in with HTML and CSS, consider a library like React to help you streamline your process.

React comes with a number of features that help speed up your workflow. First of all, components, similar to symbols from Sketch, let you create reusable elements across projects. You’ll be able to create and use components like project thumbnails without having to copy and paste the same code each time.

Also, if you configure your app with create-react-app, you’ll save time setting up your app, as the terminal does it for you. create-react-app not only sets up the basic file structure, but also comes with built-in features like service workers, meaning your website will be automatically cached so it works offline as well.

You can also deploy your React app to Github Pages, which hosts your website for free. This means that your website will be live and ready to share after just a few easy steps. Let’s try building a simple React portfolio app and experience its power firsthand.

Create a React App

To create the project, you’ll be using the terminal, a program that is usually built into your computer. You’ll also need to have Node.js and NPM installed. Once you’ve opened the terminal, run the following steps:

  • Navigate to the folder you wish to create your app in. If you’ve never used the terminal before, try typing cd Desktop and pressing enter to move into your Desktop folder.
  • Next, run npx create-react-app portfolio, then sit back and relax while the terminal creates the app for you.
  • When the terminal announces it’s finished, you’ll see a folder called portfolio on your Desktop (or whichever folder you’ve created it in).

Congrats, you just created your first React app! Now let’s install the dependencies and set up your workspace.

  • Your next commands need to run inside the new project folder, so type this command in the terminal: cd portfolio.
  • Run the following one after another: npm i react-router-dom, npm i framer-motion. This will install two libraries that you will be able to use across your app. Don’t worry if you don’t understand what these are for right now.
  • Next, run the following: npm start. This will open a browser so you can preview your changes as you work, which is similar to the Live Preview mode in Framer.
  • Finally, open the portfolio folder in your favorite code editor, and you’re all set! If you don’t have one, try Visual Studio Code.

File Structure

Let’s take a look at the different files and folders that have been installed within the portfolio folder. Imagine having to set all of this up on your own! React provides a quick, easy way to get your initial file structure in place, which speeds up the process significantly.

The current file structure should look something like this:

The files you’ll be working with are App.js and App.css, which are both located within the src folder.

  • App.js is your main workspace. This is where all of the code for your portfolio should go.
  • App.css is where all of your CSS code goes. This file works like a regular stylesheet.

We’ll also add more JavaScript files to the src folder along the way.

For now, let’s create three new files in the src folder:

  • Projects.js
  • Articles.js
  • About.js

In each file, paste the following snippet:

import React from "react"
function NewComponent(props) {
return (
<div>
<h1>New Component</h1>
</div>
)
}
export default NewComponent;
COPY

Then, for each file, change the component’s name, NewComponent, to the name of the file ( Projects, Articles, or About ). For example, here’s how your Projects.js file should look:

// src/Projects.js
import React from "react"
function Projects(props) {
return (
<div>
<h1>Projects</h1>
</div>
)
}
export default Projects;
COPY

Once you have completed this step, the file structure should resemble the one below:

We’ll come back to these files later to add their content. For now, let’s work out the rest of our project’s structure.

Essential Elements of a Portfolio

So how do we go about building the actual page? Portfolios vary in shape and size, but there are a few essential elements that every portfolio should have at minimum: a navigation bar, some project thumbnails, and individual pages for each project.

Create a Navigation Bar

Let’s start with the navigation bar. Open your App.js file and delete the header section—its opening tag <header>, its closing tag </header>, and everything between the two tags. Next, using plain HTML code, create a few menu items and style them accordingly in the App.css file, just like you would for a webpage that does not use React.

// App.jsx
import React from 'react';
// Replace SVG file with your logo
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App"> // Use 'className' instead of 'class'
<div className="navigation">
<img src={logo} className="logo" alt="Logo Image" />
<div className="navigation-sub">
<a href="" className="item">Projects</div>
<a href="" className="item">Articles</div>
<a href="" className="item">About</div>
</div>
</div>
</div>
);
}
export default App;
COPY

As you write the code, you may wonder which URL to put in the <a> tag. In a traditional webpage, you would create separate HTML files for each page and link a local path. However, React apps are single page applications, and ‘single page’ means that the whole website is actually one HTML file, with React changing the content of that page by rendering different components when appropriate. We don’t actually want to leave this page, we just want to use the browser to help us decide which components to render.

This is where the react-router-dom library comes in. The react-router-dom library provides a component called BrowserRouter, which synchronizes with the browser and allows a second component, Route, to control which component should appear for which URL. A third component, Link, allows for transitions between routes.

In other words, when the viewer types in a certain URL, or clicks a Link, the component associated with that URL (or “route”) will show up on the page.

Set up the router as shown below, and substitute your <a> tags with <Link>.

// App.jsx
import React from 'react';
import logo from './logo.svg';
// Import the BrowserRouter, Route and Link components
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Projects from './Projects.js';
import Articles from './Articles.js';
import About from './About.js';
import './App.css';
function App() {
return (
<BrowserRouter>
<div className="App">
// Set up the Router
<Route exact path="/" component={Projects} />
<Route path="/articles" component={Articles} />
<Route path="/about" component={About} />
<div className="navigation">
<img src={logo} className="logo-image" alt="Logo Image" />
<div className="navigation-sub">
// Set up the Links
<Link to="/" className="item">Projects</Link>
<Link to="/articles" className="item">Articles</Link>
<Link to="/about" className="item">About</Link>
</div>
</div>
</div>
</BrowserRouter>
);
}
export default App;
COPY

And your links work! Again, we’re using our router to do some slight-of-hand: rather than actually changing pages, we’ll have changed the content of the current page to look like we have.

Create Project Thumbnails

Now let’s create the project thumbnails. In the image below, you’ll notice that each thumbnail is comprised of an image, a title, and a category. In traditional web development, you’d be creating something that looked like this, then copying and pasting it over and over again.

<div className="project">
<a href="./experiments">
<div className="project-image">
<img src="./experiments-image" alt="Project Image"/>
</div>
<div className="project-title">Experiments</div>
<div className="project-category">Personal</div>
</a>
</div>
COPY

However, just by using React, you can create a component for this element and pass in the image, title, and category data through what we call props. Let’s see how this works.

In the src folder, create a new file called Thumbnail.js. In this file, create a component called Thumbnail and copy and paste the code above, but leave anything that is specific to each project blank.

import React from 'react'; // Import the Component component from React
import {Link} from 'react-router-dom'; // Import the Link component
import './App.css';
function Thumbnail(props) {
return (
<div className="project">
<Link to="">
<div className="project-image">
<img src="" alt="Project Image"/>
</div>
<div className="project-title">""</div>
<div className="project-category">""</div>
</Link>
</div>
);
}
export default Thumbnail;
COPY

Then, navigate to the Projects.js file, which is where we are going to build the project list page. You should have already created an empty Projects component within this file. Import the thumbnail component to this file as shown below:

import React from 'react';
import Thumbnail from './Thumbnail.js'; // Import the Thumbnail component
import './App.css';
function Projects(props) {
return (
// Render a Thumbnail component
<div>
<h1>Projects</h1>
<Thumbnail
link=""
image=""
title=""
category=""
/>
</div>
)
}
export default Projects;
COPY

Now you can add as many <Thumbnail> components as you wish, and fill in each with the corresponding data for each project. The data we pass in (e.g., title="Twitter Newsfeed") are the props.

<Thumbnail
link="/twitter"
image="http://twitter-image-url.jpg"
title="Twitter Newsfeed"
category="Mobile App"
/>
<Thumbnail
link="/airbnb"
image="http://airbnb-image-url.jpg>"
title="Airbnb Experiences"
category="Website"
/>
<Thumbnail
link="/photoshop"
image="http://photoshop-image-url.jpg"
title="Photoshop Redesign"
category="Desktop App"
/>
COPY

Finally, we need to tell the Thumbnail.js file where it should get the data. Let’s link each slot with its corresponding attributes, by filling them in with props.attribute-name.

import React from 'react';
import {Link} from 'react-router-dom';
import './App.css';
function Thumbnail(props) {
return (
<div className="project">
<Link to={props.link}>
<div className="project-image">
<img src={props.image} alt="Project Image"/>
</div>
<div className="project-title">{props.title}</div>
<div className="project-category">{props.category}</div>
</Link>
</div>
)
}
export default Thumbnail;
COPY

Once you have that set up, you will see that each thumbnail component will be updated to show the image, title, and category specific to its project.

You can see through this example that components make it easier to read and write code, as they eliminate the redundant elements. Also, you don’t need to worry about making global changes to each element, as all changes are applied simultaneously when the template is updated.

Create Project Pages

Now that you have the navigation bar and the project thumbnails, all that’s left are the project pages. Go ahead and create a separate component for each project, and fill in the content. Then set up a router like we did with the navigation, and update the links for each thumbnail. Remember that you can create sub-components here as well, to create consistent styles across your case studies and articles.

Note that by using React, you’re able to install and use components created by other developers, the same way that you can import components from the Framer X Store into your projects. So before you start building anything super tricky, try searching for it first—someone may already have built the feature.

Also consider using Framer Motion. Creating animations for the web is not always as easy as it looks, but this library will help you bring your concepts to life with its simple syntax and many features.

Framer Motion

A production-ready motion library for React.

Learn more

Deploy to Github Pages

When you’re finished building your website, you can deploy your app to Github Pages, which can host your website for free. If you have never used Github before, check out this handy guide for instructions on uploading your project to Github.

Once it’s up there, you can deploy the app by following this article. By default, your app will be published to https://username.github.io/name-of-your-repository, but you can also buy a custom domain and add that to your package.json file instead.

Though there is no set way to build a portfolio, using React gives you many advantages. It increases the efficiency of your workflow and makes it easy to apply consistent styles across elements. It also gives you access to thousands of components created by other developers, which means that you’ll be able to implement complex features even if you’re a beginner. Next time you’re updating your website, why not give it a try?

Want to learn more about React? Check out these resources:

Like this article? Spread the word.

Sign up for our newsletter

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.