Multi-Page Website Template with React Router

A basic template for a multi-page website using React.js and the React Router module. The website features three main pages: Home, About, and Contact. Implemented React Router to facilitate navigation between pages and ensure a seamless user experience. Despite the simplicity of the design, the template provides a solid foundation for building more complex websites.

Table of Contents

• Introduction
• Demo
• Requirements
• Installation
• Usage
• Features
• Technologies Used
• Project Structure
• Challenges and Learnings
• Future Improvements
• Contact
• License

Introduction

This project is a basic template for a multi-page website built with React.js and React Router. It includes separate pages for Home, About, and Contact sections, demonstrating a fundamental implementation of client-side routing and navigation. The main goal was to create a simple, yet effective template that can be expanded into a more complex website in the future.

Demo

Live Demo

Check out the live demo

Requirements

• Node.js
• npm (Node Package Manager)

Installation

Follow these steps to install and run the project locally:

# Clone the repository
git clone https://github.com/Nada-TB/mutlti-pages-react-website.git

# Navigate to the project directory
cd mutlti-pages-react-website

# Install dependencies
npm install

Usage

To start the project, run the following command:

# Run the project
npm start

This command will start the development server and you can view the project by navigating to http://localhost:3000 in your web browser. You will see the Home page with links to navigate to the About and Contact pages.

Features

• Multi-Page Structure: Developed a structured multi-page layout with separate pages for Home, About, and Contact sections.
• React Router Integration: Implemented React Router to enable client-side routing and navigation between pages without the need for page refreshes.
• Documentation Utilization: Overcame the challenge of implementing React Router by researching and leveraging documentation resources effectively.
• Lorem Ipsum Content: Populated the pages with placeholder text (Lorem Ipsum) to simulate content and demonstrate page layout.

Technologies Used

• React.js
• React Router
• HTML
• CSS (Basic styling)

Project Structure

The project directory is organized as follows:

multi-page-react-template/
├── public/               # Static files
│   ├── index.html        # Main HTML file
│   └── favicon.ico       # Favicon
├── src/                  # Source files
│   ├── components/       # pages components (Home, About, Contact)
│   ├── App.js            # Main App component
│   ├── index.js          # Entry point
│   └── styles.css        # CSS styles
├── .gitignore            # Git ignore file

├─  package-lock.json     # Dependency Consistency
├── package.json          # Project dependencies and scripts
├── README.md             # Project documentation

Challenges and Learnings

Challenge

Implementing client-side routing using React Router to create a multi-page website template with separate Home, About, and Contact pages.

Action

Overcame the challenge by taking the following actions:

• Research and Documentation Utilization: Invested time in searching and reading documentation resources for React Router to understand its usage and implementation.
• React Router Integration: Implemented React Router in the project, setting up routes for each page and configuring navigation links to ensure seamless page transitions.
• Page Layout and Content Population: Designed basic page layouts for Home, About, and Contact sections, and populated them with placeholder text (Lorem Ipsum) to simulate content.

Result

Successfully achieved the following results:

• Developed a functional multi-page website template using React.js and React Router, enabling smooth navigation between pages without page refreshes.
• Overcame the challenge of implementing client-side routing by independently researching and utilizing documentation resources effectively.
• Provided a simple yet effective website layout with placeholder content, laying the groundwork for future website development and customization.

Future Improvements

• Improve UI/UX design.
• Add more test coverage.
• Implement additional features like notifications.

Contact

For questions or feedback, feel free to contact me:

• GitHub: Nada-TB

License

This project is licensed under the MIT License. See the LICENSE file for details.