├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json ├── src ├── App.css ├── App.js ├── App.test.js ├── components │ ├── Body.js │ ├── Counter.js │ ├── FetchRandomUser.js │ ├── Header.js │ ├── ImageSlider.js │ ├── MyForm.js │ ├── Todo.js │ ├── TodoForm.js │ ├── TodoList.js │ └── ValidationForm.js ├── index.css ├── index.js ├── logo.svg └── registerServiceWorker.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # practical-react 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "practical-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.0", 7 | "react-dom": "^16.5.0", 8 | "react-scripts": "1.1.5", 9 | "shortid": "^2.2.13" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test --env=jsdom", 15 | "eject": "react-scripts eject" 16 | }, 17 | "devDependencies": {} 18 | } 19 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/benawad/practical-react/94b8949c235c0f75a341a6286c17c68fafa51ecf/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |

29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /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": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | 34 | .hidden { 35 | display: none; 36 | } 37 | 38 | .visible { 39 | background-color: #f2f2f2; 40 | } 41 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./App.css"; 3 | import TodoList from "./components/TodoList"; 4 | 5 | class App extends Component { 6 | state = { 7 | count: 0 8 | }; 9 | 10 | increment = () => { 11 | this.setState({ 12 | count: this.state.count + 1 13 | }); 14 | }; 15 | 16 | decrement = () => { 17 | this.setState({ 18 | count: this.state.count - 1 19 | }); 20 | }; 21 | 22 | render() { 23 | return ( 24 |

25 | 26 |

27 | ); 28 | } 29 | } 30 | 31 | export default App; 32 | -------------------------------------------------------------------------------- /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/components/Body.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default props => ( 4 |

5 |

{props.text}

6 |

{props.text2}

7 |

{props.myFunc(1, 2)}

8 |

9 | ); 10 | 11 | export const Body2 = () => ( 12 |

13 |

14 |

15 | ); 16 | 17 | export const Body3 = () => ( 18 |

19 |

20 |

21 | ); 22 | -------------------------------------------------------------------------------- /src/components/Counter.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default class Counter extends React.Component { 4 | render() { 5 | bacon; 6 | return ( 7 |

8 |

count: {this.props.count}

9 | 10 | 11 |

12 | ); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/FetchRandomUser.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default class FetchRandomUser extends React.Component { 4 | state = { 5 | loading: true, 6 | people: [] 7 | }; 8 | 9 | async componentDidMount() { 10 | const url = "https://api.randomuser.me/?results=5"; 11 | const response = await fetch(url); 12 | const data = await response.json(); 13 | this.setState({ people: data.results, loading: false }); 14 | } 15 | 16 | render() { 17 | if (this.state.loading) { 18 | return

; 19 | } 20 | 21 | if (!this.state.people.length) { 22 | return

didn't get a person

; 23 | } 24 | 25 | // const peopleJsx = []; 26 | 27 | // this.state.people.forEach(person => { 28 | // peopleJsx.push( 29 | //

30 | //

{person.name.title}

31 | //

{person.name.first}

32 | //

{person.name.last}

33 | //

34 | //

35 | // ); 36 | // }); 37 | 38 | return ( 39 |

40 | {this.state.people.map(person => ( 41 |

42 |

{person.name.title}

43 |

{person.name.first}

44 |

{person.name.last}

45 |

46 |

47 | ))} 48 |

49 | ); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import logo from "../logo.svg"; 3 | 4 | export default class Header extends React.Component { 5 | render() { 6 | return ( 7 |

8 |

9 |

{this.props.title}

10 |

11 | ); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/ImageSlider.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | /* 4 | 1. shallow merge 5 | 2. async 6 | */ 7 | 8 | export default class ImageSlider extends React.Component { 9 | state = { 10 | images: [ 11 | "https://i.pinimg.com/236x/b6/21/07/b62107d70659823c6f409480f7435d14--watercolor-food-watercolor-print.jpg", 12 | "https://i.pinimg.com/236x/8a/61/c1/8a61c1ca0d1a20db922aa5e3a8493d0e--watercolour-flowers-watercolor-ideas.jpg", 13 | "https://i.pinimg.com/236x/86/d6/46/86d646ce2f92efd7890843ef5af9e700.jpg", 14 | "https://i.pinimg.com/236x/f6/4d/d7/f64dd7eb8df298195d61569b9634f982--watercolor-sketch-watercolor-kiwi.jpg" 15 | ], 16 | idx: 0 17 | }; 18 | 19 | handleNext = () => { 20 | this.setState({ 21 | idx: this.state.idx + 1 22 | }); 23 | }; 24 | 25 | render() { 26 | return ( 27 |

28 | 37 |

44 | 45 |

46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/components/MyForm.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default class MyForm extends React.Component { 4 | state = { 5 | name: "ben", 6 | favoritePet: "", 7 | rememberMe: false, 8 | title: "Miss." 9 | }; 10 | 11 | handleChange = event => { 12 | const isCheckbox = event.target.type === "checkbox"; 13 | this.setState({ 14 | [event.target.name]: isCheckbox 15 | ? event.target.checked 16 | : event.target.value 17 | }); 18 | }; 19 | 20 | handleSubmit = event => { 21 | event.preventDefault(); 22 | console.log(this.state); 23 | }; 24 | 25 | render() { 26 | return ( 27 |

28 | 33 |

38 |         <input
39 |           name="rememberMe"
40 |           type="checkbox"
41 |           checked={this.state.rememberMe}
42 |           onChange={this.handleChange}
43 |         />
44 |         <div>
45 |           <select
46 |             name="title"
47 |             value={this.state.title}
48 |             onChange={this.handleChange}
49 |           >
50 |             <option>Mr.</option>
51 |             <option>Miss.</option>
52 |             <option>Ms.</option>
53 |             <option>Mrs.</option>
54 |           </select>
55 |         </div>
56 |         <button type="submit">submit</button>
57 |       </form>
58 |     );
59 |   }
60 | }
61 |

--------------------------------------------------------------------------------
/src/components/Todo.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default props => (
 4 |   <div style={{ display: "flex", justifyContent: "center" }}>
 5 |     <div
 6 |       style={{
 7 |         textDecoration: props.todo.complete ? "line-through" : ""
 8 |       }}
 9 |       onClick={props.toggleComplete}
10 |     >
11 |       {props.todo.text}
12 |     </div>
13 |     <button onClick={props.onDelete}>x</button>
14 |   </div>
15 | );
16 |

--------------------------------------------------------------------------------
/src/components/TodoForm.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import shortid from "shortid";
 3 | 
 4 | export default class TodoForm extends React.Component {
 5 |   state = {
 6 |     text: ""
 7 |   };
 8 | 
 9 |   handleChange = event => {
10 |     this.setState({
11 |       [event.target.name]: event.target.value
12 |     });
13 |   };
14 | 
15 |   handleSubmit = event => {
16 |     event.preventDefault();
17 |     this.props.onSubmit({
18 |       id: shortid.generate(),
19 |       text: this.state.text,
20 |       complete: false
21 |     });
22 |     this.setState({
23 |       text: ""
24 |     });
25 |   };
26 | 
27 |   render() {
28 |     return (
29 |       <form onSubmit={this.handleSubmit}>
30 |         <input
31 |           name="text"
32 |           value={this.state.text}
33 |           onChange={this.handleChange}
34 |           placeholder="todo..."
35 |         />
36 |         <button onClick={this.handleSubmit}>add todo</button>
37 |       </form>
38 |     );
39 |   }
40 | }
41 |

--------------------------------------------------------------------------------
/src/components/TodoList.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import TodoForm from "./TodoForm";
  3 | import Todo from "./Todo";
  4 | 
  5 | /*
  6 |   TodoMVC
  7 |   1. add todo
  8 |   2. display todos
  9 |   3. cross off todo
 10 |   4. show number of active todos
 11 |   5. filter all/active/complete
 12 |   6. delete todo
 13 |   7. delete all complete
 14 |     7.1 only show if atleast one is complete
 15 |   8. button to toggle all on/off
 16 | */
 17 | 
 18 | export default class TodoList extends React.Component {
 19 |   state = {
 20 |     todos: [],
 21 |     todoToShow: "all",
 22 |     toggleAllComplete: true
 23 |   };
 24 | 
 25 |   addTodo = todo => {
 26 |     this.setState(state => ({
 27 |       todos: [todo, ...state.todos]
 28 |     }));
 29 |   };
 30 | 
 31 |   toggleComplete = id => {
 32 |     this.setState(state => ({
 33 |       todos: state.todos.map(todo => {
 34 |         if (todo.id === id) {
 35 |           // suppose to update
 36 |           return {
 37 |             ...todo,
 38 |             complete: !todo.complete
 39 |           };
 40 |         } else {
 41 |           return todo;
 42 |         }
 43 |       })
 44 |     }));
 45 |   };
 46 | 
 47 |   updateTodoToShow = s => {
 48 |     this.setState({
 49 |       todoToShow: s
 50 |     });
 51 |   };
 52 | 
 53 |   handleDeleteTodo = id => {
 54 |     this.setState(state => ({
 55 |       todos: state.todos.filter(todo => todo.id !== id)
 56 |     }));
 57 |   };
 58 | 
 59 |   removeAllTodosThatAreComplete = () => {
 60 |     this.setState(state => ({
 61 |       todos: state.todos.filter(todo => !todo.complete)
 62 |     }));
 63 |   };
 64 | 
 65 |   render() {
 66 |     let todos = [];
 67 | 
 68 |     if (this.state.todoToShow === "all") {
 69 |       todos = this.state.todos;
 70 |     } else if (this.state.todoToShow === "active") {
 71 |       todos = this.state.todos.filter(todo => !todo.complete);
 72 |     } else if (this.state.todoToShow === "complete") {
 73 |       todos = this.state.todos.filter(todo => todo.complete);
 74 |     }
 75 | 
 76 |     return (
 77 |       <div>
 78 |         <TodoForm onSubmit={this.addTodo} />
 79 |         {todos.map(todo => (
 80 |           <Todo
 81 |             key={todo.id}
 82 |             toggleComplete={() => this.toggleComplete(todo.id)}
 83 |             onDelete={() => this.handleDeleteTodo(todo.id)}
 84 |             todo={todo}
 85 |           />
 86 |         ))}
 87 |         <div>
 88 |           todos left: {this.state.todos.filter(todo => !todo.complete).length}
 89 |         </div>
 90 |         <div>
 91 |           <button onClick={() => this.updateTodoToShow("all")}>all</button>
 92 |           <button onClick={() => this.updateTodoToShow("active")}>
 93 |             active
 94 |           </button>
 95 |           <button onClick={() => this.updateTodoToShow("complete")}>
 96 |             complete
 97 |           </button>
 98 |         </div>
 99 |         {this.state.todos.some(todo => todo.complete) ? (
100 |           <div>
101 |             <button onClick={this.removeAllTodosThatAreComplete}>
102 |               remove all complete todos
103 |             </button>
104 |           </div>
105 |         ) : null}
106 |         <div>
107 |           <button
108 |             onClick={() =>
109 |               this.setState(state => ({
110 |                 todos: state.todos.map(todo => ({
111 |                   ...todo,
112 |                   complete: state.toggleAllComplete
113 |                 })),
114 |                 toggleAllComplete: !state.toggleAllComplete
115 |               }))
116 |             }
117 |           >
118 |             toggle all complete: {`${this.state.toggleAllComplete}`}
119 |           </button>
120 |         </div>
121 |       </div>
122 |     );
123 |   }
124 | }
125 |

--------------------------------------------------------------------------------
/src/components/ValidationForm.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const initialState = {
 4 |   name: "",
 5 |   email: "",
 6 |   password: "",
 7 |   nameError: "",
 8 |   emailError: "",
 9 |   passwordError: ""
10 | };
11 | 
12 | export default class ValiationForm extends React.Component {
13 |   state = initialState;
14 | 
15 |   handleChange = event => {
16 |     const isCheckbox = event.target.type === "checkbox";
17 |     this.setState({
18 |       [event.target.name]: isCheckbox
19 |         ? event.target.checked
20 |         : event.target.value
21 |     });
22 |   };
23 | 
24 |   validate = () => {
25 |     let nameError = "";
26 |     let emailError = "";
27 |     // let passwordError = "";
28 | 
29 |     if (!this.state.name) {
30 |       nameError = "name cannot be blank";
31 |     }
32 | 
33 |     if (!this.state.email.includes("@")) {
34 |       emailError = "invalid email";
35 |     }
36 | 
37 |     if (emailError || nameError) {
38 |       this.setState({ emailError, nameError });
39 |       return false;
40 |     }
41 | 
42 |     return true;
43 |   };
44 | 
45 |   handleSubmit = event => {
46 |     event.preventDefault();
47 |     const isValid = this.validate();
48 |     if (isValid) {
49 |       console.log(this.state);
50 |       // clear form
51 |       this.setState(initialState);
52 |     }
53 |   };
54 | 
55 |   render() {
56 |     return (
57 |       <form onSubmit={this.handleSubmit}>
58 |         <div>
59 |           <input
60 |             name="name"
61 |             placeholder="name"
62 |             value={this.state.name}
63 |             onChange={this.handleChange}
64 |           />
65 |           <div style={{ fontSize: 12, color: "red" }}>
66 |             {this.state.nameError}
67 |           </div>
68 |         </div>
69 |         <div>
70 |           <input
71 |             name="email"
72 |             placeholder="email"
73 |             value={this.state.email}
74 |             onChange={this.handleChange}
75 |           />
76 |           <div style={{ fontSize: 12, color: "red" }}>
77 |             {this.state.emailError}
78 |           </div>
79 |         </div>
80 |         <div>
81 |           <input
82 |             type="password"
83 |             name="password"
84 |             placeholder="password"
85 |             value={this.state.password}
86 |             onChange={this.handleChange}
87 |           />
88 |           <div style={{ fontSize: 12, color: "red" }}>
89 |             {this.state.passwordError}
90 |           </div>
91 |         </div>
92 |         <button type="submit">submit</button>
93 |       </form>
94 |     );
95 |   }
96 | }
97 |

--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   padding: 0;
4 |   font-family: sans-serif;
5 | }
6 |

--------------------------------------------------------------------------------
/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 registerServiceWorker from './registerServiceWorker';
6 | 
7 | ReactDOM.render(<App />, document.getElementById('root'));
8 | registerServiceWorker();
9 |

--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 |

--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
  1 | // In production, we register a service worker to serve assets from local cache.
  2 | 
  3 | // This lets the app load faster on subsequent visits in production, and gives
  4 | // it offline capabilities. However, it also means that developers (and users)
  5 | // will only see deployed updates on the "N+1" visit to a page, since previously
  6 | // cached resources are updated in the background.
  7 | 
  8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
  9 | // This link also includes instructions on opting out of this behavior.
 10 | 
 11 | const isLocalhost = Boolean(
 12 |   window.location.hostname === 'localhost' ||
 13 |     // [::1] is the IPv6 localhost address.
 14 |     window.location.hostname === '[::1]' ||
 15 |     // 127.0.0.1/8 is considered localhost for IPv4.
 16 |     window.location.hostname.match(
 17 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 18 |     )
 19 | );
 20 | 
 21 | export default function register() {
 22 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 23 |     // The URL constructor is available in all browsers that support SW.
 24 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
 25 |     if (publicUrl.origin !== window.location.origin) {
 26 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 27 |       // from what our page is served on. This might happen if a CDN is used to
 28 |       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 29 |       return;
 30 |     }
 31 | 
 32 |     window.addEventListener('load', () => {
 33 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 34 | 
 35 |       if (isLocalhost) {
 36 |         // This is running on localhost. Lets check if a service worker still exists or not.
 37 |         checkValidServiceWorker(swUrl);
 38 | 
 39 |         // Add some additional logging to localhost, pointing developers to the
 40 |         // service worker/PWA documentation.
 41 |         navigator.serviceWorker.ready.then(() => {
 42 |           console.log(
 43 |             'This web app is being served cache-first by a service ' +
 44 |               'worker. To learn more, visit https://goo.gl/SC7cgQ'
 45 |           );
 46 |         });
 47 |       } else {
 48 |         // Is not local host. Just register service worker
 49 |         registerValidSW(swUrl);
 50 |       }
 51 |     });
 52 |   }
 53 | }
 54 | 
 55 | function registerValidSW(swUrl) {
 56 |   navigator.serviceWorker
 57 |     .register(swUrl)
 58 |     .then(registration => {
 59 |       registration.onupdatefound = () => {
 60 |         const installingWorker = registration.installing;
 61 |         installingWorker.onstatechange = () => {
 62 |           if (installingWorker.state === 'installed') {
 63 |             if (navigator.serviceWorker.controller) {
 64 |               // At this point, the old content will have been purged and
 65 |               // the fresh content will have been added to the cache.
 66 |               // It's the perfect time to display a "New content is
 67 |               // available; please refresh." message in your web app.
 68 |               console.log('New content is available; please refresh.');
 69 |             } else {
 70 |               // At this point, everything has been precached.
 71 |               // It's the perfect time to display a
 72 |               // "Content is cached for offline use." message.
 73 |               console.log('Content is cached for offline use.');
 74 |             }
 75 |           }
 76 |         };
 77 |       };
 78 |     })
 79 |     .catch(error => {
 80 |       console.error('Error during service worker registration:', error);
 81 |     });
 82 | }
 83 | 
 84 | function checkValidServiceWorker(swUrl) {
 85 |   // Check if the service worker can be found. If it can't reload the page.
 86 |   fetch(swUrl)
 87 |     .then(response => {
 88 |       // Ensure service worker exists, and that we really are getting a JS file.
 89 |       if (
 90 |         response.status === 404 ||
 91 |         response.headers.get('content-type').indexOf('javascript') === -1
 92 |       ) {
 93 |         // No service worker found. Probably a different app. Reload the page.
 94 |         navigator.serviceWorker.ready.then(registration => {
 95 |           registration.unregister().then(() => {
 96 |             window.location.reload();
 97 |           });
 98 |         });
 99 |       } else {
100 |         // Service worker found. Proceed as normal.
101 |         registerValidSW(swUrl);
102 |       }
103 |     })
104 |     .catch(() => {
105 |       console.log(
106 |         'No internet connection found. App is running in offline mode.'
107 |       );
108 |     });
109 | }
110 | 
111 | export function unregister() {
112 |   if ('serviceWorker' in navigator) {
113 |     navigator.serviceWorker.ready.then(registration => {
114 |       registration.unregister();
115 |     });
116 |   }
117 | }
118 |

--------------------------------------------------------------------------------