vikingowl/react-base-bootstrap
Template
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added router and updated base-layout

Browse Source
This commit is contained in:
vikingowl
2022-01-24 13:32:25 +01:00
parent 5c6360c88a
commit 754243e3b2
10 changed files with 145 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -11,6 +11,7 @@
"bootstrap-icons": "^1.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"sass": "^1.49.0",
"sass-loader": "^12.4.0",

6
public/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html class="h-100" lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -26,9 +26,9 @@
-->
<title>React Base /w Bootstrap</title>
</head>
<body>
<body class="h-100">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="root" class="d-flex flex-column h-100"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

23
src/App.js
View File

@@ -1,10 +1,29 @@
import './App.css';
import {BrowserRouter as Router} from "react-router-dom";
import {ScrollTopButton} from "./components/ScrollTopButton";
import {Nav} from "./components/Nav";
import {Routing} from "./components/Routing";
import {Footer} from "./components/Footer";
function App() {
return (
<div className="App">
<Router>
<header>
<Nav/>
</header>
</div>
<main className="flex-shrink-0">
<Routing/>
</main>
<footer className="footer mt-auto bg-light pt-4 pb-2">
<Footer/>
</footer>
<ScrollTopButton/>
</Router>
);
}

13
src/components/Footer.js Normal file
View File

@@ -0,0 +1,13 @@
import React from 'react'
export const Footer = () => {
return (
<div className='container d-flex justify-content-between'>
<p>&copy; COPYRIGHT</p>
<span>
LINKS
</span>
</div>
)
}

9
src/components/Nav.js Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react'
export const Nav = () => {
return (
<div>
NAV
</div>
)
}

14
src/components/Routing.js Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react'
import {Routes, Route} from "react-router-dom";
import {Home} from "../pages/Home";
import {NotFound} from "../pages/NotFound";
export const Routing = () => {
return (
<Routes>
<Route exact path="/" element={<Home/>}/>
<Route path="*" element={<NotFound/>}/>
</Routes>
)
}

31
src/components/ScrollTopButton.js Normal file
View File

@@ -0,0 +1,31 @@
import React, {useState} from 'react'
export const ScrollTopButton = () => {
const [visible, setVisible] = useState(false)
const toggleVisible = () => {
const scrolled = document.documentElement.scrollTop
if (scrolled > 300) {
setVisible(true)
} else if (scrolled <= 300) {
setVisible(false)
}
}
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
})
}
window.addEventListener('scroll', toggleVisible)
return (
<i
className="bi bi-arrow-up-square scroll-top-btn text-info"
onClick={() => scrollToTop()}
style={{display: visible ? 'inline' : 'none'}}
/>
)
}

9
src/pages/Home.js Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react'
export const Home = () => {
return (
<div>
HOME
</div>
)
}

9
src/pages/NotFound.js Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react'
export const NotFound = () => {
return (
<div className='container'>
<h2>Site not found</h2>
</div>
)
}

36
yarn.lock
View File

@@ -1429,7 +1429,7 @@ __metadata:
languageName: node
linkType: hard
"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
version: 7.16.7
resolution: "@babel/runtime@npm:7.16.7"
dependencies:
@@ -6104,6 +6104,15 @@ __metadata:
languageName: node
linkType: hard
"history@npm:^5.2.0":
version: 5.2.0
resolution: "history@npm:5.2.0"
dependencies:
"@babel/runtime": ^7.7.6
checksum: 2c6a05aa86793e0a0857013457f34474c17f81a012c6bdb00bf30862389ac6a8c2df113d82176f67af2fd534ea9dc4e1218470c5526355b6fc1aefcc971f2eb2
languageName: node
linkType: hard
"hoopy@npm:^0.1.4":
version: 0.1.4
resolution: "hoopy@npm:0.1.4"
@@ -9672,6 +9681,7 @@ __metadata:
postcss-loader: ^6.2.1
react: ^17.0.2
react-dom: ^17.0.2
react-router-dom: ^6.2.1
react-scripts: 5.0.0
sass: ^1.49.0
sass-loader: ^12.4.0
@@ -9752,6 +9762,30 @@ __metadata:
languageName: node
linkType: hard
"react-router-dom@npm:^6.2.1":
version: 6.2.1
resolution: "react-router-dom@npm:6.2.1"
dependencies:
history: ^5.2.0
react-router: 6.2.1
peerDependencies:
react: ">=16.8"
react-dom: ">=16.8"
checksum: fa0edc69fddf0cb1313bcb3dbd5eb2b2ff24a75ee03ba928995e16a6a251585750f91d966612e868eb68a5aebc4a5240be40fd96c4acf1d8d48d33f54ad3f4e2
languageName: node
linkType: hard
"react-router@npm:6.2.1":
version: 6.2.1
resolution: "react-router@npm:6.2.1"
dependencies:
history: ^5.2.0
peerDependencies:
react: ">=16.8"
checksum: 081a89237ab4f32195d1f2173bc4b3d95637cd6942a4d1a9e90d4ac8c80faa95528255ca2ec44c1e88c1b369e712c4ca74cba5ae3acef6fc30a51a62805b95a4
languageName: node
linkType: hard
"react-scripts@npm:5.0.0":
version: 5.0.0
resolution: "react-scripts@npm:5.0.0"