[reactjs] タグが付いた質問

Reactはユーザーインタフェースを組み立てるためのJavaScriptライブラリです。宣言的なパラダイムによって、あなたのアプリケーションがどう動作しているかをわかりやすくすると共に、効率が良くかつ変更を容易にすることを目標としています。

絞り込み
並べ替え
タグ付けされた
0
0 回答
49 閲覧数

Reactのフックについて

現在、Reactベースのアプリ開発をしています。 多くの入門書やページでは、子コンポーネントから親コンポーネントのstateを変更する際、以下のように値をセットするだけの関数を別に定義しているものが大抵なのですが、set関数自体を渡すことになにか問題があるのでしょうか? const ComponentA = () => { const [value, setValue] = ...
kuu13580's user avatar
0
0 回答
38 閲覧数

Reactによるcsvの出力形式について

Reactで以下のような機能を実装しようとしています. HTML View <表の行数を指定するプルダウンリスト> セル1 セル2 セル3 セル4 セル5 1  2 データ1 データ2 データ3 2 3 データ4 データ5 データ6 上記のようなtable要素を生成しています.tableの行数は,プルダウンリストで指定し,動的に変化します. このtableに入力された値を,...
Toku's user avatar
  • 1
0
0 回答
32 閲覧数

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-...
tomatoboy's user avatar
1
0 回答
29 閲覧数

ReduxでdispatchしpayloadからのuseEffectを実行しその中のuseStateのセット関数で更新した値で判定する方法

タイトルが分かりにくくて申し訳ありません。 useStateのセット関数で更新した値をすぐに参照したのですが、更新前の値が取れてしまいます。 useStateの更新はすぐに実行されないというのは知っています。 やりたいこと イベント内でuseStateの更新後の値をすぐに参照したいです。 概要 イベント内でリストを再取得し、再取得後のリスト件数(multipleList.length)...
Tatsuya's user avatar
  • 11
0
0 回答
43 閲覧数

sendgridを利用したお問い合わせがvercelにデプロイすると送信されない

ローカルではメールが届いているが、デプロイして本番にあげた途端届かない事象が起きました。 vercelのログを見ると200は返してるので送信自体は成功しているっぽい。けど実際にメールが届かない... sendgridのActivity見ても反映されていない...basic認証かけてたせいかと思ったけど無くしても意味なく... 同じ現象に遭遇した方いませんか? 一応参考にしたサイト https://...
Dipitto's user avatar
0
1 回答
88 閲覧数

webpackをesbuildに変更した時のreact-railsで実装しているReactの修正方法を教えていただきたいです。

実現したいこと react-railsを使って部分的に読み込んでいるReactを、esbuildに変更した時に正常に読み込めるようにしたい 前提 Rails6、webpacker、react-railsで実装していたシステムをRails7にアップデートすることになり、それに伴いwebpackerからesbuildに変更することになりました。 Reactの知識が乏しく、調べてもreact-...
maru_katy's user avatar
0
0 回答
66 閲覧数

ローカルストレージに保存しているデータをmySQLに保存したい

reactで簡単なノートアプリを作成しました。 アプリとしては、タイトルと内容を書き込んだものがプレビューに表示され、ローカルストレージに保存される作り込みとなっています。 ・やりたいこと ローカルストレージではなく、MySQL内のデータベースに保存したいです。 バックエンドはNode.js(express)×MySQLを用いて試みましたがうまくいきませんでした。 バックエンド→...
yuuki's user avatar
  • 1
0
1 回答
28 閲覧数

DispatchでStoreに変数を作り、その変数をさまざまなコンポーネントで使用できるようにしたい。

実現したいこと Storeに格納したStateをさまざまなコンポーネントで使用できるようにしたい。 前提 ユーザーがログインすると、下記のようなデータが取得できます。 Json { "hubs": [ "111.com", "222.com", "333.com",...
lion-react's user avatar
0
0 回答
54 閲覧数

React-nativeでエラー画面を実装したいが、エラー画面が真っ白になってしまう。

React nativeのNavigationで共通のエラー画面を作りたいのですが、遷移させてみても画面が真っ白です。 こういった実装はできないのでしょうか。 App.tsx import {NavigationContainer} from "@react-navigation/native"; import React from "react"; ...
handat's user avatar
  • 1
0
0 回答
90 閲覧数

MUIのAutoCompleteでoptionで用意されている選択肢を選んだ時にその値を取得したい

現在ReactでコンポーネントはMUIを使い、state管理はreduxで開発を行っています。 AutocompleteのfreeSoloでユーザーからの入力を受け付ける、かつ、optionsで用意されている選択肢からも値を選べるようにしたいです。 しかし、下記のコードですと、ユーザーからの入力があった際はe.target.valueに値が入っており、...
carenm's user avatar
  • 21
0
1 回答
65 閲覧数

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 | |- ...
taddy's user avatar
  • 73
1
0 回答
112 閲覧数

Reactで作成したSPAをNginxでホスティングする時のdefault.confの設定を教えてください。

Reactで作成したSPAをNginxでホスティングしたいです。 その際に、パスの設定を/login/hoge, /login/fugaのように/login/から始まるパスにアクセスした場合にReactのSPAにルーティングするように設定したいです。 現在以下のように設定を行ったのですが、うまくいきません。 default.conf server { listen 80; location ...
sasa1009's user avatar
1
0 回答
160 閲覧数

Vercelでのデプロイ時のエラー。SyntaxError: Unexpected token T in JSON at position 0

データベースとの連携の勉強でtodoアプリを作り、Vercelでのデプロイ時にエラーがでて躓いてしまったのでなにかご教授いただけると嬉しいです。 Next13, prisma, postgreSQL, railway, tailwind で作りました。 レポジトリはこちらです。 https://github.com/satoshi02198/Task-maker ...
Satoshi Okazaki's user avatar
1
0 回答
21 閲覧数

redux-toolkitで、あるstateのプロパティの変更を基にそのstateの別プロパティを変更することは可能かどうか

現在Reactで開発をし、redux-toolkitでstate管理をしています。 そこで質問なのですが、例えば下記のようなsliceがあったとします。 sliceとしては、user毎に異なるitemsを持っているため、userが変わればitemsも変わるようにstateを変更したいと考えています。(storeは省略しています) testslice.js import { createSlice }...
carenm's user avatar
  • 21
1
0 回答
195 閲覧数

React+FastAPIでのCORSエラーの対処について

React+FastAPIでWebサイトを作成しました。FastAPI側では公式ドキュメントを読んでCORS対策しましたが、CORSエラーが出てデータをサーバーに送れません。何が原因なのでしょうか? 特徴 1.POST送信時のみエラーが出る。(GETメソッドでは起きない。) 2.ローカル環境(ReactとFastAPIは別ポート)ではPOST, GETとも問題なく動作する。 3....
doraemon's user avatar
0
0 回答
39 閲覧数

Reactでロードした後、Firebase/Firestore の情報を表示する実装方法がわからない

ReactでTrello風アプリの実装をしています。 ロードした後、Firebase/Firestore の情報を表示する実装方法がわからない為ご協力頂きたいです。 参考にした動画: ReactでTrello風タスク管理アプリの作り方【Reactアプリ開発】 (YouTube) 現時点で実装済みの内容 ・ドラッグ&ドロップの実装 ・タスクの追加・削除 ・タスクカードの追加・削除 ・...
kabao_state's user avatar
0
0 回答
92 閲覧数

React router v6 useLocation stateの保存について

useNavigateとuseLocationで、一度発行したapiの情報を保存して、一度取ってきたことのあるapiの情報であれば、apiから取得せず保管されているものを利用するということを実現したいです。
mokupo's user avatar
  • 1
0
0 回答
46 閲覧数

redux-toolkitのextraReducersでaction.payloadのprepareをするにはどうしたらよいか

今、Reactで開発をしており、そのステート管理としてredux-toolkitを使用しております。 下記は自分が作成しているsliceですが、下記のようにprepareで指定すれば、reducersのaction.payloadをカスタマイズできるところまでは理解しております。 しかし、非同期で通信し、その返却値であるaction.payloadをカスタマイズしたい場合、...
carenm's user avatar
  • 21
0
1 回答
45 閲覧数

Framerで、JavascriptのCSSに設定できる内容は、どのように確認したらよいでしょうか?

実現したいこと Framer.comを使って、アメコミ(Marvel)キャラクターのJSONを使った、キャラクターのカードを作ろうとしています。一枚のカードには一つのキャラクターの情報が入ります。 キャラクターのデータは10キャラクター分10枚あり、overflowしたカードをスクロールで10キャラクターを表示するのではなく、containerの設定により、...
鉛筆と紙's user avatar
2
1 回答
306 閲覧数

react内のimg srcにてテキストと変数を連結したい。

以下の様なApp.jsがあり、dbから抽出した情報の一覧を表示させる記述があります。画像を表示させる為にimg src内を以下の様にテキストと変数を連結した状態にしなければなりません。以下の設定では画像が表示されず、四角いボックスが表示されるだけです。''、""、あるいは{}で全体を覆ったりとあらゆることを試したり、ネット内の同様のケースを探し試しましたが、表示されません。...
baseballjapan's user avatar
0
1 回答
49 閲覧数

Reactで既存の処理をカスタムフックに分離させる方法を知りたい

目的 作成したカウント機能を使ってカスタムフックの作り方を学びたい。 状況 現在Reactを学習中で、コンポーネントの中でのuseStateの使い方を学びました。 次は作成した処理をカスタムフックとして作成したいのですが、webで調べても作り方がいまいちわからなかったので自分のコードをを使うとどうなるのかをお聞きしたいです。 聞きたいこと 下記のコードのカウントダウン機能・...
takuma's user avatar
  • 23
0
0 回答
100 閲覧数

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://...
Kazk's user avatar
  • 13
0
0 回答
121 閲覧数

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で管理していました。 ...
takuma's user avatar
  • 23
0
0 回答
30 閲覧数

KeyOfを使ったInterfaceの複数の実装

export interface Alarm { shopNumber?: number; shopName?: string; daiNo?: number; errorCode?: number; errorContents?: string; occurrenceDateTime?: string; }; export interface ...
ぴよさん's user avatar
0
0 回答
63 閲覧数

直接importしたjsonはサーバ・フロント間でどのように扱われますか?

Next.jsを用いてフロント開発を行っております。 ホスティング先はVercelを用いています。 下記コードのように、表示したいデータが詰まったjsonファイルをimportした時、 サーバ・フロント間での扱われ方、パフォーマンスに関する認識について質問させて下さい。 import datalist from '.master/datalist.json'; export default ...
cRR's user avatar
  • 3
0
0 回答
64 閲覧数

Headerコンポーネントでmicrocmsから記事データを取得をしたい

next.js microcmsでサイトを作成しており、index.jsxでは「getStaticProps」を使ってfiledのjsonのデータを 取得できますが、Headerコンポーネントでは受け取ることができません。 index.jsxでは受け取れて、なぜHeaderコンポーネントでは受け取ることができないのか理解ができないので 解決方法がわからず困っております。 ...
Haruka's user avatar
  • 1
0
1 回答
170 閲覧数

React の datepicker で月の選択画面で数字表記にするには?

React-datepickerを使用して年月のみのカレンダーを実装中です。 月の部分が1月ならJan、2月ならFebというように表示されてしまっているのですが、月の部分を英語ではなく数字表記にしたいです。 どなたか方法をご存知でしたら教えていただきたいです。
taiko-tatsujin's user avatar
0
0 回答
77 閲覧数

POSTした後、mutateでデータが更新されない swr fetcher

何かをPOSTした後、即座にその内容がReactで表示されるようにしたいです。 データベース(prisma)の方には即座にデータが書き込まれていますが、そのfeedがReact側に更新されません。 一応更新はされるのですが、十秒くらい時間を置いた上で、そのウインドウを離れて別のウインドウをクリックしてから、元のウインドウに戻ってこないと、更新されません。 import { useState } ...
user6894661's user avatar
0
1 回答
208 閲覧数

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/...
mkmk's user avatar
  • 21
0
2 回答
183 閲覧数

Reactのコンポーネントが制御か非制御かはどのようにして決まる?

Reactについて勉強中です。 Reactの制御コンポーネントと非制御コンポーネントについてわからない点があります。 Reactのあるコンポーネントが制御か非制御かはどのようにして決まるのでしょうか? 公式ドキュメントをみるとrefを使用するかどうかで決まるのかという印象を受けました。 他にも何か基準があれば教えていただきたいです。
carenm's user avatar
  • 21
0
0 回答
109 閲覧数

react-playerを用いて、動画が再生できない場合にメッセージを表示させたい。

初学者につき、不躾な質問を失礼いたします。 ただいま、react-playerを用いて、元々タグで実装していた動画プレイヤーの置き換えを行っています。 元のコードは以下のようになっており、動画が再生できなかった場合などにタグ内の文言が表示されるようになっています。 <video className="media video" ...
Kazk's user avatar
  • 13
0
0 回答
193 閲覧数

Reactでリロードをするとエラーが出る

前提 現在ポートフォリオを作成しています。 この質問は複数サイトに投稿しています。 回答が得られた場合は、回答されてない投稿を削除します。 URL https://manga-kousatu-net.vercel.app/ id sample123@gmail.com pass sample345! github https://github.com/takoyan33/manga-kousatu....
しゅんぺい's user avatar
1
1 回答
72 閲覧数

MUIのYearPickerのSelectedカラーを変更する方法はありますか?

muiのDatePicker APIを使用しています。 年度選択時のバックグラウンドカラーを変更したいのですが、方法が見つかりません。 日付選択はPickersDayコンポーネントのsxにstyleを指定して、それをDatePickerのrenderDayに渡せば変更できました。 方法をご存知の方、よろしくお願いいたします。
teidlldga's user avatar
1
1 回答
214 閲覧数

rails, react-playerとhls.jsを用いてHLS再生の実装をしたい

バックエンドにrailsを使用しており、フロントでreact/typescriptを用いている中で、react-playerとhls.jsを用いたストリーミング再生機能の実装をしたいと考えています。 現状はvideoタグを用いて、Amazon S3においたmp4をcloudfront経由で取得して再生しています。 react-playerはhls.jsとも互換性がありそうですが、...
Kazk's user avatar
  • 13
0
2 回答
562 閲覧数

React のルーティング設定で真っ白な画面が表示されてしまう

Reactの画面遷移のためにルーティングを学習中です。 下記のサイトを試しに自身で実施して実行すると、画面が真っ白になりました。 ルーティングの設定 | React Router v6 はじめでもわかるルーティングの設定方法の基礎 最初はサイトのソースをそのままコピー&ペーストで実行すると真っ白です。 そこで調査して、jsonファイルにhomepageを設定しましたが解決していません。 ...
tomo kuma's user avatar
0
2 回答
406 閲覧数

ローカルで作成したReactアプリを起動して、 他のPCのブラウザからアクセスして表示する設定方法について

ローカルで作成したReactアプリを、他PCのブラウザから表示する設定方法を教えていただけますでしょうか。    自身のPCでReactアプリを作成して、自身PC(ローカル)から起動する手順は学習しました。 コマンドプロンプトを起動すると下記が表示されます。    Compiled successfully! You can now view login in the browser. ...
tomo kuma's user avatar
0
1 回答
185 閲覧数

フロントエンドから法人番号APIを使用した際のcorsエラーについて

フロントエンド側で国税庁が提供する法人番号APIを使用し、企業情報の取得を試みたところ、ブラウザのコンソールにて以下のcorsエラーが発生しました。 こちらの解決策をお伺いしたく存じます。 Access to XMLHttpRequest at '[https://api.houjin-bangou.nta.go.jp/4/num?id=hogehoge&number=hogehoge&...
takigon's user avatar
0
0 回答
35 閲覧数

npm workspace利用時にuseContextが動かない

以下のような構成でnpm workspaceを利用しています . ├── package.json └── packages ├── app │ ├── application1 │ │ └── package.json │ └── application2 │ └── package.json └── modules └── ...
hidechae's user avatar
  • 170
1
1 回答
72 閲覧数

useEffectの挙動について

useEffectの挙動について質問させていただきます。 console.logで出力する値が遅れて出力されるのはなぜか というのが主旨になります。 import { useEffect, useState } from "react"; type inputSetting = { player : number; wolves : number; ...
yaka's user avatar
  • 15
0
1 回答
137 閲覧数

docker-composeで作成したReactアプリがlocalhost以外の任意のホスト名から接続できる。

create-react-appで作成されたReactのアプリに localhost:3000 と app.hoge.hoge:3000 というホスト名で同じページに接続出来ます。 reactアプリの環境変数HOSTやpacakege.json にホスト名を変更するような記述が見られないのにどうしてこのような動作をするのか不思議でたまりません。 ...
wataru's user avatar
  • 1,053
0
0 回答
37 閲覧数

ReactのComponent作成時の質問

React初学者です Reactでコンポーネントを作成するときに下記の方法で作成可能だと知ったのですが、文法以外で違いがわからないです。 それぞれに適した用途があるのでしょうか。 React.FC React.Component JSX.Element
taiko-tatsujin's user avatar
0
0 回答
44 閲覧数

nextjs ssr GetServerSideProps サーバー

GetServerSidePropsを使用しているファイルをbuild → exportするにはどうすればいいのでしょうか? / ┗/test/[id].tsx ┗/test/index.tsx /out/ ┗/test/[id] ┗index.html のようになってますが、[id]フォルダの中身は空です・・・
program_beginner's user avatar
0
1 回答
214 閲覧数

Next.jsで上手くreact-draft-wysiwygが動かない

下記のページを参考に、Next.jsでreact-draft-wysiwygを導入しようと考えています。 ブラウザ上で動くリッチなテキストエディタを、React Draft Wysiwygを使って手軽に実装する 実現したいこと react-draft-wysiwygを動かして、入力内容を const [editorState, setEditorState] = useState("&...
しゅんぺい's user avatar
0
0 回答
222 閲覧数

XAMPP環境でReactを使いたい

現在自分のローカルにXAMPPをインストールしており、C:\xampp\htdocs 配下にあるファイルがブラウザ上でhttp://localhost/ のURLで見れる状況です。 それとは別に ローカルで Create React App を使って、Reactが使える環境が用意できました。(npm startを実行するとブラウザ上でhttp://localhost:3000となる環境のことです。)...
carenm's user avatar
  • 21
0
0 回答
121 閲覧数

Reactとfirebaseを使っていいね機能を実装したい

前提 現在漫画考察サイトを作成しています。 https://manga-kousatu-net-takoyan33.vercel.app/ github https://github.com/takoyan33/manga-kousatu.net 実現したいこと firestoreを使っていいね機能を実現したい (likesというレコードを作り、そこを+1して更新する) 発生している問題・...
しゅんぺい's user avatar
0
0 回答
82 閲覧数

Webカメラの顔フレームをブラウザの画面サイズに関係なく表示するには

ReactでWebアプリを作成中の者です。 画面上に表示されたWebカメラに顔のフレームを追加しようとしています。ですので以下のような顔の部分だけ透明化させた画像を使ってそれを実装しようと試みました。 このフレームの画像は16:9の比率で作っていますのでlocalhostを走らせているブラウザがフルスクリーンの時は問題ありません。ちなみにcssでopacity: 0....
shinchan97's user avatar
0
1 回答
95 閲覧数

Docker npx create-react-app .ができない

目的 Docker環境でfrontend直下に create-react-app .でアプリを作成したいです。 ディレクトリ構成 backend frontend - Dockerfile Dockerfile FROM node:18.7.0-alpine3.16 WORKDIR /frontend RUN npm i -g create-react-app docker-compose....
tee's user avatar
  • 53
1
0 回答
195 閲覧数

Cannot use JSX unless the '--jsx' flag is provided.がでてJestが使えない

前提 バックエンド側(RoR)とフロントエンド側(React TypeScript *一部JavaScript)に分けてDockerで開発を行っています。フロントエンド側でテストを使用したいと思ったので、Jestをインストールし、テストを走らせましたが、なぜかテストファイルの初期値でもエラーが起きてしまいます。 発生している問題・エラーメッセージ $ docker-compose exec ...
senseIY's user avatar
  • 41
0
0 回答
116 閲覧数

react-bootstrapのCard.imgでローカルに保存された画像を使うにはどうしたらいいでしょう?

ドキュメントにもある、上記のようなカードを作ろうとしています。 ドキュメントでは: import Button from 'react-bootstrap/Button'; import Card from 'react-bootstrap/Card'; function BasicExample() { return ( <Card style={{ width: '...
shinchan97's user avatar
0
1 回答
88 閲覧数

rails側に保存した音声ファイルをReact側のwavesurferで使用したい。

解決したいこと rails側に保存した音声ファイルをReact側のwavesurferで使用したいです。 環境 ・dockerを使用して、バックエンド側(RoR)とフロントエンド側{React TypeScript *(wavesurferなどの一部はJavaScript)}に分けて開発を行っています。OSはWindowsですが、wsl2のUbuntu20.04で開発を行っています。 ・...
senseIY's user avatar
  • 41