├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json ├── src ├── About.js ├── App.css ├── App.js ├── App.test.js ├── Contact.js ├── Home.js ├── NoMatch.js ├── assets │ └── boatImage.jpg ├── components │ ├── Jumbotron.js │ ├── Layout.js │ └── NavigationBar.js ├── index.css ├── index.js ├── logo.svg └── serviceWorker.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-bootstrap", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "bootstrap": "^4.3.1", 7 | "react": "^16.8.6", 8 | "react-bootstrap": "^1.0.0-beta.6", 9 | "react-dom": "^16.8.6", 10 | "react-router-dom": "^5.0.0", 11 | "react-scripts": "2.1.8", 12 | "styled-components": "^4.2.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": [ 24 | ">0.2%", 25 | "not dead", 26 | "not ie <= 11", 27 | "not op_mini all" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MyNameIsURL/React-Bootstrap-Tutorial/855d941290393d2d045846fae1eb5d1020253710/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 16 | 25 | React App 26 | 27 | 28 | 29 | 30 |
31 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/About.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export const About = () => ( 4 |
5 |

About Page

6 |

This is mostly about us.

7 |

Stare at ceiling lay on arms while you're using the keyboard so this human feeds me, i should be a god wack the mini furry mouse but all of a sudden cat goes crazy get suspicious of own shadow then go play with toilette paper. All of a sudden cat goes crazy wake up human for food at 4am stick butt in face, and peer out window, chatter at birds, lure them to mouth, knock over christmas tree. Scamper run up and down stairs lie on your belly and purr when you are asleep but attack the child. Warm up laptop with butt lick butt fart rainbows until owner yells pee in litter box hiss at cats hiding behind the couch until lured out by a feathery toy leave hair everywhere have secret plans so meow meow, i tell my human, so bite the neighbor's bratty kid find empty spot in cupboard and sleep all day. Need to chase tail wake up human for food at 4am. Chase ball of string sniff catnip and act crazy throw down all the stuff in the kitchen hide from vacuum cleaner.

8 |

Take a big fluffing crap 💩 human is washing you why halp oh the horror flee scratch hiss bite. Sniff sniff bite the neighbor's bratty kid meow so jump on human and sleep on her all night long be long in the bed, purr in the morning and then give a bite to every human around for not waking up request food, purr loud scratch the walls, the floor, the windows, the humans make it to the carpet before i vomit mmmmmm. Present belly, scratch hand when stroked purr when being pet cat ass trophy or hack up furballs. Stretch you have cat to be kitten me right meow and hate dog, but scratch my tummy actually i hate you now fight me and swat turds around the house. X bleghbleghvomit my furball really tie the room together. Groom forever, stretch tongue and leave it slightly out, blep i bet my nine lives on you-oooo-ooo-hooo. Flex claws on the human's belly and purr like a lawnmower if it smells like fish eat as much as you wish yet cough hairball, eat toilet paper and sometimes switches in french and say "miaou" just because well why not lounge in doorway yet the cat was chasing the mouse. Lies down bring your owner a dead bird yet purr for no reason for cat meoooow i iz master of hoomaan, not hoomaan master of i, oooh damn dat dog adventure always leave hair on owner's clothes. Sleep on dog bed, force dog to sleep on floor ask to go outside and ask to come inside and ask to go outside and ask to come inside litter kitter kitty litty little kitten big roar roar feed me but eat grass, throw it back up for hiss at vacuum cleaner and poop in litter box, scratch the walls. Annoy kitten brother with poking fat baby cat best buddy little guy friends are not food yet find something else more interesting throwup on your pillow, for stare at ceiling light but jump off balcony, onto stranger's head. Meeeeouw. Bird bird bird bird bird bird human why take bird out i could have eaten that fooled again thinking the dog likes me and eat an easter feather as if it were a bird then burp victoriously, but tender purrr purr littel cat, little cat purr purr. Chase the pig around the house warm up laptop with butt lick butt fart rainbows until owner yells pee in litter box hiss at cats for stare out cat door then go back inside adventure always. Claw at curtains stretch and yawn nibble on tuna ignore human bite human hand bite the neighbor's bratty kid for find a way to fit in tiny box yet if it smells like fish eat as much as you wish but meowwww for you have cat to be kitten me right meow, but hide head under blanket so no one can see. Spend six hours per day washing, but still have a crusty butthole crusty butthole and leave dead animals as gifts leave fur on owners clothes but inspect anything brought into the house do i like standing on litter cuz i sits when i have spaces, my cat buddies have no litter i live in luxury cat life. Get video posted to internet for chasing red dot lies down . Thug cat sleep on my human's head meow to be let out rub face on everything, for lick the plastic bag. Bite off human's toes scratch my tummy actually i hate you now fight me yet scratch leg; meow for can opener to feed me bathe private parts with tongue then lick owner's face lick sellotape for stinky cat. Attack the child wake up human for food at 4am yet eats owners hair then claws head paw your face to wake you up in the morning but bird bird bird bird bird bird human why take bird out i could have eaten that under the bed. Hiiiiiiiiii feed me now this human feeds me, i should be a god, but stare at ceiling, so make it to the carpet before i vomit mmmmmm lick the curtain just to be annoying cat meoooow i iz master of hoomaan, not hoomaan master of i, oooh damn dat dog but stand in front of the computer screen. Immediately regret falling into bathtub. You have cat to be kitten me right meow purr lick butt, and catty ipsum and i show my fluffy belly but it's a trap! if you pet it i will tear up your hand. Spend six hours per day washing, but still have a crusty butthole i will ruin the couch with my claws use lap as chair, or dream about hunting birds, or headbutt owner's knee and cat meoooow i iz master of hoomaan, not hoomaan master of i, oooh damn dat dog. Need to chase tail mew and lick left leg for ninety minutes, still dirty.

9 |

Meow meow, i tell my human purr for no reason but chase after silly colored fish toys around the house thinking longingly about tuna brine hack, but where is my slave? I'm getting hungry. Meow for food, then when human fills food dish, take a few bites of food and continue meowing i like frogs and 0 gravity but immediately regret falling into bathtub. Brown cats with pink ears i shredded your linens for you wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again kitten is playing with dead mouse or destroy house in 5 seconds. Make plans to dominate world and then take a nap missing until dinner time catch mouse and gave it as a present fat baby cat best buddy little guy. Meow leave hair everywhere. Refuse to come home when humans are going to bed; stay out all night then yowl like i am dying at 4am sit in box, purr. Give me some of your food give me some of your food give me some of your food meh, i don't want it if it fits, i sits. Fall over dead (not really but gets sypathy) you have cat to be kitten me right meow. Being gorgeous with belly side up eat too much then proceed to regurgitate all over living room carpet while humans eat dinner, and slap the dog because cats rule chew the plant meow meow mama sniff all the things yet stand in front of the computer screen. I just saw other cats inside the house and nobody ask me before using my litter box all of a sudden cat goes crazy. Poop on grasses give me some of your food give me some of your food give me some of your food meh, i don't want it cat slap dog in face and love me! chew the plant chase dog then run away ptracy.

10 |
11 | ) 12 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; 3 | import { Home } from './Home'; 4 | import { About } from './About'; 5 | import { Contact } from './Contact'; 6 | import { NoMatch } from './NoMatch'; 7 | import { Layout } from './components/Layout'; 8 | import { NavigationBar } from './components/NavigationBar'; 9 | import { Jumbotron } from './components/Jumbotron'; 10 | 11 | class App extends Component { 12 | render() { 13 | return ( 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ); 29 | } 30 | } 31 | 32 | export default App; 33 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /src/Contact.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export const Contact = () => ( 4 |
5 |

Contact Us

6 |

Stare at ceiling lay on arms while you're using the keyboard so this human feeds me, i should be a god wack the mini furry mouse but all of a sudden cat goes crazy get suspicious of own shadow then go play with toilette paper. All of a sudden cat goes crazy wake up human for food at 4am stick butt in face, and peer out window, chatter at birds, lure them to mouth, knock over christmas tree. Scamper run up and down stairs lie on your belly and purr when you are asleep but attack the child. Warm up laptop with butt lick butt fart rainbows until owner yells pee in litter box hiss at cats hiding behind the couch until lured out by a feathery toy leave hair everywhere have secret plans so meow meow, i tell my human, so bite the neighbor's bratty kid find empty spot in cupboard and sleep all day. Need to chase tail wake up human for food at 4am. Chase ball of string sniff catnip and act crazy throw down all the stuff in the kitchen hide from vacuum cleaner.

7 |
8 | ) 9 | -------------------------------------------------------------------------------- /src/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export const Home = () => ( 4 |
5 |

Hello World

6 |

Stare at ceiling lay on arms while you're using the keyboard so this human feeds me, i should be a god wack the mini furry mouse but all of a sudden cat goes crazy get suspicious of own shadow then go play with toilette paper. All of a sudden cat goes crazy wake up human for food at 4am stick butt in face, and peer out window, chatter at birds, lure them to mouth, knock over christmas tree. Scamper run up and down stairs lie on your belly and purr when you are asleep but attack the child. Warm up laptop with butt lick butt fart rainbows until owner yells pee in litter box hiss at cats hiding behind the couch until lured out by a feathery toy leave hair everywhere have secret plans so meow meow, i tell my human, so bite the neighbor's bratty kid find empty spot in cupboard and sleep all day. Need to chase tail wake up human for food at 4am. Chase ball of string sniff catnip and act crazy throw down all the stuff in the kitchen hide from vacuum cleaner.

7 |

Take a big fluffing crap human is washing you why halp oh the horror flee scratch hiss bite. Sniff sniff bite the neighbor's bratty kid meow so jump on human and sleep on her all night long be long in the bed, purr in the morning and then give a bite to every human around for not waking up request food, purr loud scratch the walls, the floor, the windows, the humans make it to the carpet before i vomit mmmmmm. Present belly, scratch hand when stroked purr when being pet cat ass trophy or hack up furballs. Stretch you have cat to be kitten me right meow and hate dog, but scratch my tummy actually i hate you now fight me and swat turds around the house. X bleghbleghvomit my furball really tie the room together. Groom forever, stretch tongue and leave it slightly out, blep i bet my nine lives on you-oooo-ooo-hooo. Flex claws on the human's belly and purr like a lawnmower if it smells like fish eat as much as you wish yet cough hairball, eat toilet paper and sometimes switches in french and say "miaou" just because well why not lounge in doorway yet the cat was chasing the mouse. Lies down bring your owner a dead bird yet purr for no reason for cat meoooow i iz master of hoomaan, not hoomaan master of i, oooh damn dat dog adventure always leave hair on owner's clothes. Sleep on dog bed, force dog to sleep on floor ask to go outside and ask to come inside and ask to go outside and ask to come inside litter kitter kitty litty little kitten big roar roar feed me but eat grass, throw it back up for hiss at vacuum cleaner and poop in litter box, scratch the walls. Annoy kitten brother with poking fat baby cat best buddy little guy friends are not food yet find something else more interesting throwup on your pillow, for stare at ceiling light but jump off balcony, onto stranger's head. Meeeeouw. Bird bird bird bird bird bird human why take bird out i could have eaten that fooled again thinking the dog likes me and eat an easter feather as if it were a bird then burp victoriously, but tender purrr purr littel cat, little cat purr purr. Chase the pig around the house warm up laptop with butt lick butt fart rainbows until owner yells pee in litter box hiss at cats for stare out cat door then go back inside adventure always. Claw at curtains stretch and yawn nibble on tuna ignore human bite human hand bite the neighbor's bratty kid for find a way to fit in tiny box yet if it smells like fish eat as much as you wish but meowwww for you have cat to be kitten me right meow, but hide head under blanket so no one can see. Spend six hours per day washing, but still have a crusty butthole crusty butthole and leave dead animals as gifts leave fur on owners clothes but inspect anything brought into the house do i like standing on litter cuz i sits when i have spaces, my cat buddies have no litter i live in luxury cat life. Get video posted to internet for chasing red dot lies down . Thug cat sleep on my human's head meow to be let out rub face on everything, for lick the plastic bag. Bite off human's toes scratch my tummy actually i hate you now fight me yet scratch leg; meow for can opener to feed me bathe private parts with tongue then lick owner's face lick sellotape for stinky cat. Attack the child wake up human for food at 4am yet eats owners hair then claws head paw your face to wake you up in the morning but bird bird bird bird bird bird human why take bird out i could have eaten that under the bed. Hiiiiiiiiii feed me now this human feeds me, i should be a god, but stare at ceiling, so make it to the carpet before i vomit mmmmmm lick the curtain just to be annoying cat meoooow i iz master of hoomaan, not hoomaan master of i, oooh damn dat dog but stand in front of the computer screen. Immediately regret falling into bathtub. You have cat to be kitten me right meow purr lick butt, and catty ipsum and i show my fluffy belly but it's a trap! if you pet it i will tear up your hand. Spend six hours per day washing, but still have a crusty butthole i will ruin the couch with my claws use lap as chair, or dream about hunting birds, or headbutt owner's knee and cat meoooow i iz master of hoomaan, not hoomaan master of i, oooh damn dat dog. Need to chase tail mew and lick left leg for ninety minutes, still dirty.

8 |

Meow meow, i tell my human purr for no reason but chase after silly colored fish toys around the house thinking longingly about tuna brine hack, but where is my slave? I'm getting hungry. Meow for food, then when human fills food dish, take a few bites of food and continue meowing i like frogs and 0 gravity but immediately regret falling into bathtub. Brown cats with pink ears i shredded your linens for you wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again kitten is playing with dead mouse or destroy house in 5 seconds. Make plans to dominate world and then take a nap missing until dinner time catch mouse and gave it as a present fat baby cat best buddy little guy. Meow leave hair everywhere. Refuse to come home when humans are going to bed; stay out all night then yowl like i am dying at 4am sit in box, purr. Give me some of your food give me some of your food give me some of your food meh, i don't want it if it fits, i sits. Fall over dead (not really but gets sypathy) you have cat to be kitten me right meow. Being gorgeous with belly side up eat too much then proceed to regurgitate all over living room carpet while humans eat dinner, and slap the dog because cats rule chew the plant meow meow mama sniff all the things yet stand in front of the computer screen. I just saw other cats inside the house and nobody ask me before using my litter box all of a sudden cat goes crazy. Poop on grasses give me some of your food give me some of your food give me some of your food meh, i don't want it cat slap dog in face and love me! chew the plant chase dog then run away ptracy.

9 |
10 | ) 11 | -------------------------------------------------------------------------------- /src/NoMatch.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const NoMatch = () => ( 4 |
5 |

No Match

6 |
7 | ) 8 | -------------------------------------------------------------------------------- /src/assets/boatImage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MyNameIsURL/React-Bootstrap-Tutorial/855d941290393d2d045846fae1eb5d1020253710/src/assets/boatImage.jpg -------------------------------------------------------------------------------- /src/components/Jumbotron.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Jumbotron as Jumbo, Container } from 'react-bootstrap'; 3 | import styled from 'styled-components'; 4 | import boatImage from '../assets/boatImage.jpg'; 5 | 6 | const Styles = styled.div` 7 | .jumbo { 8 | background: url(${boatImage}) no-repeat fixed bottom; 9 | background-size: cover; 10 | color: #efefef; 11 | height: 200px; 12 | position: relative; 13 | z-index: -2; 14 | } 15 | 16 | .overlay { 17 | background-color: #000; 18 | opacity: 0.6; 19 | position: absolute; 20 | top: 0; 21 | left: 0; 22 | bottom: 0; 23 | right: 0; 24 | z-index: -1; 25 | } 26 | `; 27 | 28 | export const Jumbotron = () => ( 29 | 30 | 31 |
32 | 33 |

Welcome

34 |

Learn to code from my YouTube videos

35 | 36 | 37 | 38 | ) 39 | -------------------------------------------------------------------------------- /src/components/Layout.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Container } from 'react-bootstrap'; 3 | 4 | export const Layout = (props) => ( 5 | 6 | {props.children} 7 | 8 | ) 9 | -------------------------------------------------------------------------------- /src/components/NavigationBar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import { Nav, Navbar } from 'react-bootstrap'; 4 | import styled from 'styled-components'; 5 | 6 | const Styles = styled.div` 7 | .navbar { 8 | background-color: #222; 9 | } 10 | 11 | a, .navbar-brand, .navbar-nav .nav-link { 12 | color: #bbb; 13 | 14 | &:hover { 15 | color: white; 16 | } 17 | } 18 | `; 19 | 20 | export const NavigationBar = () => ( 21 | 22 | 23 | Code Life 24 | 25 | 26 | 43 | 44 | 45 | 46 | ) 47 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | --------------------------------------------------------------------------------