'Component' is defined but never used

Question

import './App.css';

class App extends Component{

  constructor(props){
    super(props);
    this.state= {
     name:"kaito"
    };
  }

  render(){
    return <div>
      <h1>React</h1>
    </div>
  }
}
  class UserInput extends Component{
constructor(props){
  super(props);
  this.doChange=this.doChange.bind(this)
}
  doChange(event){
    this.input=event.target.value;
  }
   render(){
     return<div>
     <input type ="text" onChange= {this.doChange}/>
     </div>
  }
  }
class UserOutput extends Component{
render(){
 return <div>
   <p></p>
   <p></p>
 </div>
  }
}

export default App;


 Line 19:9:  'UserInput' is defined but never used   no-unused-vars
  Line 33:7:  'UserOutput' is defined but never used  no-unused-vars

このようなエラーが発生しました。
とった策としましては、react.Componentを追加したりしましが、うまく作用することができませんでした。
Componentを複数使いたい場合はどのようにすればよろしいでしょうか？

お忙しい中恐縮ですが、ご教授いただきたいです。

Comments

[otn]

メッセージの意味をどうとらえていますか？

[21212121]

defineしたクラスを他の場所で使っていないからですかね？

Answer 1

Componentを複数使いたい場合はどのようにすればよろしいでしょうか？

<UserOutput>を必要な箇所に書くなどして、使ってください。Reactのコンポーネントは、宣言しただけでは何の動作も起こしません。

Comments

[maisumakun]

（特にシステム上の要求ではないですが、小規模なサブコンポーネントを除いて、基本的に1ファイル1コンポーネントとすることをおすすめします）

[21212121]

ありがとうございました。
理解できました。