Creating a Portfolio Website Using React JS | Step-by-Step Tutorial for Building a Complete React JS Website Project in 2024

In this tutorial, we will be creating a portfolio website in React JS. React JS is a popular JavaScript library for building user interfaces, and it is widely used for creating single-page applications. By the end of this tutorial, you will have a fully functional portfolio website that you can use to showcase your projects and skills to potential employers or clients.

To begin, make sure that you have Node.js and npm installed on your computer. If you don’t have them installed, you can download them from the Node.js website. Once you have Node.js and npm installed, you can create a new React project by running the following command in your terminal:

npx create-react-app portfolio-website

This command will create a new React project called portfolio-website in the current directory. Once the project has been created, navigate to the project directory by running:

cd portfolio-website

Next, we will create the components that we will use to build our portfolio website. In the src folder, create a new folder called components. Inside the components folder, create a new file called Header.js and add the following code:

import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>My Portfolio</h1>
    </header>
  );
};

export default Header;

Next, create a new file called Project.js inside the components folder and add the following code:

import React from 'react';

const Project = ({ title, description, imageUrl }) => {
  return (
    <div className="project">
      <h3>{title}</h3>
      <img src={imageUrl} alt={title} />
      <p>{description}</p>
    </div>
  );
};

export default Project;

Now, we will update the App component to include the Header and Project components. Open the App.js file and update it as follows:

import React from 'react';
import Header from './components/Header';
import Project from './components/Project';

function App() {
  return (
    <div className="App">
      <Header />
      <Project 
        title="Project 1"
        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        imageUrl="https://via.placeholder.com/150"
      />
      <Project 
        title="Project 2"
        description="Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        imageUrl="https://via.placeholder.com/150"
      />
    </div>
  );
}

export default App;

Now we will add some styling to the project. In the src folder, create a new folder called styles. Inside the styles folder, create a new file called App.css and add the following code:

.App {
  text-align: center;
}

header {
  background-color: #333;
  color: white;
  padding: 10px;
}

.project {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ddd;
}

.project img {
  max-width: 100%;
}

Next, update the index.js file to include the App.css file. Open the index.js file and update it as follows:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Finally, start the development server by running the following command in the terminal:

npm start

Now you should see your portfolio website in the browser. You can customize the website further by adding more projects, updating the styling, and adding additional pages. This tutorial just scratches the surface of what you can achieve with React JS, so feel free to experiment and explore more features of React to build a truly unique portfolio website.