Get 45% OFF on any of our products, Limited Time Offer. Ending Soon!

See More
Log In

TourX – Tours And Travel Agency React Template

Table of Contents

Introduction #

First of all, Thank you so much for purchasing this template and for being my loyal customer. You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn the basics here, here, and here.

  • Item Name : TourX – Tours And Travel Agency React Template
  • Item Version : V 1.0.0
  • Author : Egens Lab
  • License : Un License

TourX is a distinct, novel, and contemporary React travel website template powered by the latest version of the React framework. It will serve your travel agency or other tourism projects very well. This stunning web template will be a perfect solution to make a strong and lasting first impression on your potential customers. It includes many catchy elements that will trigger everyone’s interest in the snap of a finger.

Getting Started #

1. Install the recommended version of Node.js

2. Use command line (PowerShell or terminal) to navigate to project root directory

3. Run the following commands, one after another:

npm install
npm start

4. In your browser navigate to http://localhost:3000

5. That’s all! Now you should see your site.

Project Structure #

TourX – Tours And Travel Agency is a component-based application. Pages, widgets and elements are in separate files. Third-party plugins added as dependencies in Package.json

Pages:

Home (src/components/pages/home/HomePage.js)
Home2 (src/components/pages/home2/HomePage.js)
About (src/components/pages/about-us/AboutUs.js)
Destinations (src/components/pages/destinations/Destinations.js)
Package (src/components/pages/package/Packages.js)
Blog (src/components/pages/blog/BlogComponent.js)
Gallery (src/components/pages/gallery/GalleryComponent.js)
Guide (src/components/pages/guide/GuideComponent.js)
Faq (src/components/pages/faq/Faq.js)
404 (src/components/pages/404/404.js)
Contacts (src/components/pages/contact/Contacts.js)

Components

Layouts:

src/components/layouts

UI components:

src/components/ui

Elements:

src/components/elements

Common:

src/components/common

SCSS Styles

Global styles and variables you can find here:

src/index.scss

CSS Styles

Global styles:

src/index.css

All assets directory

src/assets

All Utilities

src/utilities

Color Themes #

f you would like to edit the color, font, or style of any elements in one of these columns, you would do the following :

.text-contain h3 { color: #some_color; }

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.

I.E.

.service-area .text-contain h3 { color: #some_color; }

So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.

Contact Form #

This project uses the service EmailJS to work with contact forms. It has very simple and intuitive setup. All you need to do is create your own account and connect email with the service. And then just put your own identification data in template code:

emailjs.send(
"Service ID",
"Template ID",
templateParams,
"User ID"
)

Deployment #

The easiest way to deploy a React-based project in your server, but you can use whichever hosting you like (some steps or settings might be different, however). Here are the steps to deploy the project in hosting:

Run "npm run build" command in your terminal.
Done. Now make your deployment build file as zip and upload in your server.

Dependencies #

The following list of dependencies will be installed automatically after you run the npm install command:

"dependencies": {
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"jquery": "^3.6.0",
"react": "^17.0.2",
"react-datepicker": "^4.2.0",
"react-dom": "^17.0.2",
"react-jqueryui-datepicker": "^1.0.3",
"react-modal-video": "^1.2.8",
"react-owl-carousel": "^2.3.3",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-slick": "^0.28.1",
"simple-react-lightbox": "^3.6.6",
"web-vitals": "^1.1.2"
},

Sources and Credits #

I’ve used the following images, icons or other files as listed :

1. Images #

2. CSS Files #

4. Fonts #

Template Customization #

How to Customize this Template : #

Go to This Link Click Me

Once again, thank you so much for purchasing this theme. As I said at the beginning, I’d be glad to help you if you have any questions relating to this theme. No guarantees, but I’ll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the “Item Discussion” section.

Purchase Now

Login to your account