[reactjs] タグが付いた質問
Reactはユーザーインタフェースを組み立てるためのJavaScriptライブラリです。宣言的なパラダイムによって、あなたのアプリケーションがどう動作しているかをわかりやすくすると共に、効率が良くかつ変更を容易にすることを目標としています。
254
質問
1
票
0
回答
895
閲覧数
react,material-uiのselectにて、labelと要素が重なって表示される
以下のような形で、reactにてmaterial-uiを使用し、セレクトボックスを作成しています。
しかし、labelとセレクトボックス内の要素が重なって表示されてしまいます。
どのような観点で修正を実施すればよいかご教示いただければ幸いです。
componentWillMount() {
navigator.mediaDevices.enumerateDevices()....
0
票
1
回答
2,951
閲覧数
npm startのエラーについて
Reactの環境構築をしたいのですがフォルダを作って
npx create-react-app tutorial
cd turotial
npm start
としてみたのですが npm start後、localhost3000を表示する途中で「このサイトにアクセスできません」と出てしまいます。
npmのバージョンは6.9.0,nodeのバージョンはv12.0.0です。
...
1
票
1
回答
174
閲覧数
発行されたActionをどうやって対応するReducerに渡しているのか
はじめて、質問を投稿させていただきます。
4月から新卒としてWeb系企業に勤めています。
幸運なことに新規案件に携わることができ、とても楽しくエンジニア生活をスタートさせることができました。
今現在はReactとReduxを使って開発を行っていますが、そこでどうしても理解できないことがありましたので、それをご質問させていただきたいです。
複数のActionと複数のReducerが存在する場合、...
0
票
2
回答
1,658
閲覧数
react redux formタグのonSubmitが動作しない
現在、react-reduxを学習しています
以下のようなコードを書いたのですが、formタグ内のonSubmitが動作しません
inputタグ内のonChangeは問題なく動作します
どなたかご教示頂けましたら幸いです
import React,{ Component } from 'react'
import { connect } from 'react-redux'
...
0
票
1
回答
103
閲覧数
React.js renderのないクラス定義
下のURLでどうやってローソク足が描画されているのか調べています。
CandlestickSeriesコンポーネントがそれを担っていると思いますが、CandlestickSeries内でrenderされたGenericChartComponentにrenderが定義されていません。では、GenericChartComponentの返り値は何になるのでしょうか?
https://...
1
票
0
回答
84
閲覧数
オプティマイズリー (Optimizely A/B テスト)でのReact.jsの記述
ターゲットにしたいページが、React.jsで動いている為 JQueryやVanila JS での記述ではなく全てReact での記載でエレメントを書き換えたいと考えております。今まで、cssとjQueryでの記載しかしたことがなく、React.jsで全て動いているページをターゲットにしてオプティマイズリー上で上書きしたくてもできません。HTMLの削除、css追加なども全く効かない状態です。
...
0
票
1
回答
1,765
閲覧数
Reactのrenderで何も表示されない
書籍"Electronではじめるアプリ開発"のchapter4の始めで詰まってしまいました。
(5)表示される画像に(4)で書いているHello, Electron and React JSXが表示されることを期待しているのですが、なぜ出ないか?
どなたか教えてくださいませんか。
(1)entryのindex.js
import { app } from "electron";
import ...
0
票
0
回答
549
閲覧数
JWTの正しい実装について
前提
現在バックエンドには
django rest framework
django rest framework jwt
フロントエンドには
next.js
react
redux
を用いてウェブサイトを開発しています。 JWT の正しい実装についていくつか質問があります。
また前提として
Next.js を使用しているので JWT は localStorage ではなく ...
0
票
1
回答
2,595
閲覧数
IE11でarrow関数の変換ができない @babel/plugin-transform-arrow-functions が機能しない
ReactでIE11向けサイトを作成しているのですが、
Chromeでは使用できるarrow関数がIE11では構文エラーとなってしまいます。
@babel/plugin-transform-arrow-functions はarrow関数をfunctionに変換してくれるプラグインだという認識ですが正しいでしょうか。
buildした際にarrow関数が残ってしまいます。
設定は下記になります。
...
0
票
0
回答
467
閲覧数
Reactのmaterial-ui-pickersのTimePickerの時間表記を変更したい
お世話になります。
ReactでTimePickerを使用していて時間の表記を00:00~23:59ではなく、05:00~28:59に変更したいのですが実装例をご教示きいただけませんでしょうか。
※イメージ
現状:
期待値
よろしくお願い致します。
0
票
1
回答
51
閲覧数
React公式サイト「MAIN CONCEPTS」内、「Lists and Keys」の例「Keys Must Only Be Unique Among Siblings」で「posts」ではなく「post」となっているのはなぜでしょうか。
表題の件、CodePenに該当コードが公開されています。
https://codepen.io/gaearon/pen/NRZYGN?editors=0010
React公式サイトの該当ページは下記になります。
https://reactjs.org/docs/lists-and-keys.html
function Blog(props) {
const sidebar = (
&...
1
票
0
回答
283
閲覧数
Firebase Hostingでリダイレクト処理ができない
Firebase Hostingを用い、React(ルーティングにはreact-router-domを使用)にてWEBアプリを公開しようとしています。basic認証を行いたいのですが、index.htmlを起点としたSPAなので、cloud functionsを通してルーティング処理をしようとしていますが、うまくいきません。
実装の内容としては以下リンクにあるような「basic-auth-...
2
票
2
回答
2,372
閲覧数
ReactもしくはNode.jsで、既存のPDFをフォーマットに使用し、PDF出力を行いたい
実現したいこと
現在 フロントエンドをReactでサーバレス環境(Firestore + Cloud Functions)にてWEBの開発を行なっています。
開発の仕様で、既存のPDFをフォーマットに使用して(値をあてはめて)PDFを出力したいのですが、ライブラリ等を調査したところクライアントサイド(React)だけでは既存のPDFをフォーマットに使用しての出力する糸口が見つかっておりません。
...
1
票
1
回答
550
閲覧数
Gatsby, Stripe: 決済ボタン実装をしようとしたら 'Uncaught TypeError: Cannot read property 'configure' of undefined'と出る
Gatsby公式ドキュメントにて、ECサイト構築チュートリアルに沿って開発をしています。
ただ、checkout.jsをチュートリアルの通りに書くと、以下のエラーが出て、画面全体が真っ白になります。
Uncaught TypeError: Cannot read property 'configure' of undefined
The above error occurred in the &...
8
票
1
回答
4,133
閲覧数
仮想DOMを使うと早くなる理由がいまいちわかりません
実DOMを操作するよりも仮想DOMを使ったほうが速いという話をききますが、
実際に早くなる理由がいまいちよくわかりません。
変更前と変更後を比較して差分を変更するから、という説明を聞くと納得しそうになりますが、
DOM全体でなく、DOMの一部を再レンダリングするブラウザの機能ををうまいこと使うという意味なのでしょうか。
そういった場合にどういったjavascriptの関数が実行されるのかなど、...
6
票
1
回答
167
閲覧数
static x = ( { y } ) => { ... }の仕組みについて
https://www.youtube.com/watch?v=JbaZs1dzsVo
上記react native参考動画の
static navigationOptions = ({navigation}) => {...}
の部分なのですが、navigationを引数に受け取れる仕組みが理解出来ません。
そもそも変数を{}で囲むとどういった動きをするのでしょうか。
...
0
票
1
回答
3,532
閲覧数
axiosでHerokuに存在しているAPIサーバーからJSONをgetできない
聞きたいこと
axiosを使用してHerokuに存在しているAPIサーバーからJSONをGetしたいと思っているのですが、
以下のようなエラーが発生してしまいできません。。。
APIサーバー側・クライアント側に問題があるのかの切り分けもできていない状態です…
- エラー内容
No 'Access-Control-Allow-Origin' header is present on the ...
2
票
1
回答
74
閲覧数
webpackのパッケージ依存について
こんにちは、初めまして。
今Reactで開発を始めようと環境を作っているところですが、
npmでwebpackをインストールするところでバージョン依存ではまっています。
最新の webpac@k4.8.3 を使いたいのですが、
インストールしようとすると以下が出ます。
webpack4.8.3 => UNMET PEER DEPENDENCY ajv@6.5.0
上記が出たので、
ajv@6....
-1
票
1
回答
3,685
閲覧数
Reactのrender()内で値の文字列結合をするときの書き方が不明です
render() {
let tags = this.props.tags;
if (!Array.isArray(this.props.tags)) {
tags = [tags];
}
let tagsDisplayName = "name";
if(tags.length > 0){
const category =...
1
票
1
回答
133
閲覧数
ReactのRenderに利用したい関数が文字列になっている場合の呼出し方
React のRender処理で困っていることがあります。
func1という関数があり、renderする際に呼び出します(例: return (`<func1/>`))。
例えば、下記のようなJSONの値にあるfuncNameにある文字列から 実際の関数名としてrenderしたいのですが、どうすればよろしいでしょうか?
{funcName:"func1"}
上記の値だった場合、
...
0
票
1
回答
322
閲覧数
SyntaxError: Unexpected token
SyntaxError: Unexpected tokenとエラーが出ます。
import React, { Component } from 'react';
import axios from 'axios';
import SearchForm from './SearchForm';
import GeocodeResult from './GeocodeResult';
import ...
3
票
1
回答
1,610
閲覧数
React.DOM が undefined でエラーになる
基礎的なことを学びたいので、まずはJSX無しで動かしたいと思い、React.DOM.div を使用すると以下のエラーが出ます。
build.js:20123 Uncaught TypeError: Cannot read property 'div' of undefined
コード
const React = require('react');
// 略
const HelloWorld ...
0
票
1
回答
61
閲覧数
componentWillUpdate()時に子のcomponentにpropsでstateを渡したい
あるcomponentでcomponentWillUpdate()をし、
state、またはpropsが更新されたタイミングで子のcomponentにpropsで親のcomponentのstateを渡したいのですがどうすればできますか?
0
票
1
回答
446
閲覧数
react nativeでコンポーネントのアップデートの仕方について教えてください。
初めまして。
お世話になります。
React Nativeのことで質問です。
React-Native-cliを利用してプロジェクトを作成したのですが、package.json内のreactのバージョンが^16.3.0-alpha.1となってしまっている影響か、次のようなWarningが出るようになりました。
Warning: componentWillReceiveProps is ...
0
票
0
回答
174
閲覧数
React.jsにてToDoリストを制作しています。
実現したいこと
お世話になっております、この度初めてReact.jsを導入しました。
現在ToDoリストを制作しているのですが、タスクを登録した際に登録した日時もリストに反映される仕組みを構築したいと考えているのですが、完全に手詰まりになってしまいました。
是非皆様のお知恵をご教授いただけたら幸いです。
...
0
票
1
回答
7,478
閲覧数
setState後、render()が更新されない
react-nativeを用いてコンポーネント間の値のやりとりをしたいと思いっています。
子コンポーネントのイベントから親コンポーネントのchangecountを実行して、親コンポーネントの{selectedTab:0}を更新。sub2をタップした回数をAppでインクリメントしてSub1に表示することを期待していますが、render()は一度しか呼ばれてないようです。setState()...
0
票
1
回答
197
閲覧数
OnsenUI + React + cordova の使用について
現在、Monaca CLIを使用してOnsenUI + React + reduxで開発を進めています。
そこで質問なのですが、React上でCordovaプラグインを使用するにはどうすればよいでしょうか?
ひとまず端末情報を表示しようと思い、npmにて「cordova-plugin-device」を取得し、
http://docs.monaca.io/ja/reference/cordova_6....
2
票
1
回答
801
閲覧数
Vue や React では JSX のような JavaScript の構文拡張の使用が必須ですか?
生のJSのDOM操作がしんどいです。
下記のように非常に大変な作業なのですが、これを解決するには文法の癖の激しいreactやvueなどのフレームワークを使うしかないのでしょうか?
http://qiita.com/kouh/items/dfc14d25ccb4e50afe89
基本的には関数、文法を生のJSで書き、reactなどをDOM操作の部分だけ使うという方法か、...
0
票
1
回答
225
閲覧数
jQueryMobileとReact.jsは組み合わせられませんか?
いろいろやっても動きませんでしたので、
質問させてください。
JavaScriptには慣れていませんので、
常識的な変なこと聞いていたら申し訳ないです。
こちらのサイトのReact.jsのサンプルを動かしました。
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! - paiza開発日誌
http://paiza.hatenablog....
0
票
1
回答
119
閲覧数
React の cloneElementをreturn したい
Reactで下記のようなコンポーネントを作りました
data は API を受け取るためのものです
const Loop = ({data,children}) => {
return (
<ul>{
data.map((item,index)=> {
return (
React.cloneElement(
...
0
票
1
回答
372
閲覧数
Reduxの言葉、日本語で何という?
Reactの開発をし、Reduxも使っています。ドキュメンテーションを書いている中でReduxについて書いているのですが、下記の言葉を日本語で何というのか分かりません。
React
Redux
Actions
Action Creator
Reducer
ただ「アクション」とかのようなカタカナの言葉になるのでしょうか。
よろしくお願いします。
-1
票
2
回答
546
閲覧数
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-...
1
票
1
回答
206
閲覧数
redux-form(v6)をtypescriptで使いたい
redux-formをtypescriptで利用しているかに質問です。
やりたいことは「redux-form(v6)をtypescriptで使いたい」です。
typescriptはv2を利用。
redux-formの型定義を@typesで取得するとv4のものが取得されます。
https://gist.github.com/rluiten/...
0
票
1
回答
2,095
閲覧数
ReactのcomponentWillUnmountでbeforeunload的なことがしたい
Reactでbeforeunloadを使いたいのですが、windowのスコープの範囲に収まらないbeforeunloadイベントを拾えないため、componentWillUnmountが呼ばれたタイミングでconfirm関数を呼び、キャンセルされればcomponentWillUnmountをpreventしたいです。
やりたいことは以下のような感じです。
...
0
票
1
回答
468
閲覧数
Reactで可変長のinputを扱いたい
inputのvaluesを配列で保持するときに、どのinputの値が変化したのかをindexのようなものから取得して配列を更新するようにしなければならないと考えますが、そのようなことは可能でしょうか。コンポーネントのrender()は以下のとおりです。
render(){
var posList = this.state.query.pos.map((p) => {
...
0
票
1
回答
225
閲覧数
Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.(…)
Reactjsで画像のBase64表現をサーバから取得し表示するコンポーネントを作成しています。コードは以下のとおりです。
DataImage.react.js
import React, { Component } from 'react';
import DataImageStore from '../../stores/DataImageStore';
import ...
0
票
2
回答
1,159
閲覧数
material-uiでAppBarの右側にアイコンがでない
Reactjsのmaterial-uiでAppBarの右側にアイコンを置きました。しかし、現れるはずのアイコンが出てきません。
どのようにすれば表示されるのでようか。
import React, { Component } from 'react';
import { Link } from 'react-router';
import getMuiTheme from 'material-ui/...
0
票
1
回答
469
閲覧数
react-routerでエンターキーをおした時ページ遷移したい
react-routerを使っています。そこで質問ですが、下記のDOMでTextFieldにフォーカスした状態でエンターキーを押した時に、Linkをクリックした時と同じアクションつまり(ページ遷移)を起こしたいのですがAPIなどは提供されているのでしょうか。
<div>
<TextField
floatingLabelText="huga"
...
0
票
2
回答
1,090
閲覧数
Uncaught TypeError: Cannot read property 'open' of undefined
React.jsでmaterial-uiを使い下記コードを作成しましたが、leftButtonTouchedでタイトルのようなエラーが出てしまいます。どこが間違っているのでしょうか。
import React, { Component } from 'react';
import { LeftNav, MenuItem, AppBar } from 'material-ui';
export ...
0
票
1
回答
1,046
閲覧数
react-routerで親で定義したcomponentが表示されない
react-routerを使ったアプリで下記のルーターを定義して、一番外側のRootにmaterial-uiのAppBarとLeftNavを定義しましたがそれらが表示されませんし、divも表示されていません。しかしその子供のViewは表示されています。
router.js
export default (
<Route path="/" component={Root}>
...
0
票
1
回答
543
閲覧数
react-routerを導入するとcomponentDidMountが呼ばれなくなった
Reduxのサンプルコードである。asyncにreact-routerを導入しました。しかし、index.jsとroutes.jsを下記のように作成したところ、containers/App.jsのcomponentDidMountが呼ばれずにViewが表示されなくなってしまいました。どこが間違っているのかわかりますか。
index.js
import 'babel-polyfill';
...
1
票
1
回答
818
閲覧数
ReactjsとjQueryフレームワークを同時に使うには
ReactJSとjQueryとmaterializeというjQueryを使ったフレームワークを使ったサイトを作成しています。
そこで質問です。Reactにより生成されるgridにmaterializeによるgridレイアウトを使用していますが、スマホで観た時にグリッドが1カラムになってくれません。しかし、PCのブラウザ(クローム、サファリで確認)では画面幅を小さくした時に1カラム表示となります。...
0
票
1
回答
186
閲覧数
jsxコマンドが実行出来ません
初心者な質問ですみません。node.jsをインストールし、npmコマンドにてreact-toolsを入れました。
react-toolsを入れればnpm jsxが使えると書いてあったのですが、使えません。
npm install -g jsxをしてみてもno filesとなります。
どうすればコンパイルできるのか教えて下さると助かりますお願いします
2
票
1
回答
604
閲覧数
react nativeのwebviewでlocalのhtmlを読み込む方法を教えてください
<WebView url='./web/webview.html' style={{flex: 1}} />
上記のような形で表示したいのですが。。。
-1
票
1
回答
746
閲覧数
react native Xcodeのエラー
react-nativeをXcodeで実行しようとしてエラーが出ます。
DEST=/Users/(Username)/Library/Developer/Xcode/DerivedData/Sample-djxgbolzezazefbovcdjimcomloy/Build/Products/Debug-iphonesimulator/Sample.app
+ react-native ...
6
票
1
回答
273
閲覧数
仮想DOMについての疑問
jQueryとかでDOMを操作すると、reactjs側で保持している仮想DOMと差が生じると思います。そうすると、レンダリング時に差分が反映され、jQueryとかで行った操作が消えてしまうような気がしてなりません。
大丈夫なんでしょうか?
2
票
1
回答
3,169
閲覧数
es6のmodulesでglobalにimportとするベストプラクティスを知りたい
babelifyを利用してjsを実装しています。
その中で、reactやunderscore、jqueryといったライブラリを使用するとき、アプリケーション全体で使用することが多いと思います。
このようにグローバルで使用するものは、どう扱うのが適切でしょうか。
Reactで実装する場合、使用するファイルで都度、下記のようにimportしています。
import Reacr from '...
0
票
1
回答
119
閲覧数
ReactのRouteHandlerが反応しない
React-Routerを使おうとしているのですが、
RouteHandlerで呼び出されるはずのDOMが表示されません。
HTML:https://github.com/hideokamoto/wp-react/blob/master/index.html
JS:https://github.com/hideokamoto/wp-react/blob/master/src/app.js
...
2
票
1
回答
759
閲覧数
renderが2度呼ばれるため、rows.push()の際にundefinedエラーが出る
react.jsとjqueryでサーバーから複数のオブジェクトが入った配列を取得し、
全てのオブジェクトの値をHTMLに表示したいのですが、
ajaxで取得する前に一度renderが読まれてしまいます。
var test = React.createClass({
getInitialState: function() {
return {data: []};
},
...
2
票
1
回答
670
閲覧数
reactのチュートリアルはなぜポート番号を指定?
ポート番号指定について
reactチュートリアルのサーバサイドが分からないので教えてください。
・最終的に下記へアクセスして確認するみたいですが、なぜポート番号を指定しているのでしょうか?
And visit http://localhost:3000/.
・server.phpを見るとポート処理が書いてあるのですが、これは何のため?
・ないとセキュリティ的にマズい?
・...