こんな疑問にお答えします。
ReactはJavaScriptのフレームワークということは知っていると思いますが
JavaScriptと比べてプログラムを小さな機能ごとの部品に分けて開発をする
コンポーネント指向が主流です。
最近Reactを学習してきた人はまだコンポーネントとして分割するやり方が
わからないと思うので今回はheaderの簡単なサンプルを紹介します。
headerコンポーネント
まずはApp.jsを開いて以下のように追記してください。
App.js function App() { return <div> <Header /> </div>; } export default App;
この時点ではHeaderコンポーネントを作成していないのでエラーになると思います。
次にsrc/components/header/Header.jsxを作成してください。
Header.jsx import React from "react"; export const Header = () => { return ( <div> <header> <h1>header</h1> </header> </div> ); };
拡張子がjsxなのは理由があって
JSX を使うと React 要素をより簡便な形式で作成できます。
JSX は JavaScript を拡張して、UI 要素を記述するのに HTML のようなタグ構文が使えるようにしたものです。
基本的にコンポーネントを作る際には拡張子をJSXにするということを覚えておいてください。
次にもういちどApp.jsに戻って以下のように変更してください。
App.js
import { Header } from "./components/header/Header";
function App() {
return (
<div className="app">
<Header />
</div>
);
}
export default App;
<Header />のコンポーネントは作成しましたが
実際に使用する際にはコンポーネントを読み込まないと使用することができません。
おまけ
先ほどHeader.jsxを書いたと思いますが実はコンポーネントのショートカットがあります。
VsCodeを使用している方はできると思いますが
拡張機能で以下のライブラリが入っていれば
raceというコマンドからファイル名の関数コンポーネントを自動で入力してくれます。
まだ導入していない人は是非導入しましょう。
まとめ
今回はReactのコンポーネントの作り方を解説しました。
今回紹介した作り方が絶対に正しいということはないですが
作り方を忘れてしまったという場合は参考にしていただければ
幸いです。
YoutubeではTypeScriptの動画も上げているのでもしよかったら
みてみてください！