membuat web portofolio sederhana dengan ReactJS menggunakan Create React App (CRA) + contoh kode lengkap.

1️⃣ Instal Create React App

Pastikan Node.js sudah terinstal.
Cek versi:

node -v
npm -v

Buat project React:

npx create-react-app portfolio-react
cd portfolio-react
npm start

Akan muncul di http://localhost:3000.

2️⃣ Struktur Proyek (sederhana)

portfolio-react/
├─ src/
│  ├─ components/
│  │  ├─ Navbar.js
│  │  ├─ Hero.js
│  │  ├─ About.js
│  │  ├─ Projects.js
│  │  └─ Footer.js
│  ├─ App.js
│  ├─ index.js
│  └─ App.css

3️⃣ Contoh Kode

➤ src/App.js

import React from "react";
import Navbar from "./components/Navbar";
import Hero from "./components/Hero";
import About from "./components/About";
import Projects from "./components/Projects";
import Footer from "./components/Footer";
import "./App.css";

function App() {
  return (
    <>
      <Navbar />
      <Hero />
      <About />
      <Projects />
      <Footer />
    </>
  );
}

export default App;

➤ src/components/Navbar.js

export default function Navbar() {
  return (
    <nav className="navbar">
      <h2 className="logo">MyPortfolio</h2>
      <ul>
        <li><a href="#hero">Home</a></li>
        <li><a href="#about">Tentang</a></li>
        <li><a href="#projects">Project</a></li>
      </ul>
    </nav>
  );
}

➤ src/components/Hero.js

export default function Hero() {
  return (
    <section id="hero" className="hero">
      <h1>Hallo! 👋 Saya <span>Nama Anda</span></h1>
      <p>Frontend Developer | React | UI/UX</p>
      <a href="#projects" className="btn">Lihat Karya</a>
    </section>
  );
}

➤ src/components/About.js

export default function About() {
  return (
    <section id="about" className="about">
      <h2>About Me</h2>
      <p>
        Saya seorang pengembang web yang fokus pada frontend development.
        Saya suka membangun aplikasi web sederhana, cepat, dan user-friendly.
      </p>
    </section>
  );
}

➤ src/components/Projects.js

const projects = [
  { title: "Landing Page", link: "https://contoh.com" },
  { title: "Portfolio", link: "https://github.com" },
  { title: "Todo App React", link: "https://github.com" },
];

export default function Projects() {
  return (
    <section id="projects" className="projects">
      <h2>Projects</h2>
      <div className="project-grid">
        {projects.map((p, i) => (
          <div key={i} className="project-card">
            <h3>{p.title}</h3>
            <a href={p.link} target="_blank" rel="noreferrer">
              Kunjungi
            </a>
          </div>
        ))}
      </div>
    </section>
  );
}

➤ src/components/Footer.js

export default function Footer() {
  return (
    <footer className="footer">
      <p>© 2025 Your Name. All rights reserved.</p>
    </footer>
  );
}

4️⃣ Styling dasar — src/App.css

Anda bisa modifikasi sendiri agar lebih tampilan profesional.

body {
  margin: 0;
  font-family: Arial, sans-serif;
  scroll-behavior: smooth;
}

.navbar {
  display: flex;
  justify-content: space-between;
  padding: 15px 40px;
  background: #222;
  color: #fff;
}

.navbar ul {
  display: flex;
  gap: 1rem;
  list-style: none;
}

.navbar ul li a {
  color: white;
  text-decoration: none;
}

.hero {
  padding: 100px 40px;
  text-align: center;
  background: #f6f6f6;
}

.hero h1 span {
  color: dodgerblue;
}

.btn {
  padding: 10px 16px;
  background: dodgerblue;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}

.about, .projects {
  padding: 60px 40px;
}

.project-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.project-card {
  padding: 20px;
  background: #e9e9e9;
  border-radius: 8px;
}

.footer {
  text-align: center;
  padding: 20px;
  background: #222;
  color: #fff;
}