[reactjs] タグが付いた質問

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

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

react,material-uiのselectにて、labelと要素が重なって表示される

以下のような形で、reactにてmaterial-uiを使用し、セレクトボックスを作成しています。 しかし、labelとセレクトボックス内の要素が重なって表示されてしまいます。 どのような観点で修正を実施すればよいかご教示いただければ幸いです。 componentWillMount() { navigator.mediaDevices.enumerateDevices()....
  • 37
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です。 ...
  • 3
1
1 回答
174 閲覧数

発行されたActionをどうやって対応するReducerに渡しているのか

はじめて、質問を投稿させていただきます。 4月から新卒としてWeb系企業に勤めています。 幸運なことに新規案件に携わることができ、とても楽しくエンジニア生活をスタートさせることができました。 今現在はReactとReduxを使って開発を行っていますが、そこでどうしても理解できないことがありましたので、それをご質問させていただきたいです。 複数のActionと複数のReducerが存在する場合、...
  • 13
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://...
  • 97
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 ではなく ...
  • 11
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-...
  • 53
2
2 回答
2,372 閲覧数

ReactもしくはNode.jsで、既存のPDFをフォーマットに使用し、PDF出力を行いたい

実現したいこと 現在 フロントエンドをReactでサーバレス環境(Firestore + Cloud Functions)にてWEBの開発を行なっています。 開発の仕様で、既存のPDFをフォーマットに使用して(値をあてはめて)PDFを出力したいのですが、ライブラリ等を調査したところクライアントサイド(React)だけでは既存のPDFをフォーマットに使用しての出力する糸口が見つかっておりません。 ...
  • 53
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 &...
  • 31
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 ...
  • 319
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を渡したいのですがどうすればできますか?
  • 1
0
1 回答
446 閲覧数

react nativeでコンポーネントのアップデートの仕方について教えてください。

初めまして。 お世話になります。 React Nativeのことで質問です。 React-Native-cliを利用してプロジェクトを作成したのですが、package.json内のreactのバージョンが^16.3.0-alpha.1となってしまっている影響か、次のようなWarningが出るようになりました。 Warning: componentWillReceiveProps is ...
  • 3
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()...
  • 1
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....
  • 11
2
1 回答
801 閲覧数

Vue や React では JSX のような JavaScript の構文拡張の使用が必須ですか?

生のJSのDOM操作がしんどいです。 下記のように非常に大変な作業なのですが、これを解決するには文法の癖の激しいreactやvueなどのフレームワークを使うしかないのでしょうか? http://qiita.com/kouh/items/dfc14d25ccb4e50afe89 基本的には関数、文法を生のJSで書き、reactなどをDOM操作の部分だけ使うという方法か、...
user avatar
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 ただ「アクション」とかのようなカタカナの言葉になるのでしょうか。 よろしくお願いします。
  • 103
-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/...
  • 11
0
1 回答
2,095 閲覧数

ReactのcomponentWillUnmountでbeforeunload的なことがしたい

Reactでbeforeunloadを使いたいのですが、windowのスコープの範囲に収まらないbeforeunloadイベントを拾えないため、componentWillUnmountが呼ばれたタイミングでconfirm関数を呼び、キャンセルされればcomponentWillUnmountをpreventしたいです。 やりたいことは以下のような感じです。 ...
  • 65
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: []}; }, ...
  • 349
2
1 回答
670 閲覧数

reactのチュートリアルはなぜポート番号を指定?

ポート番号指定について reactチュートリアルのサーバサイドが分からないので教えてください。 ・最終的に下記へアクセスして確認するみたいですが、なぜポート番号を指定しているのでしょうか? And visit http://localhost:3000/. ・server.phpを見るとポート処理が書いてあるのですが、これは何のため? ・ないとセキュリティ的にマズい? ・...
  • 6,206