Cómo convertir un componente basado en clases de React en un componente funcional

Introducción

Los Hooks son estables a partir de React v16.8 . La propuesta de Hooks es un intento de abordar varias de las principales preocupaciones que tienen los desarrolladores con React. Básicamente, un Hook es una función especial que te permite “engancharte” a las características de React. Los Hooks son ideales si ya escribiste un componente funcional y te diste cuenta de que necesitas agregarle estado.

Si eres nuevo en Hooks y quieres una descripción general, consulta nuestra introducción a React Hooks .

useStatedeclara una variable de estado para preservar los valores entre llamadas de función. React preserva las variables. useStatesolo toma un argumento que inicializa el valor del estado que estás configurando. Al implementar useStateya no necesitamos this.example, podemos acceder a la variable directamente.

En este tutorial, creará un componente basado en clases escrito previamente y lo convertirá en un componente funcional utilizando useStateHook.

Prerrequisitos

• Opcionalmente, se requiere una instalación de Git válida para clonar el proyecto; consulte Primeros pasos con Git .
• Un entorno de desarrollo local para Node.js. Sigue Cómo instalar Node.js y crear un entorno de desarrollo local .
• Si tienes alguna familiaridad con React, puedes leer nuestra serie Cómo programar en React.js .

Este tutorial fue verificado con Node v16.4.0, npmv7.20.3, reactv17.0.2, react-domv17.0.2, react-scriptsv4.0.3, bootstrapv4.6.0 y reactstrapv8.9.0.

Paso 1: Configuración del proyecto

Este tutorial se basa en un código de inicio. En el código de inicio, instalamos la última versión de reacty, react-domasí como también de Reactstrap, para facilitar el formato.

El componente consta de un formulario con campos para emaily password. Cuando se envía el formulario, los valores se registran en la consola.

Primero, abre tu terminal y navega hasta tu directorio de trabajo. Luego, clona el repositorio:

git clone https://github.com/do-community/convert-class-to-hook

A continuación, navegue hasta el nuevo directorio del proyecto:

cd convert-class-to-hook

Luego, instala las dependencias del paquete:

npm install

Tómese un momento para familiarizarse con el ClassBasedForm.jscomponente actual ubicado en el componentsdirectorio.

fuente/componentes/ClassBasedForm.js

import React from 'react'import {  Form, FormGroup, Input,  Label, Col, Button,} from 'reactstrap'export default class ClassBasedForm extends React.Component {  constructor(props) {    super(props)    this.state = {      email: '',      password: '',    }    this.handleSubmit = this.handleSubmit.bind(this);  }  handleSubmit(e) {    e.preventDefault();    console.log(this.state);  }  render() {    return (      Form onSubmit={ this.handleSubmit }        h1Class-Based Form/h1        FormGroup row          Label for="exampleEmail" sm={ 2 }Email/Label          Col sm={ 8 }            Input              type="email"              name="email"                           placeholder="email"              value={ this.state.email }              onChange={ (event) = this.setState({ email: event.target.value }) }            /          /Col        /FormGroup        FormGroup row          Label for="examplePassword" sm={ 2 }Password/Label          Col sm={ 8 }            Input              type="password"              name="password"                           placeholder="password"              value={ this.state.password }              onChange={ (event) = this.setState({ password: event.target.value })}            /          /Col        /FormGroup        FormGroup check row          Col sm={ { size: 'auto', offset: 8 } }            ButtonSubmit/Button          /Col        /FormGroup      /Form    )  }};

Por último, verifique su instalación ejecutando la aplicación:

npm start

Abra la aplicación en el navegador. Ingrese los valores de correo electrónico y contraseña y envíe el formulario.

En este punto, tienes un componente basado en clases que funciona. Ninguno de estos comportamientos debería cambiar al convertir el componente basado en clases en un componente funcional.

Paso 2: Creación de un componente funcional

En esta sección, creará un Formcomponente adicional en la componentscarpeta. Será un FunctionBasedForm.jsarchivo. Usaremos este componente para crear un formulario idéntico usando el useStateHook.

Tener el componente basado en clases y el nuevo componente funcional uno al lado del otro le permitirá comparar las dos implementaciones.

Primero, importaremos React y crearemos una variable de función llamada FunctionBasedFormque devuelva un texto. Asegúrate de exportar esta función.

fuente/componentes/FunctionBasedForm.js

import React from 'react';const FunctionBasedForm = () = {  return (    h1Function Based Form/h1  )};export default FunctionBasedForm;

Compare esto con la class ClassBasedForm extends React.Component { ... }declaración utilizada en ClassBasedForm.js.

A continuación, agregará el nuevo componente a App.js. Ábralo App.jsen su editor de código.

Por ahora, comente la ClassBasedFormimportación anterior.

Importa el FunctionBasedFormcomponente. Reemplaza el componente anterior por el nuevo FunctionBasedForm /en la returndeclaración.

fuente/App.js

import React, { Component } from 'react';import { Container } from 'reactstrap';// import ClassBasedForm from './components/ClassBasedForm';import FunctionBasedForm from './components/FunctionBasedForm';import Logo from './assets/alligator-logo2.svg';import './App.css';class App extends Component {  render() {    return (      div className="App"        img src={ Logo } alt="alligator.io logo" /        Container          FunctionBasedForm /        /Container      /div    );  }}export default App;

Guarde los cambios y ejecute la aplicación. Luego, acceda localhost:3000en el navegador a:

La aplicación mostrará el texto del nuevo componente.

Paso 3: Agregar estado para emailypassword

En nuestro ClassBasedForm.jscomponente original, inicializamos nuestro estado mediante un constructor. Ya no necesitamos inicializar el estado en un componente de clase típico, ¡ni tampoco en el caso de los ganchos! Consideremos el siguiente ejemplo.

La mayoría de nosotros estamos familiarizados con la inicialización del estado de la siguiente manera:

constructor(props) {  super(props);  this.state = {    email: '',    password: '',  };}

Desde React 16, ya no necesitamos un constructor. El primero se convierte en:

state = {  email: '',  password: '',};

Ahora, en un componente funcional , podemos usar ganchos. Podemos inicializar el estado y el definidor relacionado al comienzo de nuestra función. Esto podría eliminarnos varias líneas de código. Así es como inicializaríamos las variables de estado en nuestro nuevo componente.

const [email, setEmail] = useState('');const [password, setPassword] = useState('');

Analicemos una de las líneas anteriores.

const [ email, setEmail] = useState('');

• const:Crea una variable tanto para nuestro estado como para el establecedor de variables de estado asociado.
• email:Inicializa y declara nuestra primera variable email.
• setEmail: Inicializa la función setter asociada a la variable email. Aunque pueda parecer redundante, useStatesolo está pensada para usarse con un único valor.
• useState(''):Declara que la variable emailcomienza como una cadena vacía.

Ahora, vuelva a visitar FunctionBasedForm.jssu editor de código.

Copie el código ClassBasedForm.jsy elimine las funciones, los controladores de clic y las variables de estado.

A continuación, agréguelo { useState }a su importación de React. Además, agregue las variables de estado definidas en la sección anterior.

fuente/componentes/FunctionBasedForm.js

import React, { useState } from 'react';import {  Form, FormGroup, Input,  Label, Col, Button,} from 'reactstrap'const FunctionBasedForm = () = {  const [email, setEmail] = useState('');  const [password, setPassword] = useState('');  return (    Form      h1Function Based Form/h1      FormGroup row        Label for="exampleEmail" sm={ 2 }Email/Label        Col sm={ 8 }          Input            type="email"            name="email"            id="exampleEmail"            placeholder="email"          /        /Col      /FormGroup      FormGroup row        Label for="examplePassword" sm={ 2 }Password/Label        Col sm={ 8 }          Input            type="password"            name="password"            id="examplePassword"            placeholder="password"          /        /Col      /FormGroup      FormGroup check row        Col sm={ { size: 'auto', offset: 8 } }          ButtonSubmit/Button        /Col      /FormGroup    /Form  )};export default FunctionBasedForm;

Guarde los cambios y visite la aplicación en su navegador.

En este punto, el componente funcional es visualmente idéntico al componente basado en clases.

Paso 4: Agregar funcionalidad para onChangeyhandleSubmit

Ahora revisemos nuestras funciones para utilizar Hooks.

Revisemos cómo actualizamos el estado en nuestro componente basado en clases:

onChange={ (event) = this.setState({ email: event.target.value })

Con los ganchos, ya no necesitamos thiso this.setState()ya estamos iniciando nuestras variables de estado y adjuntando un establecedor.

Dado que hay dos variables, vamos a utilizar una función en línea para llamar al definidor que iniciamos useStatepara cada entrada. También agregaremos nuestro valor nuevamente sin el thisprefijo.

Para el campo de correo electrónico:

Input  type="email"  name="email"   placeholder="email"  value={ email }  onChange={ event = setEmail(event.target.value) }/

Para el campo de contraseña:

Input  type="password"  name="password"   placeholder="password"  value={ password }  onChange={ event = setPassword(event.target.value) }/

Ahora reescribamos nuestra handleSubmitfunción.

Así es como se escribió anteriormente la función:

handleSubmit(e) {  e.preventDefault();  console.log(this.state);}

Nota: En React 16, si escribe esto como una función de flecha, no necesitará vincularla en el constructor.

Ahora necesitamos crear una constpara la función. Nuevamente evitamos la funcionalidad predeterminada, establecemos las variables y console.loglas…

const handleSubmit = e = {  e.preventDefault();  console.log(email);  console.log(password);}

Ahora podemos agregar nuestra handleSubmitfunción a onSubmitnuestro formulario.

Así es como debería verse tu nuevo gancho funcional:

fuente/componentes/FunctionBasedForm.js

import React, { useState } from 'react'import {  Form, FormGroup, Input,  Label, Col, Button,} from 'reactstrap'const FunctionBasedForm = () = {  const [email, setEmail] = useState('');  const [password, setPassword] = useState('');  const handleSubmit = event = {    event.preventDefault();    console.log(email);    console.log(password);  }  return (    Form onSubmit={ handleSubmit }      h1Function Based Form/h1      FormGroup row        Label for="exampleEmail" sm={ 2 }Email/Label        Col sm={ 8 }          Input            type="email"            name="email"                       placeholder="email"            value={ email }            onChange={ event = setEmail(event.target.value) }          /        /Col      /FormGroup      FormGroup row        Label for="examplePassword" sm={ 2 }Password/Label        Col sm={ 8 }          Input            type="password"            name="password"                       placeholder="password"            value={ password }            onChange={ event = setPassword(event.target.value) }          /        /Col      /FormGroup      FormGroup check row        Col sm={ { size: 'auto', offset: 8 } }          ButtonSubmit/Button        /Col      /FormGroup    /Form  )};export default FunctionBasedForm;

Guarde los cambios y visite la aplicación en su navegador.

Agregue algunos valores a su formulario y use el botón Enviar . Abra las herramientas para desarrolladores y muestre los mensajes de la consola. Se mostrarán los valores de emaily .password

Conclusión

En este tutorial, construyó sobre un componente basado en clases escrito previamente y lo convirtió en un componente funcional usando useStateHook.

Continúa tu aprendizaje con Cómo aplicar React Hooks en un proyecto React .