Step-by-Step Guide: Building a Mobile-Friendly Portfolio Website with ReactJs | Perfect for React Beginners | Deployment Tips Included

React is a popular JavaScript library for building user interfaces, and it’s commonly used in web development projects. In this tutorial, we’ll walk you through the process of creating a responsive portfolio website using ReactJS. This project is perfect for beginners who are looking to improve their React skills and learn how to deploy a website.

Before we get started, make sure you have Node.js and npm installed on your computer. If you don’t have them installed already, you can download them from the Node.js website.

Step 1: Set up a new React project

To create a new React project, open your terminal and run the following command:

npx create-react-app portfolio-website

This command will create a new folder called portfolio-website with all the necessary files and dependencies for a React project. Once the command has finished running, navigate to the project folder by running:

cd portfolio-website

Step 2: Install additional dependencies

Next, we need to install a few additional dependencies for our project. Run the following commands in your terminal:

npm install react-router-dom
npm install react-bootstrap bootstrap

The react-router-dom package will help us create a multi-page website, while the react-bootstrap and bootstrap packages will give us access to pre-made styling components.

Step 3: Create the project structure

Now that we have all the necessary dependencies installed, let’s create the basic project structure. Inside the src folder of your project, create the following folders:

• components: This folder will contain all the React components for our website.
• pages: This folder will contain the individual pages of our website.
• assets: This folder will contain any images or other static assets used in the project.

Step 4: Build the layout components

In the components folder, create a new file called Header.js. This file will contain the header component for our website, which will include a navigation menu.

import React from 'react';
import { Link } from 'react-router-dom';

const Header = () => {
  return (
    <header>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/portfolio">Portfolio</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;

Next, create a file called Footer.js in the components folder. This file will contain the footer component for our website.

import React from 'react';

const Footer = () => {
  return <footer>&copy; 2022 Portfolio Website</footer>;
};

export default Footer;

Step 5: Create the pages

Inside the pages folder, create the following files: Home.js, About.js, Portfolio.js, and Contact.js. These files will represent the individual pages of our website.

Home.js:

import React from 'react';

const Home = () => {
  return <div>Welcome to my portfolio website!</div>;
};

export default Home;

About.js, Portfolio.js, and Contact.js:

import React from 'react';

const About = () => {
  return <div>About Me</div>;
};

export default About;

import React from 'react';

const Portfolio = () => {
  return <div>Portfolio</div>;
};

export default Portfolio;

import React from 'react';

const Contact = () => {
  return <div>Contact Me</div>;
};

export default Contact;

Step 6: Set up the routing

In the App.js file, import the necessary components and set up the routing for the website.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './pages/Home';
import About from './pages/About';
import Portfolio from './pages/Portfolio';
import Contact from './pages/Contact';

function App() {
  return (
    <Router>
      <Header />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/portfolio" component={Portfolio} />
        <Route path="/contact" component={Contact} />
      </Switch>
      <Footer />
    </Router>
  );
}

export default App;

Step 7: Add styling

In the index.css file, add the following styling to make the website responsive.

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

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

nav ul {
  list-style: none;
  display: flex;
}

nav ul li {
  margin-right: 20px;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 10px 0;
  text-align: center;
}

Step 8: Run the project

To test the project locally, run the following command in your terminal:

npm start

This will start a local development server, and you should be able to view your website by navigating to http://localhost:3000 in your web browser.

Step 9: Deploy the website

Once you’re happy with how the website looks and functions, you can deploy it to a hosting service like Netlify or Vercel. To do this, follow these steps:

1. Create an account on the hosting service of your choice.
2. Install the necessary command-line tools for deploying React projects (e.g., the Netlify CLI or Vercel CLI).
3. Build the project by running the following command in your terminal:

npm run build

1. Deploy the project by running the appropriate command for the hosting service you’re using (e.g., netlify deploy or vercel deploy).

Congratulations! You’ve successfully created a responsive portfolio website using ReactJS. This project is a great way to showcase your skills and projects to potential employers or clients. Have fun customizing the website to make it your own, and keep learning and practicing with ReactJS projects. Good luck!