Wednesday, September 9, 2020

Class component

 How you all are doing!!

In previous blog we have seen our first react practical. Where we have created a component using class and render it to index.js file.

There are two ways to create components through class component we have already seen and functional component.

Class component

import React from "react";

//this is how you write class and extend it

class App extends React.Component {

/*if you don't mention constructor it is automatically added by babel
so you can use state without constructor*/

//if you have contructor in class don't forget to mention super

    constructor()
        {
        super();

/*using this keyword before or without the super cannot be allowed.
Because this keyword is unnitialized if super is not called.*/

        this.state={buttontext:"click"};
        }
//do mention render function it will return html to be viewed.
  render() {

//return contain only the view

//do add single parent for all views in return like div below
    return (
      <div>
        <button>{this.state.buttontext}</button>
      </div>
    );
  }
}

//do mention export default and class name for component accessible.
export default App;

No comments:

Post a Comment