INTRO

This article will talk about the key differences between class and functional based components. In this article I will go over class based components, the next part will be on functional based components so stay tuned😎 .

NOTE: This article assumes some knowledge of react😅.

CLASS - BASED COMPONENTS

SYNTAX

There is an immediate and striking difference between the two components 'syntaxwise'. A class based component extends React.Component which has a render method.

Take this as an example:

// Import react and destructure  React.Component from react 
import React,{Component} from "react";

// Define the class
class MyClass extends Component {
 render() {
    return (
      <div className="username">
        <h1>Hello there!</h1>
      </div>
    );
  }
}
};
// Export the class for use in other components e.g App
export default MyClass;

In the example above we import React.Component and we create our class using the class keyword. The class extends the React.Component . In the class we have a render() method which is used to render the html or jsx we return to the DOM.

STATE

Another difference between functional and class based components is the direct access to state.

What is state ? State is an object that represents the part of a react app that can change. In class based components we can directly access the state object using the this keyword as seen in the example below.

import React, { Component } from "react";

class MyClass extends Component {
  state = {
     username :  'regedit-msc',
  };

  render() {
    return (
      <div className="username">
        <h1>Check out my github profile @{this.state.username}</h1>
      </div>
    );
  }
}

export default  MyClass;

We directly access the state using the this keyword. this refers to the class in this case MyClass. We only get to use this mostly in class components using it to access state or props in functional based components will not work.

PROPS

When we pass down props to a class component we get access to it through this.props . See the example below:

// MyClass.js

import React, { Component } from "react";

class MyClass extends Component {
  const { username } = this.props;
  render() {
    return (
      <div className="username">
        <h1>Check out my github profile @{ username }</h1>
      </div>
    );
  }
}

export default  MyClass;

// App.js

import React, { Component } from "react";
import MyClass from "./MyClass";

class App extends Component {

 state = {
    username:  'regedit-msc',
  };

  render() {
    return (
      <div className="App"> 
        < MyClass username={this.state.username} />
      </div>
    );
  }
}

export default  App;

Here we pass props from the App component to the MyClass component and access it from the MyClass component using the props object. We get the data using this.props keyword.

LIFECYCLE METHODS

The lifecycle method componentDidMount is called after the first render completes. We can use componentDidMount in class based components but not in functional based components ,we instead use a useEffect hook which will be discussed later.

import React from 'react';

class MyClass extends React.Component {

 componentDidMount() {
   console.log("The component just we rendered just mounted, Hooray!");
 }

 render() {
   return <h1>Hello, World</h1>;
 }
}

After the 'Hello, World' is rendered on the screen the componentDidMount() will run and we will get the message printed on the console.

CONTEXT

When we talk context in react we mean sharing data between components without necessarily passing it down from one to another as props. Take this example.


// nameContext.js
import React, { Component, createContext } from 'react';

export const nameContext = createContext();

class nameContextProvider extends Component {
  state = {
   username: 'regedit-msc',
  }
  render() { 
    return (
      <nameContext.Provider value={{...this.state}}>
        {this.props.children}
      </nameContext.Provider>
    );
  }
}

export default nameContextProvider;

// App.js

import React from 'react';
import MyClass from './components/MyClass';
import nameContextProvider from './contexts/nameContext';

class App extends React.Component {
render(){ 
 return (
    <div className="App">
      <nameContextProvider>
        <MyClass />
      </nameContextProvider>
    </div>
  );
}

export default App;

// MyClass.js

import React, { Component } from 'react';
import { nameContext } from '../contexts/nameContext';

class MyClass extends Component {

// initialize the context
  static contextType = nameContext;
  render() { 
// Get username from context remember it was passed to the provider
// as a value
    const { username } = this.context;
    return ( 
      <div className="username" >
        <h1> Hi I'm { username }</h1>
      </div>
    );
  }
}

export default MyClass;

Here (nameContext.js), I created a nameContext and passed the username in the state as a value in the provider.

In App.js, I then wrapped the MyClass component with the nameContextProvider class to pass the value i.e username to MyClass .

In MyClass.js I got the username using this.context keyword (of course after importing and initializing the context 😇).

The last thing done was outputting the username in the h1 tag .

If you enjoyed this article, don't forget to leave a reaction. You can leave suggestions and questions in the comment section. 😁

Class Vs Functional Components React 1

INTRO