React

useContextの解説と使い方

こんにちは! 作者の暇人です。今回は「useContext」を使用してpropsを使って値をバケツリレーしなければいけない構造を作っている人に向けて、コンポーネント間を横断的に値を渡していくような仕組みを実現するために「createContext」と「useContext」の解説と使用例を確認していこうと思います。 1.createContextとuseContextについて 親コンポーネント内で […]

useStateの使い方を学ぶ

こんにちは! 作者の暇人です。 今回はReactのHooksでかなり重要な「useState」の使い方とそれを使って簡単なコンポーネントを作成してみようと思います。 より正確な情報を知りたい方は、公式ドキュメントをご覧ください。 1.useStateとは useStateとは、コンポーネントを一度描画した後も、特定の値を保持して、特定の値が関係している部分のみに再描画をかけることができる仕組みにな […]

ReactでSubmit Buttonを作成する(2.コンポーネント作成編)

こんにちは！ 今回の記事は前回の記事である「ReactでSubmit Buttonを作成する(1.環境作成編)」の続きになります。 まだReactでWebアプリケーションを作成する準備が整っていない方で今回のコンポーネントを作成してみたい方は、こちらの記事から環境を作成されることをお読みください。 それでは早速始めていきましょう！ 1.react-hook-formライブラリをインストールする R […]

ReactでSubmit Buttonを作成する(1.環境作成編)

こんにちは! 作者の暇人です。 今回はReactで送信ボタン(SubmitButton)コンポーネントを作成するための下準備をしていきます。なお今回の環境はReact19以降の環境で作成されていますので、それ以前のバージョンの方はバージョンを19以降にしてください。 また、ボタンを操作不能にしてデータを送信しているようなアニメーションを加えるので、「headless ui」と「heroicons」 […]

ReactでTailwindcss使用してWebアプリケーション開発

今回は最近流行のCSSフレームワーク「TailwindCss」をReactのプロジェクトにインストールして作成する方法を解説します。ぶっちゃけ、「Next.js」のプロジェクトで使用するなら、デフォルトでTailwindCSSを使用するかどうかを聞いてくれるので、使用できるならNext.jsを使用したほうが良いと思います。(あと、便利なライブラリがNext.jsにはあるのですが、それは一番最後に少 […]