tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

【 react 】'Component' is not defined no-undef

コンポーネントを継承したクラスを作る際には
importでコンポーネントそのものをインポートする必要があるようです。

以下は
エラーの内容です。

エラー

f:id:okinawanpizza:20200306201015p:plain 'Component' is not defined no-undef コンポーネントが定義されていない!とお叱りを受けてしまいました。

  1 import React from 'react';
  2 import logo from './logo.svg';
  3 import './App.css';
  4  
  5 
  6 class App extends Component {
  7     render(){
  8         return<div>
  9             <h1>React</h1>
 10             <p>This is sample component.</p>
 11         </div>;
 12     }
 13 }
 14 
 15 export default App;

解決方法

1行目でnode_modulesのreactモジュールから、コンポーネントを読み込む。 import React, { Component } from 'react'

そうすることで初めてAppクラスはコンポーネントを継承することができる。

  1 import React , { Component } from 'react';
  2 import logo from './logo.svg';
  3 import './App.css';
  4  
  5 
  6 class App extends Component {
  7     render(){
  8         return<div>
  9             <h1>React</h1>
 10             <p>This is sample component.</p>
 11         </div>;
 12     }
 13 } 
 14 
 15 export default App;

importがよくわかっていないからのミスなのかな。

すごくシンプルですが、一つ一つの挙動を理解しないと
腑に落ちない点がたくさんありました。おしまい笑