ReactJs Steps For Converting a Function to Class

ReactJs Steps For Converting a Function to  Class using ES6

 This is  a step which is used extensively by developers  for converting a function to class. To convert function to a class you will need to follow simple steps  and the steps we will discuss so you can easily convert it to a class from a function


Here are the steps below

Step 1)
 first you to specify a class followed by class name, here className can be anything what you want to define, but keep in mind it should be related to the functionality so it is easy to understand

Later we use a extend keyword, extend is a property of inheritance in OOPS concept and here we use to extend to React.Component
 
Example
class ClassName extends React.Component {
}


Step 2) Inside the class we will create a new method called as render()


Example:

class ClassName extends React.Component {
      render() {
      }
}


Step 3)
Inside the render method we will write the function definition or the function content what its supposed to do , here we will call a return method and inside it will return a Welcome message to the viewer

Example

class ClassName extends React.Component {
      render() {
            return (
                  <h1> Welcome to the world of ES6</h1>
            );

      }
}

Comments