【初心者向け】Reactのコンポーネントの作り方

nao

最近Reactを学び始めたんだけどコンポーネントの作り方を教えてほしい！

こんな疑問にお答えします。

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の動画も上げているのでもしよかったら

みてみてください！