Learn React Hooks

Defining the class component

We first write our app as a traditional class component, as follows:

1. First, we remove all code from the src/App.js file.
2. Next, in src/App.js, we import React:

import React from 'react'     

3. We then start defining our own class component—MyName:

class MyName extends React.Component {

4. Next, we have to define a constructor method, where we set the initial state object, which will be an empty string. Here, we also need to make sure to call super(props), in order to let the React.Component constructor know about the props object:

    constructor (props) {        super(props)        this.state = { name: '' }    }

5. Now, we define a method to set the name variable, by using this.setState. As we will be using this method to handle input ...