react-types-of-components.md

Types of components in React - cheatsheet

Function component

• [for now] has no state
• has props (props.something or ({something}) when accessing it)

import React from 'react';

// function component - traditional
function SomeComponent([props]){
   return(
     <></>
   )
}

export default SomeComponent;

import React from 'react';

// function component - ES6 way
const SomeComponent = ([props]) => {
   return(
     <></>
   )
}

export default SomeComponent;

Class component

• has state (this.state when accessing it)
• has props (this.props when accessing it)

import React from 'react';

// class component
class SomeComponent extends React.Component {

  state={
    someKey: value
  };
  
  someMethodToManipulateState(){
    this.setState({
      someKey: newValue
    })
  }
  render(){
     console.log(this.[props])
     console.log(this.state)
    return(
      <></>
    )
  }
}

export default SomeComponent;

• [props] is in brackets since component could but it doesn’t have to have them.