{"id":228516,"date":"2022-10-12T18:54:00","date_gmt":"2022-10-12T15:54:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228516"},"modified":"2022-11-09T02:48:49","modified_gmt":"2022-11-08T23:48:49","slug":"convertendo-react-createclass-para-react-component","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/convertendo-react-createclass-para-react-component\/","title":{"rendered":"Convertendo React.createClass para React.Component"},"content":{"rendered":"\n

No meu \u00faltimo artigo falei sobre como corrigir vers\u00f5es mais antigas do React para funcionar em um ambiente moderno<\/a>. Neste artigo vou mais longe e dou um guia passo a passo para atualizar um componente React cl\u00e1ssico para um moderno, mudando a React.createClass<\/code>maneira de fazer as coisas para o m\u00e9todo moderno e preferido React.Component<\/code>.<\/p>\n

Os arquivos que precisamos estar\u00e3o nas pastas ‘Original’ e ‘Final’ do diret\u00f3rio de componentes na solu\u00e7\u00e3o GitHub que acompanha.<\/p>\n

Obter arquivos de tutorial do GitHub<\/a><\/p>\n

Novamente trabalhando com o componente [react-checkbox-list](https:\/\/github.com\/sonyan\/react-checkbox-list)<\/code> da Sony An<\/a> (dispon\u00edvel como react-checkbox-list<\/code>em npm<\/a> ). Este guia mostra passo a passo como substituir a estrutura e os m\u00e9todos de um React.createClass<\/code>componente cl\u00e1ssico por um moderno React.Component<\/code>.<\/p>\n

Come\u00e7ando com o .jsx<\/code>arquivo na react-checkbox-list<\/code>solu\u00e7\u00e3o, primeiro vamos excluir o .js<\/code>arquivo e renome\u00e1-lo, .js<\/code>pois os .jsx<\/code>arquivos n\u00e3o precisam mais ser nomeados de forma diferente.<\/p>\n

Isso nos d\u00e1 o seguinte c\u00f3digo inicial:<\/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
Convertendo o componente<\/h2>\n
Ao tentar carregar este c\u00f3digo, o primeiro erro que recebemos \u00e9Uncaught Error: Module build failed: SyntaxError: The @jsx React.DOM pragma has been deprecated as of React 0.12<\/code><\/p>\n
Erro n\u00e3o capturado: Falha na compila\u00e7\u00e3o do m\u00f3dulo: SyntaxError: O pragma @jsx<\/a> React.DOM foi preterido a partir do React 0.12<\/p>\n
\u00c9 simples o suficiente para corrigir isso. Basta remover a linha \/** @jsx React.DOM *\/<\/code>da parte superior do documento.<\/p>\n
Agora temos Uncaught TypeError: Cannot read property 'array' of undefined<\/code>o mesmo erro do tutorial de<\/a> patch<\/a>. Isso ocorre porque o React.propTypes foi preterido na vers\u00e3o 15.50 do React, ent\u00e3o de acordo com esse tutorial, v\u00e1 em frente e instale o pacote PropTypes com o comando via npm. Vamos importar isso para o nosso pacote mais 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
O que se segue agora \u00e9 uma revis\u00e3o completa da base de c\u00f3digo, ent\u00e3o n\u00e3o podemos atualizar e corrigir um erro como fizemos anteriormente, ent\u00e3o n\u00e3o saberemos se funcionou at\u00e9 o final. Preparar-se!<\/p>\n
Vamos come\u00e7ar substituindo a React.createClass<\/code>fun\u00e7\u00e3o declarando um novo React.Component<\/code>. Altere nosso c\u00f3digo para que fique assim:<\/p>\n
'use strict';\nimport React from 'react';\n\nclass CheckBoxList extends React.Component {\n...\n}\n<\/code><\/pre>\n
Observe que fizemos algumas coisas aqui:<\/p>\n