DEV Community

Cover image for "Build Your First Portfolio with React: A Beginner's Ultimate Guide"
Abdul Fadiga
Abdul Fadiga

Posted on

"Build Your First Portfolio with React: A Beginner's Ultimate Guide"

#react #javascript #web #tutorial

description: "Don't just learn React, understand it. This detailed guide walks you through core concepts, professional project structure, and finally, helps you build and deploy your own portfolio website from scratch."

So, you want to learn React. You've seen it everywhere, but every time you start, you're hit with a wall of jargon and complex setups. Let's fix that.

This isn't just another tutorial. This is a roadmap. We're going to walk, step-by-step, from the absolute basics of what React is, to understanding how professionals structure their projects, and finally, you'll build your very own portfolio website.

Ready? Let's begin.

Module 1: The "Why" - Understanding React's Superpowers

Before we write a single line of code, you need to understand the "why." Why is React so popular?

React is a JavaScript library for building user interfaces. The most important concept is its Component-Based Architecture.

Imagine building a car. You don't build it from a single block of metal. You build a wheel, a door, a steering wheel, and an engine as separate parts, and then you assemble them.

React does the same for websites.

  • A navigation bar is a component.
  • A button is a component.
  • A user profile card is a component.

You build these small, independent, and reusable "LEGO bricks" and then compose them to create complex applications.

The Three Key Advantages:

  1. 🚀 Performance (The Virtual DOM): Normally, updating a webpage is slow. React creates a lightweight copy of the page in memory (the "Virtual DOM"). When data changes, React updates this copy, compares it to the real page, and only updates the tiny pieces that actually changed. This is incredibly efficient.
  2. ♻️ Reusability: You can build a <CoolStyledButton /> component once and use it 50 times. If you need to change its style, you only edit it in one place. This saves massive amounts of time and prevents bugs.
  3. ✍️ Declarative Code (with JSX): You tell React what you want the UI to look like based on its data. You don't have to manually write the step-by-step instructions to change the page. This is done using JSX, a syntax that lets us write HTML-like code directly in our JavaScript. It's clean and intuitive.

Module 2: Setup - Your Development Environment

Time to get our hands dirty.

✅ Prerequisites

You absolutely must have Node.js and npm installed.

  1. Go to nodejs.org and download the LTS version.

  2. Open your computer's terminal (or Command Prompt / PowerShell) and run these commands to verify the installation:

    node -v
npm -v

    If you see version numbers, you're good to go.

Create Your React App

  1. In your terminal, navigate to a folder where you store your code (e.g., cd Desktop).

  2. Run this single command to create your project. We'll call it react-portfolio.

    npx create-react-app react-portfolio

    What is npx? It's a package runner that comes with npm. It lets you run the create-react-app command without permanently installing it on your system.

  3. Once it's finished, navigate into the project and start it up:

    cd react-portfolio
npm start

Your web browser will open to http://localhost:3000 showing a spinning React logo. Congratulations! You have a running React application!

Module 3: Understanding the Structure (The Professional Way)

This is the most critical part of the tutorial. We're not just going to build something; we're going to build it right.

Open the react-portfolio folder in your code editor (VS Code is highly recommended).

The Problem: One Giant CSS File

A common beginner mistake is to put all the CSS for every component into one file (App.css). This quickly becomes a nightmare. You can't tell which styles belong to which component, and changing one style might accidentally break something else.

The Solution: Modular, Co-located Components

The professional approach is to keep a component's logic (.js) and its styles (.css) together in the same folder. This makes your project organized, scalable, and a joy to work on.

Here's the structure we will use:

src/
├── components/       <-- We create this folder!
│   ├── ComponentOne/
│   │   ├── ComponentOne.js
│   │   └── ComponentOne.css
│   └── ComponentTwo/
│       ├── ComponentTwo.js
│       └── ComponentTwo.css
├── App.js            <-- The main assembler
├── App.css           <-- For global layout styles ONLY
├── index.js
└── index.css         <-- For base styles like fonts and resets
Enter fullscreen mode Exit fullscreen mode

Let's put this into practice with a quick "warm-up" exercise.

Warm-Up: Building a UserProfileCard

  1. Create the structure: Inside the src folder, create a new folder named components. Inside components, create another folder named UserProfileCard.
  2. Create the files: Inside UserProfileCard, create two files: UserProfileCard.js and UserProfileCard.css.

  3. Write the component logic in UserProfileCard.js:

    // src/components/UserProfileCard/UserProfileCard.js
import React from 'react';
import './UserProfileCard.css'; // This is the magic line!

const UserProfileCard = () => {
  return (
    <div className="card">
      <img 
        className="card-avatar"
        src="https://via.placeholder.com/100" 
        alt="user avatar" 
      />
      <h2 className="card-title">Jane Doe</h2>
      <p className="card-bio">React Developer & Cat Enthusiast</p>
    </div>
  );
};

export default UserProfileCard;

    The line import './UserProfileCard.css'; tells React to bundle this specific CSS file only when this component is used. The styles are now co-located and scoped.

  4. Write the component styles in UserProfileCard.css:

    /* src/components/UserProfileCard/UserProfileCard.css */
.card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 20px;
  text-align: center;
  max-width: 250px;
  font-family: sans-serif;
}

.card-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid #2980b9;
}

.card-title {
  margin: 10px 0 5px;
  color: #34495e;
}

.card-bio {
  color: #7f8c8d;
  font-size: 0.9rem;
}

  5. Use the component in App.js:
    Now, go to src/App.js and replace its content to use your new component.

    // src/App.js
import UserProfileCard from './components/UserProfileCard/UserProfileCard';
import './App.css';

function App() {
  return (
    <div className="App">
      <UserProfileCard />
    </div>
  );
}

export default App;

    And for a nice background, update src/App.css:

    .App {
  background-color: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Check your browser. You should see your beautifully styled user card. You've now fully understood the professional component structure!

Module 4: Your Final Project - Build and Deploy a Portfolio

It's time to put it all together. You will build a clean, one-page portfolio website using the exact structure we just learned.

📋 The Mission

Your portfolio will have four distinct components:

  1. Navbar: A clean header with your name.
  2. Hero: A big, impressive section to introduce yourself.
  3. Projects: A section to showcase three of your projects.
  4. Contact: A footer with ways to get in touch.

🚀 Let's Build!

Step 1: Prepare the Project

  • In your src/components folder, delete the UserProfileCard folder from our warm-up.
  • Create four new folders inside src/components: Navbar, Hero, Projects, and Contact.
  • Inside each of these folders, create the corresponding .js and .css files (e.g., Navbar.js and Navbar.css).

Step 2: Build Each Component

Here is the starter code. Your challenge is to customize it! Find a new profile picture, change the colors, rewrite the text, and make it yours.

  • Navbar/Navbar.js & Navbar.css

    // Navbar.js
import React from 'react';
import './Navbar.css';

const Navbar = () => {
  return (
    <nav className="navbar">
      <span className="navbar-name">Your Name</span>
    </nav>
  );
};
export default Navbar;

```css
/* Navbar.css */
.navbar {
  background: #2c3e50;
  color: white;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  font-weight: bold;
}
```
Enter fullscreen mode Exit fullscreen mode

  • Hero/Hero.js & Hero.css

    // Hero.js
import React from 'react';
import './Hero.css';

const Hero = () => {
  return (
    <section className="hero">
      <img src="https://via.placeholder.com/150" alt="Your Name" className="hero-image" />
      <h1 className="hero-title">Aspiring Web Developer</h1>
      <p className="hero-subtitle">I build beautiful and functional things for the web.</p>
    </section>
  );
};
export default Hero;

```css
/* Hero.css */
.hero {
  background: #3498db;
  color: white;
  text-align: center;
  padding: 4rem 2rem;
}
.hero-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 5px solid white;
}
.hero-title {
  font-size: 2.5rem;
  margin: 1rem 0 0.5rem;
}
.hero-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
}
```
Enter fullscreen mode Exit fullscreen mode

  • Projects/Projects.js & Projects.css

    // Projects.js
import React from 'react';
import './Projects.css';

const Projects = () => {
  return (
    <section className="projects">
      <h2 className="projects-title">My Work</h2>
      <div className="project-grid">
        <div className="project-card"><h3>Project 1</h3><p>A short description of this amazing project.</p></div>
        <div className="project-card"><h3>Project 2</h3><p>A short description of this amazing project.</p></div>
        <div className="project-card"><h3>Project 3</h3><p>A short description of this amazing project.</p></div>
      </div>
    </section>
  );
};
export default Projects;

```css
/* Projects.css */
.projects { padding: 2rem; background: #f4f4f4; }
.projects-title { text-align: center; margin-bottom: 2rem; color: #333; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.project-card { background: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
```
Enter fullscreen mode Exit fullscreen mode

  • Contact/Contact.js & Contact.css

    // Contact.js
import React from 'react';
import './Contact.css';

const Contact = () => {
  return (
    <footer className="contact">
      <h2>Get In Touch</h2>
      <p>Email: <a href="mailto:your.email@example.com">your.email@example.com</a></p>
    </footer>
  );
};
export default Contact;

```css
/* Contact.css */
.contact { background: #2c3e50; color: white; text-align: center; padding: 2rem; }
.contact a { color: #3498db; text-decoration: none; }
```
Enter fullscreen mode Exit fullscreen mode

Step 3: The Final Assembly in App.js

This is the moment of truth. Go to src/App.js and assemble your masterpiece.

// src/App.js
import Navbar from './components/Navbar/Navbar';
import Hero from './components/Hero/Hero';
import Projects from './components/Projects/Projects';
import Contact from './components/Contact/Contact';

// Clear out App.css, we don't need it for this layout
// Also, you can clean up index.css to just have a simple body margin: 0;

function App() {
  return (
    <div>
      <Navbar />
      <Hero />
      <Projects />
      <Contact />
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Final Touch: Go into src/index.css and make sure it has this, and only this, for a clean look:

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

You Did It! 🥳

Check your browser. You have built a beautiful, well-structured, multi-component portfolio from scratch.

I hope this guide has given you the confidence and the foundational knowledge to continue your React journey. Building real projects is the best way to learn.

Now, show off your work! Share a link to your deployed portfolio in the comments below! Happy coding!

Top comments (0)