react初心者です。
reactでWebサイトの構築をしようとしたのですが、
表示されなくて困ってしまいました。
初歩的なことかもしれませんが
解決方法を教えてください。
APP.jsにコンポーネント(header)に記載した
headerを表示しようとしたのですが、何も表示しません。
直接APP.jsにコンポーネント(header)の内容を記載すると表示するため、
inportの使い方がおかしいのかな～。。
APP.js
index.jsx
header.jsx
1件目の方が回答されている通り、
どのようにReactアプリケーションを作成されたか見えない部分はありますが、
以下コマンドで作成されたのではないかな～～と思っているところです。
npx create-react-app XXXX
おそらくと言っているのは、私がReactを多少は触っていること・また共有いただいたコードを元に、推測したためです。
今回のような質問の場合は、以下の情報があると、
回答する方への気遣いがなされた質問になると思います。
不鮮明な部分はあるので、
以下の内容にそって修正したから、必ず動くというわけでないですが、
気になった点を共有します。
index.jsxの記述
import { XXXXX } from 'YYYY';という記述は何度も登場しますが、先頭がexportとなっていて、fromも記述するような構造で記述するような実装は、出てこないはずです。。
日本語っぽく言えば、YYYYから(from)XXXXXXをインポート(import)する、なので。
またindex.jsに、headerコンポーネントのimportの記述？と思いますが、いらないと思います。
header.jsxがある階層とコンポーネント名
App.jsに記述されている内容を見ると、
from './components'
となっています。srcフォルダの下に、componentsフォルダがあって、その中にindex.jsxを作成したと受け取りました。
headerという単語は、htmlタグとしても存在するので、少し名前は変えた方がいいかもしれません。例えばですが、以下のように。
const HeaderComp = () => {
return (略)
}
export default HeaderComp;
以上です。頑張ってください。
@gallantsummerwind
Questioner
安易に決めたコンポーネント名(header)が原因だったのかもしれません。
ご指摘の通り、「header.jsx」のコンポーネント名などを
「HeaderComp」の名前にすることで、解決しました。
1件目のご指摘でもありましたが、具体的な情報を記載して
質問できるにしたいと思います。
ありがとうございました！
横入りしてすみません、
<header>ヘッダー中身</header> のように、JSX の式の中に小文字から始まるタグ名を書くと、コンポーネント名ではなく、HTML 標準の header 要素として描画されてしまいます。
これは、「header という名称は避けたほうが良い」といった推奨事項ではなく、厳密なルールです。
なので、コンポーネントを作成する場合には、上記の HeaderComp のように、大文字から始める名前にしなければなりません。
With
function Profile() { }you define a JavaScript function with the nameProfile.Pitfall
React components are regular JavaScript functions, but their names must start with a capital letter or they won’t work!
これは、「header という名称は避けたほうが良い」といった推奨事項ではなく、厳密なルールです。
失礼しました、補足ありがとうございます！
解決方法を教えてください。
質問者さんの開発環境や、具体的にどのように react アプリを構築したかなどの情報が一切ないので分かりません。
まずは、mdn web docs の記事「React をはじめる」（URL 下記）に従ってやってみませんか？
その上で問題に遭遇したら、その記事のどこのステップでどういう問題が出ているか書いてもらうのが良さそうです。
解決したのであれば、質問をクローズするといいですよ。
@gallantsummerwind
Questioner
ありがとうございます。
クローズしました！
