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", "bootstrap-icons": "^1.7.2",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0", "react-scripts": "5.0.0",
"sass": "^1.49.0", "sass": "^1.49.0",
"sass-loader": "^12.4.0", "sass-loader": "^12.4.0",

6
public/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html class="h-100" lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -26,9 +26,9 @@
--> -->
<title>React Base /w Bootstrap</title> <title>React Base /w Bootstrap</title>
</head> </head>
<body> <body class="h-100">
<noscript>You need to enable JavaScript to run this app.</noscript> <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. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. 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 './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() { function App() {
return ( 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 languageName: node
linkType: hard 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 version: 7.16.7
resolution: "@babel/runtime@npm:7.16.7" resolution: "@babel/runtime@npm:7.16.7"
dependencies: dependencies:
@@ -6104,6 +6104,15 @@ __metadata:
languageName: node languageName: node
linkType: hard 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": "hoopy@npm:^0.1.4":
version: 0.1.4 version: 0.1.4
resolution: "hoopy@npm:0.1.4" resolution: "hoopy@npm:0.1.4"
@@ -9672,6 +9681,7 @@ __metadata:
postcss-loader: ^6.2.1 postcss-loader: ^6.2.1
react: ^17.0.2 react: ^17.0.2
react-dom: ^17.0.2 react-dom: ^17.0.2
react-router-dom: ^6.2.1
react-scripts: 5.0.0 react-scripts: 5.0.0
sass: ^1.49.0 sass: ^1.49.0
sass-loader: ^12.4.0 sass-loader: ^12.4.0
@@ -9752,6 +9762,30 @@ __metadata:
languageName: node languageName: node
linkType: hard 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": "react-scripts@npm:5.0.0":
version: 5.0.0 version: 5.0.0
resolution: "react-scripts@npm:5.0.0" resolution: "react-scripts@npm:5.0.0"