[reactjs] タグが付いた質問
Reactはユーザーインタフェースを組み立てるためのJavaScriptライブラリです。宣言的なパラダイムによって、あなたのアプリケーションがどう動作しているかをわかりやすくすると共に、効率が良くかつ変更を容易にすることを目標としています。
244
質問
0
票
2
回答
56
閲覧数
React Routerを使ってログインボタンを押したら別のコンポーネント ページに遷移する書き方について教えて頂きませんか?
現在Reactを勉強中の者ですが最近Reactでログインページを作成して例えば登録ボタンを押すと別のコンポーネント
ページに遷移できることを実行したいのに書き方が分からずエラーでつまずいてしまいます。
例えば Signin.jsに以下を定義してもページ遷移できずいろいろ調べても解決できずこまっています。
import { BrowserRouter as Router, Route, Routes ...
0
票
0
回答
26
閲覧数
Material TailwindのProの利用可能コンポーネント数
Material TailwindのProはどれくらいの数のコンポーネントを利用できますか?
0
票
0
回答
48
閲覧数
Reactのstateが更新されない
やりたいこと
Reactを使ったWebアプリのフロントエンド部分で、ユーザーがformに入力した値でstateを更新したい。
状況
ユーザーがformに入力してもsubmitを押してもstateが更新されない。
useStateを別のstateの中に入れたことが原因と推測していますが、解決策が分かりません。
ディレクトリ構成
front
├── node_modules
│ └── ...
├─...
0
票
0
回答
37
閲覧数
react,muiで汎用性の高いButton+Popoverを作りたい
react,typescriptでMUIを用いたソフトを開発しています。
その中で「あるボタンを押すとOK,Cancelの確認を表示し、OKなら続ける」ような場面が複数あります。
普通に実装するとButtonとPopoverを持ったコンポーネントでanchorElをuseStateで定義して~となりますが、色んな所でほぼ同じ処理を書くのが面倒だったり、表示や処理部分を使いまわしたい場面があります。
...
0
票
0
回答
71
閲覧数
nextjs上のサーバーサイドでsupabaseのデータをフェッチする方法について
supabase上にpostsというテーブルを作成し、3つデータを追加しました。
そのうえでsupabase上でpostsのデータをすべて取得したいと思い以下のコードを実行すると取得したデータが空になってしまします。
const { data: posts } = await supabase.from("posts").select("*");
...
0
票
1
回答
124
閲覧数
react 18.3.0 の `use` による再レンダリングが複数回発生してしまう
react 18.3.0 の use を使ったfetchとSuspenseを行いたいのですが、複数回(ときには無制限)の再レンダリングが発生してしまっています。
解決方法を教えてください。
react: 18.3.0-canary-3ff846d10-20230724
next: 13.4.12
以下のコードでトップページを開くと画面にDoneが表示されるまでの間、render ...
0
票
0
回答
39
閲覧数
react,typescriptで型定義が誤っている?ライブラリを使用する方法
React,TypeScriptで以下のサンプルのように1つの時系列に複数のグラフを表示し、値を確認したり範囲を指定した操作ができるグラフを作りたいと考えています。
https://software.es.net/react-timeseries-charts/#/example/cycling
https://software.es.net/react-timeseries-charts/#/...
0
票
0
回答
106
閲覧数
React-hook-formのRegisterを使った場合の値の受け渡しについて
ReactとNext.jsでWEBアプリを作っています。
メインのコンポーネントであるAppと、textarea専用のTextInputコンポーネントがあり、App内でTextInputコンポーネントを呼び出しています。
コンポーネントは分割した状態でないといけないのですが、できればregisterをつかった状態で、Appで入力された値をTextInputコンポーネントに渡す方法はないでしょうか。
...
0
票
0
回答
113
閲覧数
GitHub Pagesで公開したサイトの404ページを自作のものに変更したい
基本的な方法は公式にある通りで、
https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-custom-404-page-for-your-github-pages-site
つまり公開したルートディレクトリに404.htmlがあればそれを404ページとして利用するらしいです。
...
0
票
0
回答
51
閲覧数
Next.jsでTwitter共有用画像が設定できない
AppRouterのNext.jsでの質問です
Twitterの共有用画像を設定する際に、この公式ドキュメントにかいてあるような手法をとって行っているのですが、なぜか上手くいきません
上記のドキュメントの1つ目の方法である、「appディレクトリ直下にtwitter-image.pngを置く」という方法を選択してビルド&デプロイしたのですが、...
0
票
1
回答
150
閲覧数
reactにおけるprocessのエラー
現在,reactを用いて,Webサイト開発を行っているものです.
コード内でnedbを用いてデータベースを構築しています.コマンドラインで,$ node "path名"として,実行すると可能なのですが,localhost:3000の方で見ると,以下のエラーが発生しています.
Uncaught runtime errors:
ERROR
process is not ...
0
票
0
回答
37
閲覧数
ダークモードのスタイルが反映されない
"use client" // this is a client component
import React from "react"
import { useState } from "react"
import { Link } from "react-scroll/modules"
import { ...
0
票
0
回答
63
閲覧数
Reactのフックについて
現在、Reactベースのアプリ開発をしています。
多くの入門書やページでは、子コンポーネントから親コンポーネントのstateを変更する際、以下のように値をセットするだけの関数を別に定義しているものが大抵なのですが、set関数自体を渡すことになにか問題があるのでしょうか?
const ComponentA = () => {
const [value, setValue] = ...
0
票
0
回答
216
閲覧数
Reactによるcsvの出力形式について
Reactで以下のような機能を実装しようとしています.
HTML View
<表の行数を指定するプルダウンリスト>
セル1
セル2
セル3
セル4
セル5
1
2
データ1
データ2
データ3
2
3
データ4
データ5
データ6
上記のようなtable要素を生成しています.tableの行数は,プルダウンリストで指定し,動的に変化します.
このtableに入力された値を,...
0
票
0
回答
92
閲覧数
React Routerの設定について Error: Invariant failed: Browser history needs a DOM
実現したいこと
https://reffect.co.jp/react/react-firebase-auth#React_Router
このサイトの7 React Routerの設定の最初の部分を実装したいです。
前提
6のユーザー情報の共有の部分まではできていて実際に動いているのですが、
を書いた途端に以下のエラーが出て動いてくれません。
react-router-...
1
票
0
回答
58
閲覧数
ReduxでdispatchしpayloadからのuseEffectを実行しその中のuseStateのセット関数で更新した値で判定する方法
タイトルが分かりにくくて申し訳ありません。
useStateのセット関数で更新した値をすぐに参照したのですが、更新前の値が取れてしまいます。
useStateの更新はすぐに実行されないというのは知っています。
やりたいこと
イベント内でuseStateの更新後の値をすぐに参照したいです。
概要
イベント内でリストを再取得し、再取得後のリスト件数(multipleList.length)...
0
票
0
回答
92
閲覧数
sendgridを利用したお問い合わせがvercelにデプロイすると送信されない
ローカルではメールが届いているが、デプロイして本番にあげた途端届かない事象が起きました。
vercelのログを見ると200は返してるので送信自体は成功しているっぽい。けど実際にメールが届かない...
sendgridのActivity見ても反映されていない...basic認証かけてたせいかと思ったけど無くしても意味なく...
同じ現象に遭遇した方いませんか?
一応参考にしたサイト
https://...
0
票
1
回答
187
閲覧数
webpackをesbuildに変更した時のreact-railsで実装しているReactの修正方法を教えていただきたいです。
実現したいこと
react-railsを使って部分的に読み込んでいるReactを、esbuildに変更した時に正常に読み込めるようにしたい
前提
Rails6、webpacker、react-railsで実装していたシステムをRails7にアップデートすることになり、それに伴いwebpackerからesbuildに変更することになりました。
Reactの知識が乏しく、調べてもreact-...
0
票
0
回答
73
閲覧数
ローカルストレージに保存しているデータをmySQLに保存したい
reactで簡単なノートアプリを作成しました。
アプリとしては、タイトルと内容を書き込んだものがプレビューに表示され、ローカルストレージに保存される作り込みとなっています。
・やりたいこと
ローカルストレージではなく、MySQL内のデータベースに保存したいです。
バックエンドはNode.js(express)×MySQLを用いて試みましたがうまくいきませんでした。
バックエンド→...
0
票
1
回答
35
閲覧数
DispatchでStoreに変数を作り、その変数をさまざまなコンポーネントで使用できるようにしたい。
実現したいこと
Storeに格納したStateをさまざまなコンポーネントで使用できるようにしたい。
前提
ユーザーがログインすると、下記のようなデータが取得できます。
Json
{
"hubs": [
"111.com",
"222.com",
"333.com",...
0
票
0
回答
110
閲覧数
React-nativeでエラー画面を実装したいが、エラー画面が真っ白になってしまう。
React nativeのNavigationで共通のエラー画面を作りたいのですが、遷移させてみても画面が真っ白です。
こういった実装はできないのでしょうか。
App.tsx
import {NavigationContainer} from "@react-navigation/native";
import React from "react";
...
0
票
0
回答
192
閲覧数
MUIのAutoCompleteでoptionで用意されている選択肢を選んだ時にその値を取得したい
現在ReactでコンポーネントはMUIを使い、state管理はreduxで開発を行っています。
AutocompleteのfreeSoloでユーザーからの入力を受け付ける、かつ、optionsで用意されている選択肢からも値を選べるようにしたいです。
しかし、下記のコードですと、ユーザーからの入力があった際はe.target.valueに値が入っており、...
0
票
1
回答
108
閲覧数
GitHub ActionsによるRSpecテストで発生する「undefined method `now' for nil:NilClass」エラーを解決したい。
現在、バック(Rails API)とフロント(react)を分けてSPA開発を行っており、下記がディレクトリ構成になります。
ディレクトリ構成
.
|- api(docker)
| |- .github/workflows/github-action.yml
| |- config/database.yml.ci
| |- Gemfile
| |- Gemfile.lock
| |- ...
1
票
0
回答
181
閲覧数
Reactで作成したSPAをNginxでホスティングする時のdefault.confの設定を教えてください。
Reactで作成したSPAをNginxでホスティングしたいです。
その際に、パスの設定を/login/hoge, /login/fugaのように/login/から始まるパスにアクセスした場合にReactのSPAにルーティングするように設定したいです。
現在以下のように設定を行ったのですが、うまくいきません。
default.conf
server {
listen 80;
location ...
1
票
0
回答
301
閲覧数
Vercelでのデプロイ時のエラー。SyntaxError: Unexpected token T in JSON at position 0
データベースとの連携の勉強でtodoアプリを作り、Vercelでのデプロイ時にエラーがでて躓いてしまったのでなにかご教授いただけると嬉しいです。
Next13, prisma, postgreSQL, railway, tailwind で作りました。
レポジトリはこちらです。
https://github.com/satoshi02198/Task-maker
...
1
票
0
回答
37
閲覧数
redux-toolkitで、あるstateのプロパティの変更を基にそのstateの別プロパティを変更することは可能かどうか
現在Reactで開発をし、redux-toolkitでstate管理をしています。
そこで質問なのですが、例えば下記のようなsliceがあったとします。
sliceとしては、user毎に異なるitemsを持っているため、userが変わればitemsも変わるようにstateを変更したいと考えています。(storeは省略しています)
testslice.js
import { createSlice }...
1
票
0
回答
328
閲覧数
React+FastAPIでのCORSエラーの対処について
React+FastAPIでWebサイトを作成しました。FastAPI側では公式ドキュメントを読んでCORS対策しましたが、CORSエラーが出てデータをサーバーに送れません。何が原因なのでしょうか?
特徴
1.POST送信時のみエラーが出る。(GETメソッドでは起きない。)
2.ローカル環境(ReactとFastAPIは別ポート)ではPOST, GETとも問題なく動作する。
3....
0
票
0
回答
44
閲覧数
Reactでロードした後、Firebase/Firestore の情報を表示する実装方法がわからない
ReactでTrello風アプリの実装をしています。
ロードした後、Firebase/Firestore の情報を表示する実装方法がわからない為ご協力頂きたいです。
参考にした動画:
ReactでTrello風タスク管理アプリの作り方【Reactアプリ開発】 (YouTube)
現時点で実装済みの内容
・ドラッグ&ドロップの実装
・タスクの追加・削除
・タスクカードの追加・削除
・...
0
票
0
回答
139
閲覧数
React router v6 useLocation stateの保存について
useNavigateとuseLocationで、一度発行したapiの情報を保存して、一度取ってきたことのあるapiの情報であれば、apiから取得せず保管されているものを利用するということを実現したいです。
0
票
0
回答
58
閲覧数
redux-toolkitのextraReducersでaction.payloadのprepareをするにはどうしたらよいか
今、Reactで開発をしており、そのステート管理としてredux-toolkitを使用しております。
下記は自分が作成しているsliceですが、下記のようにprepareで指定すれば、reducersのaction.payloadをカスタマイズできるところまでは理解しております。
しかし、非同期で通信し、その返却値であるaction.payloadをカスタマイズしたい場合、...
0
票
1
回答
54
閲覧数
Framerで、JavascriptのCSSに設定できる内容は、どのように確認したらよいでしょうか?
実現したいこと
Framer.comを使って、アメコミ(Marvel)キャラクターのJSONを使った、キャラクターのカードを作ろうとしています。一枚のカードには一つのキャラクターの情報が入ります。
キャラクターのデータは10キャラクター分10枚あり、overflowしたカードをスクロールで10キャラクターを表示するのではなく、containerの設定により、...
2
票
1
回答
638
閲覧数
react内のimg srcにてテキストと変数を連結したい。
以下の様なApp.jsがあり、dbから抽出した情報の一覧を表示させる記述があります。画像を表示させる為にimg src内を以下の様にテキストと変数を連結した状態にしなければなりません。以下の設定では画像が表示されず、四角いボックスが表示されるだけです。''、""、あるいは{}で全体を覆ったりとあらゆることを試したり、ネット内の同様のケースを探し試しましたが、表示されません。...
0
票
1
回答
57
閲覧数
Reactで既存の処理をカスタムフックに分離させる方法を知りたい
目的
作成したカウント機能を使ってカスタムフックの作り方を学びたい。
状況
現在Reactを学習中で、コンポーネントの中でのuseStateの使い方を学びました。
次は作成した処理をカスタムフックとして作成したいのですが、webで調べても作り方がいまいちわからなかったので自分のコードをを使うとどうなるのかをお聞きしたいです。
聞きたいこと
下記のコードのカウントダウン機能・...
0
票
0
回答
150
閲覧数
ReactPlayer(hls.js)でHLS配信を実現 CloudFrontエラー「The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*'」
ReactPlayer(hls.js)を用いて、HLS配信を行おうと考えています。
HLS配信を行う為に必要なS3やCloudFrontの設定は一通りしたつもりですが、動画配信画面でエラーが出ています。
Access to XMLHttpRequest at 'https://cdn.hogehoge.com/movies/hogehoge.m3u8' from origin 'https://...
0
票
0
回答
177
閲覧数
githubからcloneしたreactプロジェクトでnpm startができない。
環境
ProductName: macOS
ProductVersion: 12.6.1
BuildVersion: 21G217
node: v19.3.0
npm: 9.2.0
前提
現在、reactの学習を始めたプログラミング初学者です。
課題
create-react-appで作成したreactのプロジェクトをgithubで管理していました。
...
0
票
0
回答
30
閲覧数
KeyOfを使ったInterfaceの複数の実装
export interface Alarm {
shopNumber?: number;
shopName?: string;
daiNo?: number;
errorCode?: number;
errorContents?: string;
occurrenceDateTime?: string;
};
export interface ...
0
票
0
回答
82
閲覧数
直接importしたjsonはサーバ・フロント間でどのように扱われますか?
Next.jsを用いてフロント開発を行っております。
ホスティング先はVercelを用いています。
下記コードのように、表示したいデータが詰まったjsonファイルをimportした時、
サーバ・フロント間での扱われ方、パフォーマンスに関する認識について質問させて下さい。
import datalist from '.master/datalist.json';
export default ...
0
票
0
回答
89
閲覧数
Headerコンポーネントでmicrocmsから記事データを取得をしたい
next.js microcmsでサイトを作成しており、index.jsxでは「getStaticProps」を使ってfiledのjsonのデータを
取得できますが、Headerコンポーネントでは受け取ることができません。
index.jsxでは受け取れて、なぜHeaderコンポーネントでは受け取ることができないのか理解ができないので
解決方法がわからず困っております。
...
0
票
1
回答
386
閲覧数
React の datepicker で月の選択画面で数字表記にするには?
React-datepickerを使用して年月のみのカレンダーを実装中です。
月の部分が1月ならJan、2月ならFebというように表示されてしまっているのですが、月の部分を英語ではなく数字表記にしたいです。
どなたか方法をご存知でしたら教えていただきたいです。
0
票
0
回答
146
閲覧数
POSTした後、mutateでデータが更新されない swr fetcher
何かをPOSTした後、即座にその内容がReactで表示されるようにしたいです。
データベース(prisma)の方には即座にデータが書き込まれていますが、そのfeedがReact側に更新されません。
一応更新はされるのですが、十秒くらい時間を置いた上で、そのウインドウを離れて別のウインドウをクリックしてから、元のウインドウに戻ってこないと、更新されません。
import { useState } ...
0
票
1
回答
405
閲覧数
yarn dev が実行されない
Couldn't find a package.json fileと表示される
study-react % yarn dev
yarn run v1.22.19
error Couldn't find a package.json file in "/Users/kazu/study-react"
info Visit https://yarnpkg.com/en/docs/...
0
票
2
回答
212
閲覧数
Reactのコンポーネントが制御か非制御かはどのようにして決まる?
Reactについて勉強中です。
Reactの制御コンポーネントと非制御コンポーネントについてわからない点があります。
Reactのあるコンポーネントが制御か非制御かはどのようにして決まるのでしょうか?
公式ドキュメントをみるとrefを使用するかどうかで決まるのかという印象を受けました。
他にも何か基準があれば教えていただきたいです。
1
票
1
回答
123
閲覧数
MUIのYearPickerのSelectedカラーを変更する方法はありますか?
muiのDatePicker APIを使用しています。
年度選択時のバックグラウンドカラーを変更したいのですが、方法が見つかりません。
日付選択はPickersDayコンポーネントのsxにstyleを指定して、それをDatePickerのrenderDayに渡せば変更できました。
方法をご存知の方、よろしくお願いいたします。
1
票
1
回答
355
閲覧数
rails, react-playerとhls.jsを用いてHLS再生の実装をしたい
バックエンドにrailsを使用しており、フロントでreact/typescriptを用いている中で、react-playerとhls.jsを用いたストリーミング再生機能の実装をしたいと考えています。
現状はvideoタグを用いて、Amazon S3においたmp4をcloudfront経由で取得して再生しています。
react-playerはhls.jsとも互換性がありそうですが、...
0
票
2
回答
878
閲覧数
React のルーティング設定で真っ白な画面が表示されてしまう
Reactの画面遷移のためにルーティングを学習中です。
下記のサイトを試しに自身で実施して実行すると、画面が真っ白になりました。
ルーティングの設定 | React Router v6 はじめでもわかるルーティングの設定方法の基礎
最初はサイトのソースをそのままコピー&ペーストで実行すると真っ白です。
そこで調査して、jsonファイルにhomepageを設定しましたが解決していません。
...
0
票
3
回答
881
閲覧数
ローカルで作成したReactアプリを起動して、 他のPCのブラウザからアクセスして表示する設定方法について
ローカルで作成したReactアプリを、他PCのブラウザから表示する設定方法を教えていただけますでしょうか。
自身のPCでReactアプリを作成して、自身PC(ローカル)から起動する手順は学習しました。
コマンドプロンプトを起動すると下記が表示されます。
Compiled successfully!
You can now view login in the browser.
...
0
票
1
回答
265
閲覧数
フロントエンドから法人番号APIを使用した際のcorsエラーについて
フロントエンド側で国税庁が提供する法人番号APIを使用し、企業情報の取得を試みたところ、ブラウザのコンソールにて以下のcorsエラーが発生しました。
こちらの解決策をお伺いしたく存じます。
Access to XMLHttpRequest at '[https://api.houjin-bangou.nta.go.jp/4/num?id=hogehoge&number=hogehoge&...
1
票
1
回答
76
閲覧数
useEffectの挙動について
useEffectの挙動について質問させていただきます。
console.logで出力する値が遅れて出力されるのはなぜか というのが主旨になります。
import { useEffect, useState } from "react";
type inputSetting = {
player : number;
wolves : number;
...
0
票
1
回答
158
閲覧数
docker-composeで作成したReactアプリがlocalhost以外の任意のホスト名から接続できる。
create-react-appで作成されたReactのアプリに localhost:3000 と app.hoge.hoge:3000 というホスト名で同じページに接続出来ます。
reactアプリの環境変数HOSTやpacakege.json にホスト名を変更するような記述が見られないのにどうしてこのような動作をするのか不思議でたまりません。
...
0
票
1
回答
328
閲覧数
Next.jsで上手くreact-draft-wysiwygが動かない
下記のページを参考に、Next.jsでreact-draft-wysiwygを導入しようと考えています。
ブラウザ上で動くリッチなテキストエディタを、React Draft Wysiwygを使って手軽に実装する
実現したいこと
react-draft-wysiwygを動かして、入力内容を const [editorState, setEditorState] = useState("&...