🌀 React-Helper3_Class Componenents 🌀

🌀 Class-Based Components

To generate a functional component in VSCode: rcc

🌀 Functional Component - good for simple content without logic behind it
🌀 Class-Based Component - good for everything else

Easier code organization
State - easier to handle user input
Lifecycle Events - easier to do things when app first starts

import React, {Components} from 'react'

class SeasonDisplay extends Components {
 render() {                              // the only requirement of a class function is to have a render method
  return (
   <div></div>
   )
 }
}

export default SeasonDisplay

🌀 State

🌀 JS object that contains data relevant to a component
🌀 Updating state on a component causes the component to rerender
🌀 State must be initialized when a component is created
🌀 State can only be updated with setState()

using state

class SeasonDisplay extends Component {
 constructor(props) {                // we are overwriting our parents constructor
  super(props)                       // retaining our parents constructor and just adding to it
  this.state = {lat: null }          // our state; initializing it to null because we're expecting a number 
  
  getLocation(
   position => this.setState ({lat: position.latitude})    // changing our state
  )
 }
 
 render() {                     // required for a class component
  return JSX
 }
}

🌀 Lifecycle Methods

These are methods in our Class-Based Components. React automatically call them at certain points during a components lifecycle. A component's lifecycle goes like this: gets created, shows up in DOM, rerender and in theory gets removed in the DOM altogeher

For instance after render(), componentDidMount() gets called one time after our component gets rendered in our screen. We can put some codes here for our component setup.

🌀   constructor - good place to do one-time setup
🌀   render - only for returning JSX
🌀   componentDidMount - good place to do data loading
🌀   componentDidUpdate - good place to do more data-loading when state/props change
🌀   componentWillUnmount - good place to do cleanup

class App extends Component{
 
 state={ lat: null}                                        // this is an easier alternative for initializing state; Babel
 
 componentDidMount(){                                      // we take care of data loading here
  getLocation(
   position => this.setState ({lat: position.latitude})    // changing our state
  )
 }
 
 render() {
  return <div>{this.state.lat}</div>
 } 
}

export default App

🌀 Ref System

Getting a DOM element in React

 constructor(props) {                       // we create the ref in the constructor
    super(props);

    this.imageRef = React.createRef();
  }
 
 render() {
  return (
   <img ref={this.imageRef} />             // we pass the createf ref to <img />; we get the <img />
  )                                        // use this.imageRef
 }

kylenrich24 / react-helper3_classcomponenents Goto Github PK