4 React Components (Class & Functional)

4.1 React Components

• React components return HTML elements
• Two types of components:
• Class Components
  • Typically not used anymore
• Functional Components
  • Preferred

4.2 Functional Component

• Uses JavaScript functions
• Function declaration
• Function expression

• Arrow function

• Capitalized Component Name

• Must return HTML-like elements
• Execution:
• Invoke the function
• Display to page

const FunctionalComponent = () => {
  return (
    <h1> FunctionalComponent</h1>
  )
}

4.3 Class Component

• Uses JavaScript class
• Extends React.Component
• Capitalized component name
• Must have render() method
• Execution:
• Instantiate component
• Invoke render()
• Display to page

class ClassComponent extends React.Component{
  render(){
    return(
        <h1>ClassComponent</h1>
    );
  }
}

What are the differences between class and functional components in React?

Functional components use the function syntax, we can use function declarations, function expressions and arrow functions. Class components use the class keyword, and they must extend React.Component with a render() function.

4.4 VS Code Extension

• ES7+ React/Redux/React-Native/JS snippets
• https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
• Generate boilerplate code for React components based on filename
• Commonly used commands:
  • rcc — generate a class component
  • rafce — generate a functional component using arrow function

4.5 React Developer Tools

• Browser extension to inspect React components
• https://react.dev/learn/react-developer-tools
• Components tab:
  • Inspect component hierarchy
  • Monitor component properties
• Profiler tab:
  • Inspect which component re-rendered
  • Monitor duration of re-renders