Differences between Functional and Class Components

In React, functional components are functions that return JSX, while class components are ES6 classes that extend React.Component.

Syntax:

Definition:
Functional components are functions that return React elements and are simpler to use. On the other hand, class components use JavaScript class syntax and are older, though less used today.

State:
State represents dynamic data that can change over time. In functional components, it's managed with the useState hook, while in class components, it's managed with an internal property called state.

Lifecycle Usage:
Lifecycles control component behavior when they are mounted, updated, or unmounted. In functional components, the useEffecthook is used, while class components have specific methods like componentDidMount andcomponentWillUnmount.

Exercises

Interactive Test 1: Drag and Drop.

Arrastra en el orden correspondiente.

Arrastra las opciones:

MyClassComponent

render

return

Completa el código:

class______extends Component {

______() {

______<h1>Hello, I am a class component.</h1>; }}

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.


import React, { Component } from 'react';

 MyClassComponent extends Component {
   { super(props); }
  this. = { message: 'Hello from class!' };

  () { return <h1>{this.state.message}</h1>; }
}

export default MyClassComponent;

Practical Exercise:

Enunciado:

Componentes de Clase

En React, los componentes de clase extienden React.Component y pueden tener un estado interno. El estado se inicializa en el constructor y puede ser modificado usando el método setState().

Estado: En los componentes de clase, el estado se gestiona dentro del constructor.
Métodos de Clase: Los métodos, como incrementar, pueden ser llamados dentro del componente para modificar el estado.
Render: El método render es obligatorio en componentes de clase y se utiliza para retornar el JSX.

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

class Contador extends React.Component {
  constructor(props) {
    super(props);
    this.state = { conteo: 0 };
  }
  
  incrementar = () => {
    this.setState({ conteo: this.state.conteo + 1 });
  };
  
  render() {
    return (
      <div>
        <h1>Conteo: {this.state.conteo}</h1>
        <button onClick={this.incrementar}>Incrementar</button>
      </div>
    );
  }
}
  
ReactDOM.render(
  <Contador />,
  document.getElementById('root')

What allows a functional component to manage state?

Previous Next

What is the difference between a class and a function? What is the difference between a functional component and a class component? What are class components? What is the difference between a class and a component? React class components React component structure Components for React