Reactでライブラリをインポートする方法（初心者向け）

Reactでライブラリをインポートする方法（初心者向け）

Reactでは、便利な機能やUI部品を提供するライブラリを簡単に追加して使うことができます。
ここでは、代表的なライブラリを例にして、インポートの基本を解説します。

---

ステップ1: ライブラリをインストールする

まずは、使いたいライブラリをプロジェクトに追加します。
以下のコマンドをターミナルで実行してください。

npm install dayjs

これは「dayjs」という日付操作のライブラリをインストールしています。

---

ステップ2: ライブラリをインポートする

Reactのファイルで、インポート文を使ってライブラリを読み込みます。

import dayjs from "dayjs";

これで、dayjsを使えるようになりました。

---

ステップ3: 実際に使ってみる

以下は、dayjsで現在の日付を表示する簡単な例です。

import React from "react";
import dayjs from "dayjs";

const Today = () => {
  const now = dayjs().format("YYYY年MM月DD日");
  return <p>今日は {now} です</p>;
};

export default Today;

このコンポーネントを表示すれば、今日の日付が画面に表示されます。

---

まとめ

1. npm install ライブラリ名 でライブラリを追加
2. import ライブラリ名 from "パッケージ名" でインポート
3. 実際に使ってみて動作確認

Reactではたくさんの便利なライブラリが使えるので、まずは簡単なものから試してみましょう！