React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website (2022)
Table of Contents
Introduction
In this tutorial, you'll learn how to build and deploy a fully responsive React portfolio website from scratch. This guide will walk you through each step, including setting up your development environment, creating components, styling with CSS, and deploying your site. No prior knowledge of React is required, making it perfect for beginners looking to enhance their web development skills.
Step 1: Set Up Your Development Environment
-
Buy Hosting and Claim a Free Domain
- Visit Hostinger and choose a hosting plan that suits your needs.
- Follow the prompts to claim a free domain name during the purchase process.
-
Install Node.js and Visual Studio Code
- Download and install Node.js from the official website.
- Install Visual Studio Code (VSCode) as your code editor.
Step 2: Create Your React App
- Open your terminal or command prompt.
- Run the following command to create a new React application:
npx create-react-app my-portfolio
- Navigate into your project folder:
cd my-portfolio
Step 3: Organize Your Project Files
- Create the following folder structure inside the
src
directory:components/
assets/
styles/
- This organization helps keep your project manageable and structured.
Step 4: Build Your Components
- Create Each Component
- Create separate files for each component in the
components
folder:- Header.js
- FloatingNav.js
- About.js
- Experience.js
- Services.js
- Portfolio.js
- Testimonials.js
- Contact.js
- Footer.js
- Create separate files for each component in the
Step 5: Style Your Website with CSS
-
Use CSS Variables and General Styles
- Define CSS variables in a separate
styles.css
file for colors, fonts, and layout.
- Define CSS variables in a separate
-
Component-Specific CSS
- For each component, create corresponding CSS files (e.g.,
Header.css
,About.css
) and apply styles.
- For each component, create corresponding CSS files (e.g.,
Step 6: Add Functionality with React Hooks
- Manage State with useState Hook
- Import the
useState
hook in components where you need to manage state, for example, in the FloatingNav component to track navigation state.
- Import the
Step 7: Use React Icons
- Install React Icons
- Install the React Icons library:
npm install react-icons
- Import and use icons in your components as needed.
- Install the React Icons library:
Step 8: Implement SwiperJS for Carousels
- Install SwiperJS
- Install SwiperJS for creating responsive slides:
npm install swiper
- Set up the Swiper component in your Portfolio and Testimonials sections.
- Install SwiperJS for creating responsive slides:
Step 9: Set Up the Contact Component
- Add Multiple Contact Options
- Integrate contact methods such as WhatsApp, Facebook Messenger, and Email using the EmailJS service:
npm install emailjs-com
- Integrate contact methods such as WhatsApp, Facebook Messenger, and Email using the EmailJS service:
Step 10: Build the Footer
- Create the Footer Component
- Add relevant information and links to your footer.
Step 11: Deploy Your Website
- Deploy to Hosting
- Build your React app for production:
npm run build
- Follow your hosting provider's instructions to upload the build folder contents to your server.
- Build your React app for production:
Conclusion
You've successfully built and deployed a React portfolio website! This project has equipped you with essential skills in React development, including component creation, state management, and styling. Consider customizing your website further or adding additional features to enhance your portfolio. Happy coding!