Documentation

Reactjs Template

UiCamp Reactjs Template is a creative & modern template, A perfect place for your creative portfolio. Multiple demoes are included in this template with lots of CSS and React animations, Responsive based on Bootstrap 5.

Author: UiCamp

Last Update: 07 Jan, 2024

If you have any questions that are beyond the scope of this help file, Please feel free to contact us via UiCamp.

Features

Build on React.js 18
Based on Bootstrap 5
Based On SCSS
Creative layouts
100% Responsive
Easy to Customize
Minimal and Clean
Fonts Awesome Icons
Well Documentation
Free Updates
All files are well commented
Displays well in all modern browsers

Files Include

[template_name]_reactjs

Folder contains main template code & all jsx, json, scss, css, images, fonts, js files

[template_name]_reactjs_docs

Documentation folder of "template_reactjs" written in html css

Installation

Follow the steps below to setup your template:

Download the latest theme source code from the Marketplace.
Download and install Node.js and npm from Nodejs. The suggested version to install is LTS.

Open terminal in [template_name]_reactjs template folder.

                  > cd /[template_name]reactjs/

Install npm packages. You must have to install packages of your project to install all the necessary dependencies, You can do this by running the following command.
```
                  > npm install
                
```

Run Development Server

Start your app development server to change, update and customize your app.

Run npm start in the terminal from the root of your project to start a dev server

              > npm start

Navigate to http://localhost:3000 to see your app, the app will automatically reload if you change any of the source files.

Build For Production

Build the app for production and make it ready for deployment, react-scripts build generates an optimized version of your application for production

Run npm run build to build the project for production.

              > npm run build

The build artifacts will be stored in the /build/ directory.

Deployment

You can deploy your project to any static hosting or a hosting provider that supports Node.js
We suggest some hosting you can consider to use:

Folder Structure

Template comes with a flexible file structure that can be easily used for small to large scope projects. This section will explain the entire file structure and how to adapt it to your project.

Root Folder

[root_folder] folder contains the whole project folders & files

Root Folder Content:

File/Folder	Description
`public`	React.js public folder that can serve static files which files inside it can then be referenced by your code starting from the base URL `"/"`, like images, fonts and vendors.
`src`	The source folder that contains all template source files like Pages, Components, Data, SCSS, Javascript and media files. Required only for development and can be excluded for production.
`node_modules`	A directory created by npm and a way of tracking each packages you install locally via package.json
`build`	A directory created by react.js during build time to be the destination folder that contains the compiled html and assets.
`package.json`	Includes the list of dependencies to install from npm

Public Folder

[root_folder]/public/ Public Folder that contains all assets of project and index.html that have body of the website .

when you add file like photo in Public Folder you can use it in your project by getting with his src enter Public Folder /[it's route in Public Folder]

Src Folder

[root_folder]/src/ source folder that contains all template source files.

app.css and index folders do not contains the main project styles, them contains overrides styles for some 3rd party packages and athers files for testing and advaced topics for developers.

pages Folder

[root_folder]/src/pages folder contains template pages.

Folders content:

home.js
about.js
contact.js
blogs.js
...

Index File

[root_folder]/src/index.js is a main file that render app in jsx .

              // ./src/index.js
                import React from 'react';
                import ReactDOM from 'react-dom/client';
                import './index.css';
                import App from './App';
                
                const root = ReactDOM.createRoot(document.getElementById('root'));
                root.render(
                  <>
                    <App />
                  </>
                );

app File

[root_folder]/src/app.js file contains all routes of pages.

app.js file is a main react component which have all routes, layouts and providers that exist in project all routes created by using React-Router-DOM
Learn more about React-Router-DOM

              // ./src/app.js
                import './App.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Landing from './pages/Landing';
import About from './pages/about';
import Blogs from './pages/blogs';
import Contact from './pages/contact';
import Homess from './pages/home';
import Home2 from './pages/home2';
import Home3 from './pages/home3';
import Home4 from './pages/home4';
import Portfolio from './pages/portfolio';
import Services from './pages/services';
import SingleBlog from './pages/single-blog';
import SingleProject from './pages/single-project';
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Landing />} />
        <Route path="/about" element={<About />} />
        <Route path="/blogs" element={<Blogs />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/home" element={<Homess />} />
        <Route path="/home2" element={<Home2 />} />
        <Route path="/home3" element={<Home3 />} />
        <Route path="/home4" element={<Home4 />} />
        <Route path="/portfolio" element={<Portfolio />} />
        <Route path="/services" element={<Services />} />
        <Route path="/single-blog" element={<SingleBlog />} />
        <Route path="/single-project" element={<SingleProject />} />
      </Routes>
    </Router>
  );
}

export default App;

Components Folder

[root_folder]/src/components folder contains template components that imported and used in pages.

Components folders are grouped together according to the pages with same style or specific page components.
e.g. home Folder contains all the components of home page

/home
Header.jsx //= home Page Header Component
Services.jsx //= home Page Services Component
...
/About
Header.jsx //= About Page Header Component
...
...

Data Folder

[root_folder]/src/data folder contains static app data in json format.

Each folder contains static data for page components stored in JSON format.

blog.json //= Blog Data
portfolio.json //= Portfolio Data
...

Each file contains JSON data that imported and rendered on it's component.

Common Folder

[root_folder]/src/common folder contains common helper functions.

Each file is JavaScript function that is commonly used in project components.

Code Structure

Main template components code structure

Page

[root_folder]/src/pages/[page_name].js React component that contains a page code.



// ./src/pages/[page_name].js
  import LoadingScreen from '../components/common/loader';
  import Cursor from '../components/common/cusor';
  import ProgressScroll from '../components/common/ProgressScroll';
  import NavTop from '../components/home/NavTop';
  import Hero from '../components/home/Hero';
  import Footer from '../components/home/Footer';
  import { Helmet } from 'react-helmet';
  
  export default function Homess() {
    return (
      <div>
        <Helmet>
          <title>Gilb</title>
          <link rel="icon" href="/assets/imgs/favicon.ico" />
          <link rel="shortcut icon" href="/assets/imgs/favicon.ico" />
          <link rel="stylesheet" type="text/css" href="/assets/css/plugins.css" />
          <link rel="stylesheet" type="text/css" href="/assets/scss/style.css" />
          <link rel="stylesheet" type="text/css" href="/assets/css/style.css" />
        </Helmet>
        <LoadingScreen />
        <Cursor />
        <ProgressScroll />
  
        <NavTop />
        <main className="pt-80">
          <Hero />
        </main>
        <Footer />
  
        <script
          src="/assets/js/jquery-3.6.0.min.js"
          strategy="beforeInteractive"
        />
        <script
          src="/assets/js/jquery-migrate-3.4.0.min.js"
          strategy="beforeInteractive"
        />
  
        <script src="/assets/js/plugins.js" strategy="beforeInteractive" />
        <script src="/assets/js/scripts.js" strategy="beforeInteractive" />
        <script src="/assets/js/parallax.min.js" strategy="beforeInteractive" />
        </div>
    );
  }

Component

[root_folder]/src/components/[component_folder]/[Component].jsx React component contains part of a page code.

// ./src/components/CreativeAgency/Services.jsx
import React from 'react';
//= Static Data
import data from '@/data/CreativeAgency/services.json';

function Services() {
  return (
    <section className="services-box">
      <div className="container">
        <div className="row">
          {data.map(item => (
            <div className="col-lg-3 col-md-6 item" key={item.id}>
              <span className="icon-img-60 mb-40">
                <img src={item.icon} alt="" />
              </span>
              <h5 className="fz-22">{item.title}</h5>
              <p>{item.description}</p>
              <a href={item.link} className="link-more animsition-link mt-50">
                <span className="text">Read More</span>
                <span className="arrow">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.922 4.5V11.8125C13.922 11.9244 13.8776 12.0317 13.7985 12.1108C13.7193 12.1899 13.612 12.2344 13.5002 12.2344C13.3883 12.2344 13.281 12.1899 13.2018 12.1108C13.1227 12.0317 13.0783 11.9244 13.0783 11.8125V5.51953L4.79547 13.7953C4.71715 13.8736 4.61092 13.9176 4.50015 13.9176C4.38939 13.9176 4.28316 13.8736 4.20484 13.7953C4.12652 13.717 4.08252 13.6108 4.08252 13.5C4.08252 13.3892 4.12652 13.283 4.20484 13.2047L12.4806 4.92188H6.18765C6.07577 4.92188 5.96846 4.87743 5.88934 4.79831C5.81023 4.71919 5.76578 4.61189 5.76578 4.5C5.76578 4.38811 5.81023 4.28081 5.88934 4.20169C5.96846 4.12257 6.07577 4.07813 6.18765 4.07812H13.5002C13.612 4.07813 13.7193 4.12257 13.7985 4.20169C13.8776 4.28081 13.922 4.38811 13.922 4.5Z"
                      fill="currentColor"></path>
                  </svg>
                </span>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

export default Services

Data

[root_folder]/src/data/[data_folder]/[data_file].json JSON file stores component data.

// src/data/CreativeAgency/services.json
[
  {
    "id": 1,
    "icon": "/assets/imgs/serv-icons/0.png",
    "title": "Digital Marketing",
    "description": "Brand identity design is the key to success whether you breathe rebranding.",
    "link": "/about"
  },
  {
    "id": 2,
    "icon": "/assets/imgs/serv-icons/1.png",
    "title": "Brand Strategy",
    "description": "Brand identity design is the key to success whether you breathe rebranding.",
    "link": "/about"
  },
  {
    "id": 3,
    "icon": "/assets/imgs/serv-icons/2.png",
    "title": "SEO Optimization",
    "description": "Brand identity design is the key to success whether you breathe rebranding.",
    "link": "/about"
  },
  {
    "id": 4,
    "icon": "/assets/imgs/serv-icons/0.png",
    "title": "Content Creation",
    "description": "Brand identity design is the key to success whether you breathe rebranding.",
    "link": "/about"
  }
]

Source & Credits

Images:

Pexels - https://pexels.com
Unsplash - https://unsplash.com

Images are only for demo purpose and not included with the download bundle.

Fonts:

Google Fonts - https://fonts.google.com

Scripts:

React.js - https://reactjs.org
React-Router-DOM - https://reactrouter.com/en/main
React Helmet - https://www.javatpoint.com/react-helmet
Bootstrap 5 - http://getbootstrap.com
Swiper Carousel - https://swiperjs.com
React Sticky - https://react-sticky-box.codecks.io/
React Scroll - https://www.npmjs.com/package/react-scroll
GSAP Animations - https://greensock.com/gsap

Thank you for purchased UiCamp template

We truly appreciate and really hope that you'll enjoy our template!,
If you like our template, plase rate us 5 star !