ReactJS | Class Based Components

Class-based components are the bread and butter of most modern web apps built in ReactJS. These components are simpl classes (made up of multiple functions that add functionality to the application). All class-based components are child classes for the Component class of ReactJS.

  • Example: Program to demonstrate the creation of class-based components.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react'
      
    class Beginning extends React.Component
    {
        render(){
              return <h1>GeeksForGeeks</h1>;
        }
    }
      
    export default Beginning;

    chevron_right

    
    

  • Output:
  • Example: Once a component is declared, it can be used in other components. Program to demonstrate the use of class-based components in other components.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react'
      
    class Sample extends React.Component {
    render()
    {
    return (
    <h1>A Computer Science Portal For Geeks</h1>
    );
    }
    }
      
    class componentExample extends React.Component
    {
        render()
        {            
        return (
        <Sample/>
        );
        }
    }
      
    export default componentExample;

    chevron_right

    
    

  • Output:

The main feature of class-based components that distinguish them from functional components is that they have access to a state which dictates the current behavior and appearance of the component. This state can be modified by calling the setState() function. One or more variables, arrays, or objects defined as part of the state can be modified at a time with the setState() function.

  • Example: Program to demonstrate the use of state in class-based components.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react'
        
    class stateExample extends React.Component
    {
     constructor(props) {
      super(props);
      this.state = {change: true};
    }
        render()
        {            
        return (
        <div>
        <button onClick = {() => {this.setState(
          { change: !this.state.change})}}>
             Click Here!
        </button>
        {this.state.change?
          <h1>Welcome to GeeksforGeeks</h1>:
          <h1>A Computer Science Portal for Geeks</h1>}
        </div>
        );
        }
    }
       
    export default stateExample;

    chevron_right

    
    

  • Output:

Data is passed to other components with the help of props. Props work in a similar manner for all components in ReactJS – be they class-based or functional. Props are always passed down from the parent component to the child component. ReactJS does not allow a component to modify its own props as a rule. The only way to modify the props is to change the props being passed from the parent component to the child component. This is generally done by passing a reference to a function in the parent component, which changes the props being passed to the child component.



  • Example: Program to demonstrate the use of props in class-based components.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react'
       
    class Pass extends React.Component {
    render()
    {
    return(
    <h1>{this.props.data}</h1>
    );
    }
    }
        
    class propsExample extends React.Component
    {
     constructor(props) {
      super(props);
      this.state = {change: true};
    }
        render()
        {            
        return (
        <div>
        <button onClick = {() => {this.setState(
          { change: !this.state.change})}}>
          Click Here!
        </button>
        {this.state.change?<Pass data="Welcome to GeeksforGeeks"/>:
        <Pass data="A Computer Science Portal for Geeks"/>}
        </div>
        );
        }
    }
       
    export default propsExample;

    chevron_right

    
    

  • Output:

Class-based components have access to the lifecycle functions like componentWillMount(), componentDidMount(),componentWillReceiveProps(),componentWillUpdate(), shouldComponentUpdate(),render() and componentWillUnmount();. These lifecycle functions are called at different stages of the lifecycle and are used for a variety of purposes like changing the state or doing some work (like fetching data from an external API). They are also referred to as lifecycle hooks.

  • Example: Program to demonstrate the use of lifecycle hooks.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react'
        
    class lifecycleExample extends React.Component
    {
     constructor(props) {
      super(props);
      this.state = {text: "Welcome!"};
    }
       
     componentWillMount() {
       this.setState({
        text: "GeeksforGeeks"
      });
    }
       
        render()
        {            
        return (
        <h1>
          {this.state.text}
        </h1>
        );
        }
    }
       
    export default lifecycleExample;

    chevron_right

    
    

  • Output:

Class-based components are slightly slower than their functional counterparts. The difference is very small and is almost negligible for smaller web apps – though the performance difference increases when the number of components in the app increases. Moreover, class-based components involve a lot more coding on the programmer’s part, making them slightly more inefficient to use.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.