├── .gitignore ├── LICENSE.MD ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── src ├── components │ ├── app.js │ ├── discussion.js │ ├── navigation.js │ ├── page-content.js │ ├── rules.js │ └── workflow.js └── index.js ├── style └── main.css └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /LICENSE.MD: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 DevCamp, LLC 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Component Lifecycle Deep Dive 2 | 3 | ## Topics covered 4 | 5 | - React router dom 6 | - Class vs function components 7 | - Object deconstruction 8 | - Component lifecycle methods 9 | 10 | ### Component Life Cycle methods 11 | 12 | [Docs](https://reactjs.org/docs/react-component.html) 13 | 14 | **Mounting** 15 | 16 | *These methods are called when an instance of a component is being created and inserted into the DOM:* 17 | 18 | - constructor() 19 | - static getDerivedStateFromProps() 20 | - componentWillMount() 21 | - render() 22 | - componentDidMount() 23 | 24 | * * * 25 | 26 | **Updating** 27 | 28 | *An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:* 29 | 30 | - componentWillReceiveProps() 31 | - static getDerivedStateFromProps() 32 | - shouldComponentUpdate() 33 | - componentWillUpdate() 34 | - render() 35 | - getSnapshotBeforeUpdate() 36 | - componentDidUpdate() 37 | 38 | * * * 39 | 40 | **Unmounting** 41 | 42 | *This method is called when a component is being removed from the DOM:* 43 | 44 | - componentWillUnmount() 45 | 46 | * * * 47 | 48 | **Error Handling** 49 | 50 | *This method is called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.* 51 | 52 | - componentDidCatch() 53 | 54 | * * * 55 | 56 | > Provided for the students of the [Bottega Code School](https://bottega.tech/) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

9 | 10 | 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "devcamp-skeleton-react-starter", 3 | "version": "1.0.0", 4 | "description": "Basic skeleton codebase for React applications.", 5 | "main": "index.js", 6 | "repository": "git@github.com:bottega-code-school/js-builder.git", 7 | "scripts": { 8 | "start": "webpack-dev-server --config webpack.config.js --watch" 9 | }, 10 | "author": "Your Name Here", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "babel-core": "6.26.3", 14 | "babel-loader": "7.1.4", 15 | "babel-preset-es2015": "^6.1.18", 16 | "babel-preset-react": "6.24.1", 17 | "jsdom": "11.10.0", 18 | "webpack-cli": "2.1.2", 19 | "webpack-dev-server": "3.1.4" 20 | }, 21 | "dependencies": { 22 | "babel-preset-stage-1": "6.24.1", 23 | "react": "16.3.2", 24 | "react-dom": "16.3.2", 25 | "react-router-dom": "4.2.2", 26 | "webpack": "4.7.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/components/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Navigation from "./navigation"; 3 | import PageContent from "./page-content"; 4 | 5 | export default class App extends Component { 6 | render() { 7 | return ( 8 |

9 |

DevCamp React Starter

10 | 11 | 12 |

13 | ); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/components/discussion.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | const DiscussionMessage = props => { 4 | return

{props.msg}

; 5 | }; 6 | 7 | class DiscussionList extends Component { 8 | constructor() { 9 | super(); 10 | 11 | const messages = ["Some message", "Another message"]; 12 | 13 | this.state = { 14 | messages: this.allMessages(messages) 15 | }; 16 | } 17 | 18 | allMessages = messages => 19 | messages.map(message => { 20 | return ( 21 |

22 | 26 |

27 | ); 28 | }); 29 | 30 | componentDidMount() { 31 | this.messageAdder = setInterval(() => { 32 | console.log("hey from the auto generated element...."); 33 | this.setState({ 34 | messages: this.state.messages.concat([

Another one...

]) 35 | }); 36 | }, 2000); 37 | } 38 | 39 | componentWillUnmount() { 40 | clearInterval(this.messageAdder); 41 | } 42 | 43 | render() { 44 | return this.state.messages; 45 | } 46 | } 47 | 48 | export default class Discussion extends Component { 49 | constructor() { 50 | super(); 51 | 52 | this.state = { 53 | pageTitle: "Discussion", 54 | currentTime: String(new Date()) 55 | }; 56 | } 57 | 58 | componentDidMount() { 59 | console.log("hey from the parent...."); 60 | 61 | this.liveTime = setInterval(() => { 62 | this.setState({ 63 | currentTime: String(new Date()) 64 | }); 65 | }, 1000); 66 | } 67 | 68 | componentWillUnmount() { 69 | clearInterval(this.liveTime); 70 | } 71 | 72 | render() { 73 | const { pageTitle } = this.state; 74 | 75 | return ( 76 |

77 |

{pageTitle}

78 | 79 |

{this.state.currentTime}

80 |

81 | ); 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/components/navigation.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NavLink } from "react-router-dom"; 3 | 4 | export default function() { 5 | return ( 6 |

7 |

8 | 9 | Discussion 10 | 11 |

12 | 13 |

14 | Rules 15 |

16 | 17 |

18 | Workflow 19 |

20 |

21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/components/page-content.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Switch, Route } from "react-router-dom"; 3 | import Discussion from "./discussion"; 4 | import Rules from "./rules"; 5 | import Workflow from "./workflow"; 6 | 7 | export default function() { 8 | return ( 9 |

10 | 11 | 12 | 13 | 14 | 15 |

16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/components/rules.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function() { 4 | return

Rules...

; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/workflow.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | export default class Workflow extends Component { 4 | // First 5 | constructor() { 6 | super(); 7 | this.state = {}; 8 | console.log("constructor"); 9 | } 10 | 11 | // Second 12 | static getDerivedStateFromProps() { 13 | console.log("getDerivedStateFromProps"); 14 | } 15 | 16 | // Fourth 17 | componentDidMount() { 18 | console.log("componentDidMount"); 19 | } 20 | 21 | // Fith (after update) 22 | shouldComponentUpdate() { 23 | console.log("shouldComponentUpdate"); 24 | return true; 25 | } 26 | 27 | // Seventh (after update) 28 | getSnapshotBeforeUpdate() { 29 | console.log("getSnapshotBeforeUpdate"); 30 | return true; 31 | } 32 | 33 | // Eighth (after update) 34 | componentDidUpdate() { 35 | console.log("componentDidUpdate"); 36 | } 37 | 38 | // Last 39 | componentWillUnmount() { 40 | console.log("componentWillUnmount"); 41 | } 42 | 43 | handleClick = () => { 44 | console.log("button clicked"); 45 | this.setState({ pageTitle: "Workflow" }); 46 | }; 47 | 48 | handleKeyUp = e => { 49 | this.setState({ inputDetails: e.target.value }); 50 | }; 51 | 52 | // Third 53 | // Sixth (after update) 54 | render() { 55 | console.log("render"); 56 | 57 | return ( 58 |

59 |

Workflow

60 | 61 | this.handleKeyUp(e)} /> 62 | 63 |

64 | ); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { BrowserRouter, Route, Link } from "react-router-dom"; 4 | import App from "./components/app"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.querySelector(".app-wrapper") 11 | ); 12 | -------------------------------------------------------------------------------- /style/main.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordanhudgens/ReactComponentLifecycleDeepDive/f414fd2284fe2ed7f2cf9c7c5de33f60043de247/style/main.css -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: ["./src/index.js"], 3 | output: { 4 | path: __dirname, 5 | publicPath: "/", 6 | filename: "bundle.js" 7 | }, 8 | mode: "development", 9 | module: { 10 | rules: [ 11 | { 12 | exclude: /node_modules/, 13 | loader: "babel", 14 | query: { 15 | presets: ["react", "es2015", "stage-1"] 16 | } 17 | } 18 | ] 19 | }, 20 | resolve: { 21 | extensions: [".js", ".jsx"], 22 | modules: ["node_modules"] 23 | }, 24 | resolveLoader: { 25 | moduleExtensions: ["-loader"] 26 | }, 27 | devServer: { 28 | historyApiFallback: true, 29 | contentBase: "./" 30 | } 31 | }; 32 | --------------------------------------------------------------------------------