Steps to be followed for getting started with the template:
There are followings basics packages you should install before going further.
Here is the steps of production:
Here is the general structure of the template:
xray-react
| - public
- favicon.ico
- index.html
| - src
| - assets
| - css
| - fonts
| - fullcalendar
| - images
| - scss
| - components
| - partials
| - layouts
- default-layout.js
| - router
| - store
| - utilities
| - views
- App.js
- index.js
- .gitignore
- .env.development.local
- .env.production.local
- package.json
- README.md
- tsconfig.json
Set favicon for replace favicon.ico and restart server
Use the header style which is in components -> partials -> HeaderStyle -> header.js. Replace "logo.png" with your own logo image URL.
Here is the layout and routing configure
| - layouts
- default-layout.js
| - router
- app-router.js
- auth-router.js
- error-router.js
- index-router.js
Router url configure
//import components
import DefaultLayout from "../layouts/default-layout"
import Index from '../views/index'
// Set Layout in this route
const IndexRouters = [
{
path: '',
element: <DefaultLayout />,
children: [
{
path: '/',
element: <Index />,
}
]
}
]
We have build different types of custom card components. And these are the some prop and slots
import React from 'react'
const Card = (props) => <div className={`card ${props.className ? props.className : ''}`}> {props.children} </div>
Card.Header = (props) => <div className={`card-header d-flex justify-content-between ${props.className ? props.className : `}> {props.children} </div>
Card.Body = (props) => <div className={`card-body ${props.className ? props.className :''}`}> {props.children} </div>
Card.Footer = (props) => <div className="card-footer"> {props.children} </div>
Card.Header.Title = (props) => <div className={`header-title ${props.className ? props.className : ''}`}> {props.children} </div>
Card.Header.Action = (props) => <div className={`header-action ${props.className ? props.className : ''}`}> {props.children} </div>
export default Card;
Bootstrap has wonderfull documentation on the following components::
React Bootstrap for extra component https://react-bootstrap.netlify.app/docs/getting-started/introduction
Supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and above.
- Initial Release
All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.