[reactjs] タグが付いた質問
Reactはユーザーインタフェースを組み立てるためのJavaScriptライブラリです。宣言的なパラダイムによって、あなたのアプリケーションがどう動作しているかをわかりやすくすると共に、効率が良くかつ変更を容易にすることを目標としています。
136
質問
0
票
1回答
55 件の閲覧数
addEventListenerのリスナーにreactのイベント処理を登録したい
疑問点
reactのReact.MouseEvent型を引数に持つイベントをeventListenerのリスナーに登録したいです。
しかしevenntListenerはmouseEvent型のリスナーを受け付けており、型が合わないためエラーが発生するようです。
エラーが発生する原因は分かったのですが、どのようにすれば型を合わせることができるのかわかりません。
※any型を使うとエラーは出ませんが、...
0
票
0回答
71 件の閲覧数
コードの汎用性可読性が悪いのを直したいです。(GatsbyとContentfulで作ったサイト)(初歩過ぎかも)
以下のコードの categoryS, categoryS2, categoryS3, categoryS4 ... と沢山記述している所をスッキリさせたいのですが、Gatsbyだとどう記述できるのでしょうか?
(CMSはContentfulを使用して、データを取得しています。)
表示イメージ
export const query = graphql`
query() {
...
1
票
1回答
48 件の閲覧数
npx create-react-appでディレクトリ作成した後にnpm list --depth=0を入力するとエラーが出ます。
reactの環境構築をする際、
npx create-react-app hibiton(作りたいファイル名)
を入力して、
npm list --depth=0をしたところ、エラーがたくさん出ました。
そこで皆さんに聞きたいことが2つあります。
①現在npx creat-react-app hibitonしか入力していないのにこんなにエラーが出ることはあるのでしょうか?...
0
票
1回答
60 件の閲覧数
Material UIライブラリのサンプルテーブルを実装しようとしたらエラー rows.slice is not a functionが出る
現在、Material UIライブラリのドキュメントに載っているページネーションを使ったテーブルを作成したいと考えています。
追記:https://teratail.com/questions/311503 にも質問してあります。
具体的には、 https://material-ui.com/components/tables/ に載っているCustom pagination ...
0
票
0回答
34 件の閲覧数
Reactで新しく投稿を追加したときに一番上に追加したい。
ReactとDjangoでTodoアプリを作っているのですが新しいTodoを追加したときに一番下に追加されてしまいます。
再読込すると新しい順に表示されるのですが新規投稿をした場合の上記のようなことが起こってしまいます。(下記画像参照)
おそらく再読込すると新着順に表示されるのはDjango側でqueryset = Project.objects.order_by('-created_at')...
0
票
0回答
34 件の閲覧数
Reactでreact-hook-formを用いようとするとInvalid Hook Callエラーが起こってしまう
Create-react-my-appから作ったプロジェクト内のApp.js内に、以下のコードをそのまま貼り付けました。(以下のコードは、react hook formの公式サイトの例をそのままコピーしたものです)
import * as React from "react";
import { useForm } from "react-hook-form"...
0
票
0回答
27 件の閲覧数
firestore rulesのテストでFirebaseError: 7 PERMISSION_DENIED:
Firebaseのrulesをテストしようとしていたのですが、エミュレータを起動して、npm testを実行すると、以下のエラーが発生しました。
FirebaseError: 7 PERMISSION_DENIED: false for 'create' @ L71
@ L71がline 71のことだとしたら、firestore.rulesファイルの71行目は以下になります。
allow ...
0
票
0回答
34 件の閲覧数
アプリからFirebase名前空間にアクセスできない Cannot access JS SDK from firebase namespace
Firebase JavaScript SDK でアプリから firebase.functions() を使おうとして以下の記述を行いました。
import firebase from "firebase/app";
const functions = firebase.function();
依存関係 : {
"firebase": "...
0
票
0回答
51 件の閲覧数
React + WP REST APIで動的なURLを用いてコンテンツ表示(ルーティング)を行いたい。
実現したいこと
ReactとWP REST APIでWebアプリを作成しています。
WP REST APIから受け取ったwordpress(ローカル環境)のJsonデータにあるidをkeyとしてReact側で
componentDidMountを使ってデータをマッピングし、投稿一覧を作成しました。(Home.jsx)
この投稿一覧の中にある"Link"「view more」...
0
票
1回答
160 件の閲覧数
React.jsでコメントアウトができずアロー関数を使った表示ができない
React.jsでアロー関数を使って表記リストを表示しようとしています。
参考書『React.js & Next.js超入門』に掲載されていたプログラムで
Webでサンプルコードのダウンロードができるようなのですが、zipファイルの解凍でエラーが出て見れない状態です。
問題
①React.js部分は、Javaスクリプトなので、以下の記事を参考にすると{// }...
0
票
0回答
58 件の閲覧数
Next.jsでfirebase.storage()エラー firebase.storage is not a function
Reactでfirebase.storage()を使うことはできたのですが(firebase7.20.0), Next.jsで同じコードを書いたのにfirebase.storage is not a function のエラーメッセージが出てしまいます.
何が原因なのでしょうか.
firebase 7.23.0
import firebase from "firebase";
...
1
票
1回答
191 件の閲覧数
umd形式でのみ提供されているブラウザ用ライブラリのReactによる動的読み込みとその完了検知の方法
React.js を用いて Web サイトを開発しています。
モジュール形式で提供されていない、<script> タグで読みこんでグローバルオブジェクト(window)に追加されたオブジェクトを利用するタイプの外部スクリプトを、React.js でうまく扱う方法についての質問です。
たとえば、決済代行業者 PAY.JP が提供する payjp.js はまさにそのパターンで、素の ...
0
票
0回答
429 件の閲覧数
JWTの正しい実装について
前提
現在バックエンドには
django rest framework
django rest framework jwt
フロントエンドには
next.js
react
redux
を用いてウェブサイトを開発しています。 JWT の正しい実装についていくつか質問があります。
また前提として
Next.js を使用しているので JWT は localStorage ではなく ...
0
票
1回答
109 件の閲覧数
Next.jsのgetStaticPaths内でParamsを参照できますでしょうか
最近Next.jsを個人で触り始め、現在Next.js Ver9.3.5でネストした動的ルーティングを実装しようとしています。
やりたいこと
やりたいことは /tokyo/shinjuku/ のようなページでの getStaticPathsの動的な実装です。
フォルダ構造は以下のようです。
[prefecture_name_e]/index.jsでは動的である必要がなかったため[...
0
票
0回答
173 件の閲覧数
Next.js+TypeScriptにてgetInitialPropsではなくgetServerSidePropsを使用したいが書き方が分からない。
teratailでも同様の質問を投げましたが、2週間経過しても回答が0件のため、こちらでも質問させて頂きます。
どちらに回答頂いても構いません。また進捗状況はどちらにも共有致します。よろしくお願い致します。
質問
Next.js + TypeScriptの勉強のため以下のリポジトリの改造を試みています。
https://github.com/jasonraimondi/nextjs-jwt-...
1
票
1回答
202 件の閲覧数
redux-form(v6)をtypescriptで使いたい
redux-formをtypescriptで利用しているかに質問です。
やりたいことは「redux-form(v6)をtypescriptで使いたい」です。
typescriptはv2を利用。
redux-formの型定義を@typesで取得するとv4のものが取得されます。
https://gist.github.com/rluiten/...
0
票
0回答
53 件の閲覧数
ログアウトボタンを2回押さないとログアウトできない。
Reactとreact-cookieでWebアプリのログアウト機能を作っています。
import React, { Component } from 'react';
import { withCookies, Cookies } from 'react-cookie';
import { instanceOf } from 'prop-types';
class Logout extends ...
0
票
2回答
87 件の閲覧数
React + Typescript + MaterialUI 表にレコードを追加したい
reactもmaterialuiも初心者です
質問用に余計なコードを除ければよいのですがすみません
APIから取得したレコードを表に追加表示したいと思い以下のコードを作成しました
import React, { useState } from 'react';
import GenericTemplate from '../lib/GenericTemplate';
import { ...
0
票
2回答
500 件の閲覧数
create-react-appでfaildと表示されました。
以下を実行した時エラーが出ました。
create-react-app react_lessons
Creating a new React app in /var/www/html/react_lessons/react_lessons.
Installing packages. This might take a couple minutes.
Installing react-...
0
票
2回答
366 件の閲覧数
react redux formタグのonSubmitが動作しない
現在、react-reduxを学習しています
以下のようなコードを書いたのですが、formタグ内のonSubmitが動作しません
inputタグ内のonChangeは問題なく動作します
どなたかご教示頂けましたら幸いです
import React,{ Component } from 'react'
import { connect } from 'react-redux'
...
1
票
2回答
35 件の閲覧数
ReactでAxiosを使用し結果を表示する仕組みで、mapのエラー(TS105)となる
Reactを始めたばかりで質問がおかしければ申し訳ございません
単純にAxiosで取得した結果を画面に列挙するだけのを勉強しています
以下のコードです
import React, { useState } from 'react'
import axios from 'axios';
const searchGoogleBooks = async (searchString: string) =&...
0
票
1回答
438 件の閲覧数
react-routerを導入するとcomponentDidMountが呼ばれなくなった
Reduxのサンプルコードである。asyncにreact-routerを導入しました。しかし、index.jsとroutes.jsを下記のように作成したところ、containers/App.jsのcomponentDidMountが呼ばれずにViewが表示されなくなってしまいました。どこが間違っているのかわかりますか。
index.js
import 'babel-polyfill';
...
0
票
1回答
61 件の閲覧数
NuxtとReactには、Vue CLI 3のような、便利な雛形作成ウィザード 兼 ビルドボタンを含むGUIは存在しますか?
私はこれまで Vue CLI 3で複数のプロダクトを作りました。
しかし、Nuxtを使ったプロジェクトを新規作成したことはありません。
Reactについても、シェアが高いので興味があります。
しかし、やはりプロジェクトを新規作成したことはありません。
その理由としては、私はVue CLI 3の便利さに慣れており、
便利な雛形作成ウィザード
ビルドボタンを含むGUI
が存在する環境に、...
0
票
1回答
70 件の閲覧数
Reactの子コンポーネントに親コンポーネントでuseStateで生成された値をPropsに渡した時の再描画について
React の useStateで生成されたstate(newOrTotal)を子コンポーネントに渡して、setNewOrTotalで更新した時に<div>{newOrTotal}</div>は更新されるのに子コンポーネント<Chart>が更新されません。どうしたら更新されるのか。
ご教示願えませんでしょうか。
const [newOrTotal, ...
0
票
0回答
36 件の閲覧数
Laravel単体では取得できるのにReact×Laravelでは空の配列になってしまう原因
MAMPを用いたローカル環境でツイッターのようなSNSのウェブアプリをLaravelで開発しております。
MySQL 5.7
PHP 7.2
Laravel 6.0
MacOS
一覧表示のタブの切り替えを非同期にすることと、実装済みのいいね機能やフォロー機能を非同期処理化するためにBladeの一部をReactに書き換えているところです。
ルートはweb.phpからapi.phpに変更しました。
...
0
票
0回答
27 件の閲覧数
react-test-rendererでmockのrefを使うコンポーネントのupdate時のテストが動きません
react-test-renderer(とjest)を使って、内部でrefを使ったコンポーネントのテストをしています。
create時は良いのですがupdate後は、useEffect後のツリー構造が帰ってきません。
import React from 'react';
import { create, act } from 'react-test-renderer';
// ...
0
票
1回答
93 件の閲覧数
react nativeで撮影した / 選択した 画像そのものを反転させるには?
前提・実現したいこと
他のサイトでも同じ質問をしております。よろしくお願いいたします。
react native で ImagePicker.showImagePicker から 選択、撮影した『画像そのもの』を水平方向にを反転させたいです。
発生している問題・エラーメッセージ
選択、撮影した 画像を反転して『表示』させることはできますが、『画像そのもの』を水平方向に反転させる方法がわかりません。
...
0
票
1回答
143 件の閲覧数
electronにてwebpackでソースのビルドが成功しているのに何も表示されない
electron reactにてwebpackでソースのビルドが成功しているのに何も表示されない
いろいろ調べたりして直したのですがどこが間違っているのかどんどんわからなくなってきました
参考資料として「ソシム株式会社 いまどきJSプログラマーのための Node.jsとReactアプリケーション開発テクニック」を読んでます
main.js
const electron = require(&...
0
票
0回答
21 件の閲覧数
FirebaseにGoogle Mapにマーカーした場所のデータを保存したい
現在
React Native + ExpoとFirebaseで地図にいろいろ投稿できるSNS型のスマホアプリを作成しています。地図はGoogle Map apiを使用しようと思っています
質問
Google Map上に場所をマークして、そのマークした詳細に投稿できるように実現しようと思っているのですが、その場所のデータ(経度、緯度)をFirebaseに保存する方法が分かりません。どうしたら、...
0
票
1回答
126 件の閲覧数
firebaseから取得したデータをReact内のjsxで表示できない
firebaseから取得したデータをreact componentで表示したいのですがundefinedが返され上手く表示されません。ライフサイクルの観点から上手くデータが同期されていない様に思うのですが、どなたかご教示いただく事は出来ないでしょうか。
【追記分】
class Grammer extends React.Component {
state =
{
N1:[],
...
0
票
0回答
30 件の閲覧数
React+TypeScriptでスタイル定義するには
TypeScriptとReactを使ってアプリケーションを作っています。
TSXファイルの中でstylesを使う時、別ファイルにSCSSファイルを用意して、それをwebpackなどを使ってimportするのが一般的だと思うのですが、最近別件でReact Nativeを使う機会がありその時はstyleを同じTSXファイルで
const styles = StyleSheet.create({
a:...
0
票
1回答
102 件の閲覧数
React (TypeScript) のHookでFunctionComponentをCurry化しようとするとエラーになります
ボタンの種類を渡す関数と、通常のHookのFunctionComponentの関数をカリー化しようとしたのですが、VSCodeのLintから以下のエラーメッセージが表示されます。
エラーメッセージ
(type: string) => (props: Props) => JSX.Element' を型 'FC<Props>' に割り当てることはできません。
パラメーター '...
0
票
0回答
98 件の閲覧数
Material-uiを使用しfirebase上にユーザー情報を登録したいが作成出来ない
現在Firebaseでメールとパスワードを使用してユーザー情報を作成しようとしています。コードは下記をご参照ください。
Stateの入力までは上手くいっているようなのですが、そのvalueの情報がfirebaseに上手く送信されません。hadleSubmit内でemailの部分にアドレスの形式が間違っていればエラーがコンソールに表示されるはずなのですが、...
0
票
2回答
86 件の閲覧数
TSXでリストを動的に作るには
動的に配列を作り、状況に応じてその配列の個数が変動します。
その配列の要素から必要な要素を取り出してHTMLのでリストとして表示するにはどうしたら良いでしょう?
書き方はTypeScriptを用いて、TSXで書いています。以下、イメージです:
const sample (index: number) => {
const sampleList: number[] = [];
for (...
0
票
0回答
76 件の閲覧数
react-redux ネスト下位のcontainerが持つmapStateToPropsが更新されない
実現したいこと、知りたいこと
react-redux, react-beautiful-dndを利用してtrelloクローンを作成している初心者です。
現在、以下のようなネスト構成で開発し始めています。
App.js
└─ MainContent.js
├─ Lists.js // container
│ └─ List.js ...
0
票
0回答
31 件の閲覧数
Action CreatorからRedux FormのSubmission Errorを投げると、Unhandled Rejection (SubmissionError): Submit Validation Failedが出てしまう
ReduxFormと Redux Thunkを使って、投稿フォームを実装しています。サーバーからのエラーレスポンスがあった場合に、Submission Errorを投げて、reduxformのstateにエラーを追加したいです。
現在、下記のような書き方をしているのですが、Unhandled Rejection (SubmissionError): Submit Validation ...
0
票
1回答
306 件の閲覧数
React Typescript 関数の引数の書き方
前提・実現したいこと
親コンポーネントで子コンポーネントに渡す関数を定義したいのですが、引数をどう書いたらいいのかがわかりません。
わかる人がいたら教えて欲しいです
該当のソースコード
**types.ts**
export type Task {
id: number
text: string
done: boolean
}
//親コンポーネント
import React, {...
5
票
1回答
298 件の閲覧数
text/babel とはなんですか?
Reactのドキュメントを読み始めました。
Getting Started – React に
自前のテキストエディタを使いたい場合は、この HTML ファイルをダウンロード・編集して、ブラウザを使ってからローカルファイルシステムから開くことができます。ランタイムでの遅いコード変換が行われる為、簡単なデモに留めておくことをおすすめします。
とあるので、「このHTMLファイル」...
0
票
1回答
99 件の閲覧数
reactでHTMLDivElementを取得したい
<div>1</div>
の1をreactjsを使って取得したいです。
純javascriptであれば、getelementbyidから簡単に取得できますが、reactの場合どのプロセスを辿って取得することになりますか?
functionコンポーネントでrefを使い実現したいです。
0
票
0回答
17 件の閲覧数
Mapしている配列オブジェクトのjsxに配列の番号に適応したinlinestyleインラインスタイルを当てたい
arrayの配列は実際はContenfulからfetchしており、配列の数、または新しいobjectを追加したり、削除したり、日によって違います。 なので、配列のobjectに直接valueを加えない方法を模索しています。
配列の1番目に適用したいスタイル animationDelay: 0s
配列1の2番目に適用したいスタイル animationDelay: 3s
...
0
票
1回答
153 件の閲覧数
SPAにおいてレスポンスパフォーマンスを損なわずにSSRのエラーハンドリングをする方法を模索しています
StackOverflow本家にも質問を投げていますが、回答がつかないのでこちらでも質問させてください。
もし有用な回答があった場合は両方に反映させます。
用語
SPA = Single Page Application
SSR = Server Side Rendering
実現したいこと
expressとReactでSSRを実装した時、レンダリング中にエラーが投げられたとします。
...
0
票
0回答
79 件の閲覧数
React redux componentでglobal stateをinput値として使用していますがinputで入力できない
componenntでglobal stateを使って表示しているですが、画面上にそのinputの値が変えられない。
値を変えるために新しいactionを発行してinputのonChangeとbindすると変更できるようになりましたが、
これではinputごとに新しいactionを作らないといけないことになるのでこういうやり方では違う気がします。
以下はcomponent PlayerData....
4
票
1回答
96 件の閲覧数
React で prop 受け渡しの shorthand はありますか?
例えば Component の extra という props を固定したコンポーネントを作るときに
const HogeComponent = props => <Component {...props} extra='hoge' />
と書けますが、以下のように省略して書く方法はありますか?
const HogeComponent = Component.bind({ ...
1
票
0回答
33 件の閲覧数
react typescript materialUIを使ったスタイルの当て方
環境
・reactとTypescriptを使っています
・デザインはmaterial UIを使っています。
・スタイルlはstyled-componentsで当てています。
わからないこと
Material UIからText Fileldをimportしてきてstyled-componetsを使ってスタイルを当てました。
しかし下記のようなエラーが出てしましました。
...
0
票
1回答
81 件の閲覧数
ReactでSoundJSを使う
質問内容
Reactを使ってSoundJSを使いたいのですが、エラーが出てしまいます。
また、音楽ファイルの読み込みにPreloadJSを使っています。
エラーの内容がよくわからないので教えていただけると幸いです。
Reactを使わない生JSでかくと動きます。
エラー文
Uncaught Error: The error you provided does not contain a stack ...
0
票
0回答
20 件の閲覧数
Reactで、Reporting API v4を用いてアナリティクスデータを表示
Reactにて、Reporting API v4を用いてアナリティクスのデータを取得して表示をさせたいです。
参考URL
はじめてのアナリティクス Reporting API v4: ウェブ アプリケーション向け JavaScript クイックスタート
取得までは出ているのですが、表示をする方法が分かりません。
以下が参考コードです。
import React, { useState, ...
0
票
0回答
320 件の閲覧数
create-react-app 原因不明のエラー ERR! Maximum call stack size exceeded
前提・実現したいこと
create-react-app の実行時にエラーが発生しており、解決できません...
8時間ほどかけて試行錯誤しましたが、挫折してしまいました...
ご教授願います。。。
発生している問題・エラーメッセージ
node -e "try{require('./postinstall')}catch(e){}"
npm ERR! Maximum call stack ...
0
票
1回答
2,290 件の閲覧数
npm startのエラーについて
Reactの環境構築をしたいのですがフォルダを作って
npx create-react-app tutorial
cd turotial
npm start
としてみたのですが npm start後、localhost3000を表示する途中で「このサイトにアクセスできません」と出てしまいます。
npmのバージョンは6.9.0,nodeのバージョンはv12.0.0です。
...
0
票
3回答
1,281 件の閲覧数
ReactのPropsに渡された時の再描画についての疑問
こんにちは。
React の props 更新に対しての再描画処理について
よい実装について教えてください。
次のサンプルを作りました。
私には動きそうに見えたのですが動きませんでした。
問題は、グローバルに定義した counterCount の値は修正されるのですが
それに応じて コンポーネント内の this.props.count が更新されない
というものです。
...
0
票
1回答
238 件の閲覧数
position: sticky; しているheaderのz-indexが効かない。
概要
現在、GatsbyJSでWebサイトを作っていますが、CSSの重なり順で詰まってしまいました。
具体的には、headerをposition sticky; top: 0;で最上部に固定し、そのheaderはページ共通にするためにlayoutコンポーネントに入れています。また、その一つ下に<main>{children}</main>の様にして、...