{"id":228649,"date":"2022-10-12T18:04:00","date_gmt":"2022-10-12T15:04:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228649"},"modified":"2022-11-09T03:32:41","modified_gmt":"2022-11-09T00:32:41","slug":"muunnetaan-react-createclass-react-componentiksi","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/muunnetaan-react-createclass-react-componentiksi\/","title":{"rendered":"Muunnetaan React.createClass React.Componentiksi"},"content":{"rendered":"\n

Edellisess\u00e4 artikkelissani puhuin Reactin vanhempien versioiden korjaamisesta toimimaan nykyaikaisessa ymp\u00e4rist\u00f6ss\u00e4<\/a>. T\u00e4ss\u00e4 artikkelissa menen pidemm\u00e4lle ja annan vaiheittaisen oppaan klassisen React-komponentin p\u00e4ivitt\u00e4miseen nykyaikaiseksi vaihtamalla React.createClass<\/code>asioiden tekeminen nykyaikaiseen ja suositumpaan React.Component<\/code>menetelm\u00e4\u00e4n.<\/p>\n

Tarvitsemamme tiedostot ovat mukana tulevan GitHub-ratkaisun komponenttihakemiston ’Original’ ja ’Final’ kansioissa.<\/p>\n

Hanki opetusohjelmatiedostot GitHubista<\/a><\/p>\n

Taas ty\u00f6skennell\u00e4\u00e4n [react-checkbox-list](https:\/\/github.com\/sonyan\/react-checkbox-list)<\/code> Sony Anin komponentin kanssa<\/a> (saatavana react-checkbox-list<\/code>npm<\/a> ). React.createClass<\/code>T\u00e4m\u00e4 opas n\u00e4ytt\u00e4\u00e4 vaihe vaiheelta, kuinka klassisen komponentin rakenne ja menetelm\u00e4t korvataan modernilla React.Component<\/code>.<\/p>\n

Alkaen ratkaisussa olevasta .jsx<\/code>tiedostosta react-checkbox-list<\/code>, poistamme ensin .js<\/code>tiedoston ja nime\u00e4mme sen uudelleen muotoon, .js<\/code>koska .jsx<\/code>tiedostoja ei en\u00e4\u00e4 tarvitse nimet\u00e4 eri tavalla.<\/p>\n

T\u00e4m\u00e4 antaa meille seuraavan aloituskoodin:<\/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
Komponentin muuntaminen<\/h2>\n
Kun yrit\u00e4t ladata t\u00e4t\u00e4 koodia, ensimm\u00e4inen virhe, jonka saamme, onUncaught Error: Module build failed: SyntaxError: The @jsx React.DOM pragma has been deprecated as of React 0.12<\/code><\/p>\n
Tavoittamaton virhe: Moduulin rakennus ep\u00e4onnistui: SyntaxError: @jsx React.DOM-<\/a> k\u00e4yt\u00e4nt\u00f6 on vanhentunut React 0.12 :sta l\u00e4htien<\/p>\n
T\u00e4m\u00e4 on tarpeeksi yksinkertainen korjata. Poista vain viiva \/** @jsx React.DOM *\/<\/code>asiakirjan yl\u00e4osasta.<\/p>\n
Saamme nyt saman virheen<\/a>Uncaught TypeError: Cannot read property 'array' of undefined<\/code> kuin korjausohjeessa<\/a>. T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 React.propTypes on vanhentunut Reactin versiossa 15.50, joten jatka t\u00e4m\u00e4n opetusohjelman mukaisesti ja asenna PropTypes-paketti komennolla npm:n kautta. Tuomme t\u00e4m\u00e4n pakettiin my\u00f6hemmin.[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
Nyt seuraa koodikannan t\u00e4ydellinen uudistus, joten emme voi p\u00e4ivitt\u00e4\u00e4 ja korjata virhett\u00e4, kuten olemme saaneet tehd\u00e4 aiemmin, joten emme tied\u00e4, onko se toiminut aivan loppuun asti. Kiinni!<\/p>\n
Aloitetaan korvaamalla React.createClass<\/code>funktio ilmoittamalla uusi React.Component<\/code>. Muuta koodiamme niin, ett\u00e4 se n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/p>\n
'use strict';\nimport React from 'react';\n\nclass CheckBoxList extends React.Component {\n...\n}\n<\/code><\/pre>\n
Huomaa, ett\u00e4 olemme tehneet muutamia asioita t\u00e4\u00e4ll\u00e4:<\/p>\n