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.
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.
Check out the live demo
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
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.
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
Implementing client-side routing using React Router to create a multi-page website template with separate Home, About, and Contact pages.
Overcame the challenge by taking the following actions:
Successfully achieved the following results:
For questions or feedback, feel free to contact me:
This project is licensed under the MIT License. See the LICENSE file for details.