Reactのimportの部分でエラーが起きる

Question

ProgateのReactのチュートリアルを自分のPCで実行しようとしました。

https://qiita.com/rspmharada7645/items/25c496aee87973bcc7a5
こちらの記事を参考に、Reactの環境を作りました。

このときに、自動で生成されたsrcファイルの中身は消しました。

この後、index.jsとApp.jsを作成し、実行したのですが、ブラウザに

Module not found: Error: Cannot find file: 'App.js' does not match the corresponding name on disk: '.\src\components\app.js'.

とでてきて、実行できません。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

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

import React from 'react';

class App extends React.component {
  constructor(props) {
    super(props);
    this.state = {name: 'にんじゃわんこ'};
  }

  handleClick(name) {
    this.setState({name: name})
  }

  render() {
    return(
      <div>
      <h1>こんにちは、{this.state.name}さん!</h1>
      <button onClick={() => {this.handleClick('にんじゃわんこ')}}>にんじゃわんこ</button>
      <button onClick={() => {this.handleClick('ひつじ仙人')}}>ひつじ仙人</button>
      </div>
    );
  }
}

export default App;

こちらがコードです。

ディレクトリは、
このようになってます。

色々なワードで検索しましたが、有益な情報はでませんでした...
知ってる方いましたら教えてほしいです

Comments

[Skota11]

タイトルにミスが有りました..
Reactです。

[退会済みユーザー]

編集できるので直してください。

[Skota11]

編集できるとは知りませんでした...
初心者ですみません..

[退会済みユーザー]

どこのだれが作ったか分からない記事を参考にするより、これでやってみてはいかが？ ↓

Reactをはじめる
https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started

https://teratail.com/questions/9ac7s8obcvxfc7

Answer 1

app.js のファイル名を App.js に直しましょう

Comments

[yuki23]

1週間ほどリアクションがありませんが、何かわからないことがありましたか？