¿Cómo agregar un componente Statefull sin clase de constructor en React?

Generalmente, establecemos el estado inicial del componente dentro de la clase constructora y cambiamos el estado usando el método setState. Básicamente, en React, escribimos un código de aspecto HTML llamado JSX. JSX no es un código JavaScript válido, pero para facilitar la vida del desarrollador, BABEL asume toda la responsabilidad de convertir JSX en un código JavaScript válido y permitir que los desarrolladores escriban código en una sintaxis similar a HTML. De manera similar, el estado no se puede inicializar sin la clase de constructor, cuando inicializamos el estado fuera de la clase de constructor nuevamente, Bable lee la sintaxis y comprende que es necesario crear un constructor dentro de la clase y hacer todo el trabajo duro requerido detrás de escena. Esto se llama una propuesta de propiedad de clase.

Sintaxis: inicializa el estado fuera de la clase constructora usando la sintaxis.

state = {stateName1:stateValue1, 
         stateName2:stateName2, 
         ....... 
         stateNamek:stateValuek}

Ejemplo 1: este ejemplo ilustra cómo clasificar la propuesta de propiedad para inicializar el estado sin constructor 

índice.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(<App />, document.querySelector('#root'))

Nombre de archivo – App.js

import React, { Component } from 'react'
 
class App extends Component {
   
  // The class property proposal
  // The state initialization without
  // constructor class
  state = {msg : 'Hi, There!'}
 
  handleClick(){
    // Changing state
    this.setState({msg : 'Welcome to the React world!'})
  }
   
  render(){
    return (
      <div>
        <h2>Message :</h2>
         
 
 
<p>{this.state.msg}</p>
 
 
 
         
        {/* Set click handler */}
        <button onClick={() => this.handleClick()}>
          Click here!
        </button>
      </div>
    )
  }
}
 
export default App

Producción:

Ejemplo 2: este ejemplo ilustra cómo clasificar la propuesta de propiedad para inicializar el estado sin constructor 

índice.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(<App />, document.querySelector('#root'))

Aplicación.js:

import React, { Component } from 'react'
 
class App extends Component {
  static defaultProps = {
    courseContent : [
      'JSX', 'React Props', 'React State',
      'React Lifecycle Methods', 'React Event Handlers',
      'React Router', 'React Hooks', 'Readux',
      'React Context'
    ]
  }
 
  // The class property proposal
  // The state initialization without
  // constructor class
  state = {msg : 'React Course', content:''}
 
  renderContent(){
    return (
      <ul>
        {this.props.courseContent.map(content => (
          <li>{content}</li>
        ))}
      </ul>
    )
  }
 
  handleClick(){
    //changing state
    this.setState({
      msg : 'Course Content',
      content : this.renderContent()
    })
  }
   
  render(){
    return (
      <div>
        <h2>Message :</h2>
         
 
 
<p>{this.state.msg}</p>
 
 
 
         
 
 
<p>{this.state.content}</p>
 
 
 
         
        {/* set click handler */}
        <button onClick={() => this.handleClick()}>
          Click here to know contents!
        </button>
      </div>
    )
  }
}
 
export default App

Producción: