잡히지 않은 ReferenceError : createReactClass가 정의되지 않았습니다.

Question

watchify 및 babelify을 사용하여 ReactJS에 대한 자습서를 따르십시오. 나는 react@16 버전을 사용하며 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 파일이 아닐 수 있습니다. 당신 반응에서 구성 요소 클래스를 확장 할 상태 구성 요소의

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'));