Reactでコンポーネントを行うときのエラー

Question

前提・実現したいこと

Reactでコンポーネントを行うときのエラー

初心者の質問で恐縮です。
Reactでの学習を行っています。
同じ階層でのJsxファイルからコンポーネントを行うときエラーが出てしまいます。
どのように解決すればよいでしょか？

発生している問題・エラーメッセージ

エラーメッセージ

./src/components/App.jsx
Module not found: Can't resolve './Components/ColorfulMessage' in 'C:\Users\Owner\Desktop\my-app\src\components'

該当のソースコード

ソースコードApp.jsx

import React from "react";

import ColorfulMessage from "./Components/ColorfulMessage";

const App = () => {
  const onClickButton = () => alert();
 
  const contentLadyStyle = {
    color:'pink',
    fontsize:'18px',
  }
  return (   
     <>
    <h1 style={{ color:'red'}}>こんにちは</h1>
   <ColorfulMessage color="blue" message="お元気ですか？" />
    <p style ={contentLadyStyle}>お元気です</p>
    <button onClick={onClickButton}>ボタン</button>
    </>
    );
};

export default App;


ソースコード　ColorfulMessage.jsx
import React from `react`;


const ColorfulMessage = (props) => {
  const contentStyle = {
    color:props.color,
    fontSize:'18px',
  };
  return  <p style ={contentStyle}>{props.message}</p>;

};

export default  ColorfulMessage;

試したこと

相対パスや絶対パスなどについて調べましたが、解決には至らなかったです。

補足情報（FW/ツールのバージョンなど）

Windows 10
エディター　VScode　
環境構築 create-react-appを用いて行った

Comments

[maisumakun]

> 相対パスや絶対パスなどについて調べましたが

App.jsxとColorfulMessageは、それぞれどこのフォルダに置いてあるのですか？

[toshihikoikiru]

返信が遅くなり申し訳ありません。
どちらも、srcの中のcomponentsというフォルダーに置いてあります。

Answer 1

どちらも、srcの中のcomponentsというフォルダーに置いてあります。

でしたら、./Components/ColorfulMessageではなく./ColorfulMessageです。

Comments

[toshihikoikiru]

解決できました。ありがとうございます！！