'xxx' is not defined のエラー

Question

ERROR in ./src/index.js

/Users/xxx/jyanken/src/index.js
  45:54  error  'ix' is defined but never used  no-unused-vars
  45:74  error  'idx' is not defined            no-undef
  63:12  error  'propTypes' is not defined      no-undef

✖ 3 problems (3 errors, 0 warnings)

 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js

ERROR in ./src/index.js
Module not found: Error: Can't resolve './Jyanken' in '/Users/xxx/jyanken/src'
 @ ./src/index.js 35:15-35
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
webpack: Failed to compile.

とエラーが出ました。index.jsには

import React,{Component} from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import RaisedButton from 'material-ui/RaisedButton'
import Paper from 'material-ui/Paper'
import './index.css'
import {Tabs,Tab} from 'material-ui/Tabs'
import {Table,TableBody,TableHeader,TableHeaderColumn,TableRow,TableRowColumn} from 'material-ui/Table';
import Jyanken from './Jyanken'

class JyankeGamePage extends Component {
  constructor(props){
    super(props)
    this.jyanken = new Jyanken()
    this.state = {scores:[],status:{},tabIndex:0}
  }

  componentDidMount(){
    this.getResult()
  }

  getResult(){
    this.setState({scores:this.jyanken.getScores()})
    this.setState({status:this.jyanken.getStatuses()})
  }

  pon(te){
    this.jyanken.pon(te)
    this.getResult()
  }

  render(){
    return(
      <MuiThemeProvider>
        <div style={{marginLeft:30}}>
        <Header>じゃんけんポン！</Header>
        <JyankenBox actionPon={(te) => this.pon(te)} />
        <Paper style={{width:400}} zDepth={2}>
        <Tabs value={this.state.tabIndex} onChange={(ix)=>this.tabChange(idx)}>
          <Tab label="対戦結果" value={0}>
            <ScoreList scores={this.state.scores} />
          </Tab>
          <Tab label="対戦成績" value={1}>
            <StatusBox status={this.state.status} />
          </Tab>
        </Tabs>
        </Paper>
        </div>  
      </MuiThemeProvider>

    )
  }
}

const Header =(props) =>(<h1>{props.children}</h1>)
Header.propTypes ={
  children:propTypes.string
}

const StatusBox =(props) =>{
  <Table>
    <TableBody displayRowCheckbox={false}>
      <TableRow displayBorder={false}>
        <TableHeaderColumn>勝ち</TableHeaderColumn><TableRowColumn style={judgmentStyle(1)}>{props.status.win}</TableRowColumn>
      </TableRow>
      <TableRow displayBorder={false}>
        <TableHeaderColumn>負け</TableHeaderColumn><TableRowColumn style={judgmentStyle(2)}>{props.status.lose}</TableRowColumn>
      </TableRow>
      <TableRow displayBorder={false}>
        <TableHeaderColumn>引き分け</TableHeaderColumn><TableRowColumn style={judgmentStyle(0)}>{props.status.draw}</TableRowColumn>
      </TableRow>
    </TableBody>
  </Table> 
 }

StatusBox.propTypes = {
  status:PropTypes.object
} 

const JyankenBox = (props) =>{
  const style = {marginLeft:20}
  return(
    <div style={{marginTop:40,marginBottom:30,marginLeft:30}}>
      <RaisedButton label="グー" onClick={() => props.actionPon(0)} style={style} />
      <RaisedButton label="チョキ" onClick={() => props.actionPon(1)} style={style} />
      <RaisedButton label="パー" onClick={() => props.actionPon(2)} style={style} />
    </div>      
  )
}

JyankenBox.propTypes ={
  actionPon:PropTypes.func
}

const ScoreList = (props) =>(
    <Table>
      <TableHeader adjustForCheckbox={false} displaySelectAll={false} >
      <TableRow>
        <TableRowColumn>時間</TableRowColumn><TableRowColumn>人間</TableRowColumn><TableRowColumn>コンピュータ</TableRowColumn><TableRowColumn>結果</TableRowColumn>
      </TableRow> 
      </TableHeader>
      <TableBody>
        {props.scores.map((score,ix) =><ScoreListItem key={ix} score={score} />)}
      </TableBody>  
    </Table>  
)

ScoreList.propTypes ={
  scores:PropTypes.array
}

const ScoreListItem = (props) =>{
  const teString = ["グー","チョキ","パー"]
  const judgmentString = ["引き分け","勝ち","負け"]
  const dateHHMMSS = (d) => d.toTimeString().substr(0,8)

  return(
      <TableRow style={judgmentStyle(props.score.judgment)}>
        <TableRowColumn>{dateHHMMSS[props.score.created_at]}</TableRowColumn>
        <TableRowColumn>{teString[props.score.human]}</TableRowColumn>
        <TableRowColumn>{teString[props.score.computer]}</TableRowColumn>
        <TableRowColumn>{judgmentString[props.score.judgment]}</TableRowColumn>
      </TableRow> 
  )
}

ScoreListItem.propTypes ={
  score:PropTypes.object
}

const judgmentStyle = (judgment) =>({color:["#000","#2979FF","#FF1744"][judgment]})


ReactDOM.render(
  <JyankeGamePage />,
  document.getElementById('root')
)

と書きました。propTypesは

import PropTypes from 'prop-types'

で定義しているはずなので、なぜエラーが出るのかわかりません。３つのエラーは何が問題でどう直せばいいのでしょうか？

Answer 1

思考停止せずに、Google翻訳でも良いので自分でエラーメッセージを読んで解決するようにしてください。

ix : 定義してるけど、どこでも使ってないよ。
idx : どこにも定義されてないから使えないよ。
propTypes : どこにも定義されてないから使えないよ。（ PropTypes はあるけど）