{"id":228185,"date":"2022-10-12T18:52:00","date_gmt":"2022-10-12T15:52:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228185"},"modified":"2022-11-09T01:10:48","modified_gmt":"2022-11-08T22:10:48","slug":"conversion-de-react-createclass-a-react-component","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/conversion-de-react-createclass-a-react-component\/","title":{"rendered":"Conversi\u00f3n de React.createClass a React.Component"},"content":{"rendered":"\n

En mi \u00faltimo art\u00edculo habl\u00e9 sobre parchear versiones anteriores de React para que funcionen en un entorno moderno<\/a>. En este art\u00edculo voy m\u00e1s all\u00e1 y doy una gu\u00eda paso a paso para actualizar un componente React cl\u00e1sico a uno moderno, cambiando la React.createClass<\/code>forma de hacer las cosas al React.Component<\/code>m\u00e9todo moderno y preferido.<\/p>\n

Los archivos que necesitamos estar\u00e1n en las carpetas ‘Original’ y ‘Final’ del directorio de componentes en la soluci\u00f3n GitHub adjunta.<\/p>\n

Obtener archivos de tutoriales de GitHub<\/a><\/p>\n

Nuevamente trabajando con el componente [react-checkbox-list](https:\/\/github.com\/sonyan\/react-checkbox-list)<\/code> de Sony An<\/a> (disponible react-checkbox-list<\/code>en npm<\/a> ). Esta gu\u00eda le muestra paso a paso c\u00f3mo reemplazar la estructura y los m\u00e9todos de un React.createClass<\/code>componente cl\u00e1sico a uno moderno React.Component<\/code>.<\/p>\n

Comenzando con el .jsx<\/code>archivo en la react-checkbox-list<\/code>soluci\u00f3n, primero eliminaremos el .js<\/code>archivo y cambiaremos su nombre para .js<\/code>que los .jsx<\/code>archivos ya no necesiten tener un nombre diferente.<\/p>\n

Eso nos da el siguiente c\u00f3digo de inicio:<\/p>\n

\n'use strict';\nvar React = require('react');\n\nmodule.exports = React.createClass({\n    displayName: 'CheckBoxList',\n\n    propTypes: {\n        defaultData: React.PropTypes.array,\n        onChange: React.PropTypes.func\n    },\n\n    getInitialState: function() {\n        return {\n            data: this.props.defaultData || []\n        };\n    },\n\n    handleItemChange: function(e) {\n        var selectedValues = [],\n            newData = [];\n\n        this.state.data.forEach(function(item) {\n            if(item.value === e.target.value) {\n                item.checked = e.target.checked;\n            }\n            if(item.checked) {\n                selectedValues.push(item.value);\n            }\n            newData.push(item);\n        });\n\n        this.setState({data: newData});\n\n        if(this.props.onChange) {\n            this.props.onChange(selectedValues);\n        }\n    },\n\n    reset: function() {\n        var newData = [];\n        this.state.data.forEach(function(item) {\n            item.checked = false;\n            newData.push(item);\n        });\n\n        this.setState({data: newData});\n    },\n\n    checkAll: function() {\n        var newData = [];\n        this.state.data.forEach(function(item) {\n            item.checked = true;\n            newData.push(item);\n        });\n\n        this.setState({data: newData});\n    },\n\n    render: function() {\n        var options;\n\n        options = this.state.data.map(function(item, index) {\n            return (<div key={'chk-' + index} className=\"checkbox\">\n                    <label>\n                        <input\n                            type=\"checkbox\"\n                            value={item.value}\n                            onChange={this.handleItemChange}\n                            checked={item.checked? true: false} \/> {item.label}\n                    <\/label>\n                <\/div>\n            );\n        }.bind(this));\n\n        return (<div>\n                {options}\n            <\/div>\n        );\n    }\n});\n<\/code><\/pre>\n
Convertir el componente<\/h2>\n
Al intentar cargar este c\u00f3digo, el primer error que obtenemos esUncaught Error: Module build failed: SyntaxError: The @jsx React.DOM pragma has been deprecated as of React 0.12<\/code><\/p>\n
Error no detectado: Fall\u00f3 la construcci\u00f3n del m\u00f3dulo: SyntaxError: el pragma @jsx<\/a> React.DOM ha quedado obsoleto a partir de React 0.12<\/p>\n
Es bastante simple corregir esto. Simplemente elimine la l\u00ednea \/** @jsx React.DOM *\/<\/code>de la parte superior del documento.<\/p>\n
Ahora obtenemos el mismo error Uncaught TypeError: Cannot read property 'array' of undefined<\/code>que en el tutorial de aplicaci\u00f3n de<\/a> parches<\/a>. Esto se debe a que React.propTypes qued\u00f3 obsoleto en la versi\u00f3n 15.50 de React, as\u00ed que seg\u00fan ese tutorial, contin\u00fae e instale el paquete PropTypes con el comando a trav\u00e9s de npm. Importaremos esto en nuestro paquete m\u00e1s tarde.[React.createClass](https:\/\/wholesomecode.ltd\/blog\/broken-react-createclass-component-lets-fix-it\/)<\/code><\/a><\/p>\n
npm install --save prop-types\n<\/code><\/pre>\n
Lo que sigue ahora es una revisi\u00f3n completa del c\u00f3digo base, por lo que no podemos actualizar y corregir un error como lo hicimos anteriormente, por lo que no sabremos si funcion\u00f3 hasta el final. \u00a1Cintur\u00f3n de seguridad!<\/p>\n
Comencemos reemplazando la React.createClass<\/code>funci\u00f3n declarando un nuevo React.Component<\/code>. Modifique nuestro c\u00f3digo para que se vea como lo siguiente:<\/p>\n
'use strict';\nimport React from 'react';\n\nclass CheckBoxList extends React.Component {\n...\n}\n<\/code><\/pre>\n
Tenga en cuenta que hemos hecho algunas cosas aqu\u00ed:<\/p>\n