React
【React】useReducerを使って四則演算の結果を表示するアプリ作成方法
ReactのuseReducerを使って四則演算の結果を表示するアプリの作り方を紹介します。 数字を変更したときも、四則演算のタイプを変更したときもリアルタイムで計算結果が変わる簡単なアプリです。 ReactのuseRe…
CATEGORY
React
Reactに関する基礎、実装例、トラブル解決の記事をまとめています。
50ARTICLES
React
【React】useStateとuseReducerの違いとuseReducerの使い方と使い所
ReactのuseStateとuseReducerの違いとuseReducerの使い方を紹介します。 useStateとuseReducerの違い まずは簡単なボタンを作成して、数字をカウントアップするときの書き方の違い…
React
【React】他のコンポーネントのDOMを操作できるforwardRefの使い方
Reactで他のコンポーネントのDOMを操作できるforwardRefの使い方を紹介します。 Reactで他のコンポーネントのDOMを操作できるforwardRefの使い方 コンポーネントをまたいでDOM操作したいことケ…
React
【React】でDOMを直接操作するuseRefの使い方とrefとstateの違い
ReactでDOMを直接操作するuseRefの使い方を紹介します。 useRefの使いどころ useRefをいつ使うかですが、DOMのメソッドを使いたいときです。 たとえば、よくあるユースケースとしては、input要素に…
React
【React】SASSを使う方法
ReactでSASS(SCSS)を使う方法を紹介します。 手順1:node-sassをインストールする npm install node-sass 手順2:css拡張子をscss拡張子に変更する css拡張子をscss拡…
React
【React】Firebaseの使い方
ReactとFirebaseを使う方法を紹介します。 ReactとFirebaseを使う方法 手順1:firebaseでプロジェクト作成 firebaseにログインして、プロジェクトを作成します。 Firebaseのプロ…
React
【React】ログイン・ログアウト後にリダイレクトを設定する方法
Reactでリダイレクトを設定する方法を紹介します。 以下の例ではログイン・ログアウト後にリダイレクトさせています。 Reactでログイン・ログアウト後にリダイレクトを設定する方法 手順1:react-router-do…
React
【React】ルーティングをシンプルに設定する方法(react-router-dom)
Reactでルーティングをシンプルに設定する方法を紹介します。 Reactでルーティングをシンプルに設定する方法 手順1:react-router-domをインストール #npmの場合 npm i react-route…
React
【React】Font Awesomeの使い方-react-fontawesome
ReactでFont Awesomeを使う方法を紹介します。 【React】Font Awesomeの使い方 公式ドキュメントの場所は、こちらです。 手順1:必須ファイルをインストール #npmの場合 npm i --s…
React
【React】外部API(JSON)を取得して表示する方法
Reactで外部API(JSON)を取得して表示する方法を紹介します。 今回は、ポケモンAPIで実際に取得して表示します。 Reactで外部API(JSON)を取得して表示する方法 ファイル構成 src ∟App.js …
React
【React】ドラッグアンドドロップのやり方
Reactでドラッグアンドドロップする方法を紹介します。 Reactでドラッグアンドドロップする方法 ライブラリを使用します。 いくつかありますが、見た目がリッチになって使いやすいreact-beautiful-dndと…
React
【React】V18でreact-beautiful-dnd(ドラッグアンドドロップライブラリ)を使う方法
ReactのV18でreact-beautiful-dnd(ドラッグアンドドロップライブラリ)を使う方法を紹介します。 【React】V18でreact-beautiful-dnd(ドラッグアンドドロップライブラリ)を使…
React
【React】でDOMを操作するcreatePortalの使い方と使い所と注意点
ReactでDOMを操作するcreatePortalの使い方と使い所と注意点を紹介します。 ReactでDOMを操作するcreatePortalとは createPortalというメソッドを使うことで、本来React要素…
React
【React】スタイリング方法まとめ
Reactでhtmlをスタイリングする方法をまとめました。 Reactでhtmlをスタイリングする方法 大きく以下の4つの方法があります。 CSSファイルを読み込む インラインスタイル CSS Modules CSS i…
React
【React】フォームでよく使う記述(input,textarea,ラジオボタン,チェックボックス,select)
Reactでフォーム作成のときによく使う記述(input,textarea,ラジオボタン,チェックボックス)を紹介します。 inputとtextarea import { useState } from "re…
React
【React】propsの使い方とと大事な2つのルール
Reactでpropsを使う方法と大事な2つのルールを紹介します。 propsを使うことで、似ているコンポーネントで少しだけ変化させたい要素がある場合でも 簡単にコンポーネントを使いまわしつつそれぞれに違いをもたせること…
React
【React】不要タグを出力させないFragmentの使い方
JSX(htmlみたいなもの)のルールで、returnで返されるJSXのルートは一つで束ねられている必要があります。 そのために、divタグなどで囲うことで束ねることができますが、 不要なタグを書きたくない場合があります…
React
【React】npmでプロジェクトを作成する方法
npmでReactのプロジェクトを作成する方法を紹介します。 npmでReactプロジェクトを作成する方法 # PC全体でインストール (windows) npm i -g create-react-app (Mac) …
React
【React】コンポーネントとは-意味と定義方法
Reactのコンポーネントの意味や定義方法について紹介します。 Reactのコンポーネントとは Reactのコンポーネントとは、Reactで定義した画面の各構成要素のことです。 ・再利用性が高まる ・疎結合になる(バグが…
React
【ReactV18】CDNでまずは簡単に触ってみる方法
ReactのV18をCDNでまずは簡単に触ってみる方法を紹介します。 【ReactV18】のCDN <script crossorigin src="https://unpkg.com/react@18/umd/r…