未知のReferenceError：createReactClassが定義されていません

Question

ReactJSについてのチュートリアルには、watchifyとbabelifyを使用しています。私は​​バージョンを使用しており、私はReact.createReactClassが推奨されていないことを認識しています。私はUncaught ReferenceError: createReactClass is not definedエラーを取り除くために一時的な修正が必要です。

create-react-classパッケージをインストールしました。

{ 
    "main": "index.js", 
    "scripts": { 
    "build": "watchify src/app.js -o public/bundle.js -t [ babelify --presets [ react es2015 ] ]", 
    "server": "cd public; live-server --port=1234 --entry-file=index.html" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-preset-react": "^6.24.1", 
    "babelify": "^8.0.0", 
    "live-server": "^1.2.0", 
    "watchify": "^3.9.0" 
    }, 
    "devDependencies": { 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-stage-3": "^6.24.1", 
    "create-react-class": "^15.6.2", 
    "react": "16.0.0", 
    "react-dom": "16.0.0", 
    "react-scripts": "1.0.16" 
    } 
} 

と私app.jsは、私はcreateReactClassを動作させることができますどのように

const Sidebar = createReactClass({ 
    render(){ 
    let props = this.props; 

    return (<div className='sidebar'> 
     <h2> All Decks </h2> 
     <ul> 
     {props.decs.map((deck, i)=> 
     <li key={i}> {deck.name}</li> 
    )} 
     </ul> 
     { props.addingDeck && <input ref='add'/> } 
    </div>); 
    } 
}); 
ReactDOM.render(<App> 
    <Sidebar decks={[ { name: 'Deck 1' }]} addingDeck={false} /> 
</App>, document.getElementById('root')); 

です：私のpackage.jsonはありますか？ ありがとう

編集：私は "var createReactClass = require('create-react-class');"を使用してインポートできません。ファイルがjsxファイルではない可能性があります。あなたが反応からComponentクラスを拡張したいステートフルなコンポーネントについて

Answer 1

...

import React, {Component} from 'react' 
class Sidebar extends Component { 
    render(){ 
    let props = this.props; 

    return (<div className='sidebar'> 
     <h2> All Decks </h2> 
     <ul> 
     {props.decs.map((deck, i)=> 
     <li key={i}> {deck.name}</li> 
    )} 
     </ul> 
     { props.addingDeck && <input ref='add'/> } 
    </div>); 
    } 
}); 
ReactDOM.render(<App> 
    <Sidebar decks={[ { name: 'Deck 1' }]} addingDeck={false} /> 
</App>, document.getElementById('root'));