タグ付けされた質問 「reactjs」

react-native run-iosビルドを実行すると成功しますが、以下のエラーが発生します。私はいたるところをチェックしましたが、何も機能していないようです。sudoコマンドの前で使用しても効果はありません。Xcode 7.3、react-native-cli：0.2.0、react-native：0.24.1、node v5.11.0を使用しています。 === BUILD TARGET mobileTests OF PROJECT mobile WITH CONFIGURATION Release === Check dependencies ** BUILD SUCCEEDED ** Installing build/Build/Products/Debug-iphonesimulator/mobile.app An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2): Failed to install the requested application An application bundle was not found at the provided path. Provide a …

117 ios  reactjs  react-native 

私は、react-routerとともに開発中のwebpack-dev-serverを使用するアプリを作成しています。 webpack-dev-serverは、パブリックエントリポイントが1か所（つまり "/"）にあるとの想定に基づいて構築されているようですが、react-routerではエントリポイントの数に制限はありません。 webpack-dev-serverの利点、特に生産性に優れたホットリロード機能が欲しいのですが、react-routerで設定されたルートをロードできるようにしたいのです。 彼らが一緒に働くようにそれをどのように実装できますか？これを可能にするような方法で、webpack-dev-serverの前で高速サーバーを実行できますか？

117 javascript  reactjs  webpack  react-router 

を使用せずにreact-routerでクエリパラメータを更新する方法を見つけることができないようです<Link/>。hashHistory.push(url)クエリパラメータを登録していないようです。また、クエリオブジェクトなどを2番目の引数として渡すことができないようです。 を使用せずにURL をreact-router から/shop/Clothes/dressesにどのように変更しますか？/shop/Clothes/dresses?color=blue<Link> そして、onChange関数はクエリの変更をリッスンする唯一の方法ですか？クエリの変更が自動的に検出され、パラメーターの変更の方法に反応しないのはなぜですか？

117 reactjs  react-router 

反応アプリケーションを作成するすべての方法を試しています。私はmavenで試しましたが、今はFacebook Incubatorsのcrate-react-appビルドシステムで試しています。 create-react-app my-appnpm環境でコマンドを実行しようとしたところ、問題はありませんでした。しかし、自分の作業環境で同じコマンドを試したところ、コマンドプロンプトでこのエラーが発生しました npm ERR! node v6.10.2 npm ERR! npm v3.10.10 npm ERR! code UNABLE_TO_GET_ISSUER_CERT_LOCALLY npm ERR! unable to get local issuer certificate npm ERR! npm ERR! If you need help, you may report this error at: npm ERR! <https://github.com/npm/npm/issues>

117 node.js  reactjs  npm  create-react-app 

node.jsとcliをインストールしました インストールされたnode.js インストールされたreact-native-cli npm -g react-native-cli そして、「新しいプロジェクト」を作成しました。 react-native init new_project そして、その「new_project」ディレクトリ内で、metro bundlerがうまく機能するかどうかを確認するのに疲れました。 react-native start しかし、コマンドによって次のエラーが発生し、メトロが起動しません。このエラーを修正するための手がかりはありますか？（Windows 10 OSを使用しています。） コマンド： C:\projects\new_proj>react-native start エラー無効な正規表現：/(.\fixtures.|node_modules[]react[]dist[].|website\node_modules.|heapCapture\bundle.js|.\tests.)$/：終了していない文字クラス。詳細については、-verboseフラグを指定してCLIを実行してください。SyntaxError：無効な正規表現：/(.\fixtures.|node_modules[]react[]dist[].|website\node_modules.|heapCapture\bundle.js|.\tests.)$/：新しいRegExpで終了していない文字クラス（ ）ブラックリスト（D：\ projects \ new_proj \ node_modules \ metro-config \ src \ defaults \ blacklist.js：34：10）at getBlacklistRE（D：\ projects \ new_proj \ node_modules \ react-native \ node_modules @ react-native -community \ cli …

117 reactjs  react-native  react-native-android  react-native-cli  metro-bundler 

Djangoプロジェクト内でReactをセットアップしているときに、このエラーに遭遇しました モジュールビルドのModuleBuildErrorが失敗しました（./node_modules/babel-loader/lib/index.jsから）：SyntaxError：C：\ Users \ 1Sun \ Cebula3 \ cebula_react \ assets \ js \ index.js：実験的な構文 'classPropertiesのサポート'は現在有効になっていません（17：9）： 15 | 16 | class BodyPartWrapper extends Component { > 17 | state = { | ^ 18 | 19 | } 20 | Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel …

117 reactjs  webpack  babeljs  babel 

makeStyles()ライフサイクルメソッドを持つコンポーネントで使用しようとすると、次のエラーが発生します。 無効なフック呼び出し。フックは、関数コンポーネントの本体の内部でのみ呼び出すことができます。これは、次のいずれかの理由で発生する可能性があります。 Reactとレンダラー（React DOMなど）のバージョンが一致していない可能性があります あなたはフックのルールを破っているかもしれません 同じアプリにReactのコピーが複数ある可能性があります 以下は、このエラーを生成するコードの小さな例です。他の例では、子アイテムにもクラスを割り当てています。MUIのドキュメントには、他の使用方法を示しmakeStyles、ライフサイクルメソッドを使用する機能があるものは何も見つかりません。 import React, { Component } from 'react'; import { Redirect } from 'react-router-dom'; import { Container, makeStyles } from '@material-ui/core'; import LogoButtonCard from '../molecules/Cards/LogoButtonCard'; const useStyles = makeStyles(theme => ({ root: { display: 'flex', alignItems: 'center', justifyContent: 'center', }, })); const classes = …

117 reactjs  material-ui 

create reactappを使用してアプリをブートストラップしています。 ルートに2つの.envファイル.env.developmentを追加しました.env.production。 私が.env.development含む： API_URL=http://localhost:3000/api CALLBACK_URL=http://localhost:3005/callback を使用react-scripts startしてアプリを実行し、コンソール出力するprocess.envと、吐き出されます { NODE_ENV: "development", PUBLIC_URL: "" } 私はさまざまなことを試しましたが、開発ファイルで検証可能なものを取得していません。何が間違っているのでしょうか。 ディレクトリ構造は次のとおりです。 /.env.development /src/index.js Package.jsonスクリプトは次のとおりです。 "start": "export PORT=3005; npm-run-all --parallel server:start client:start", "client:start": "export PORT=3005; react-scripts start", "server:start": "node server.js", "build": "react-scripts build", 編集： @jamcreenciaは、変数の前にREACT_APP。を付ける必要があることを正しく指摘しました。 編集2 ファイルに名前を付けて.envも問題ありませんが、.env.developmentまたはを使用した場合は機能しません.end.production

117 reactjs  create-react-app 

私はバックボーンプロジェクトでFacebook Reactを使用し始めており、これまでのところ、それは本当に順調です。 しかし、Reactコードに重複が侵入していることに気づきました。 たとえば、やのような状態のフォームのようなウィジェットがいくつかあります。ボタンを押すと、フォームを検証し、要求を行って、状態を更新する必要があります。もちろん、状態はフィールド値とともにReact内に保持されます。INITIALSENDINGSENTthis.state これらがバックボーンビューである場合、私はと呼ばれる基本クラスを抽出しますFormViewが、私の印象では、Reactはビューロジックを共有するサブクラスを承認もサポートもしていないようです（私が間違っている場合は修正してください）。 Reactでコードを再利用するための2つのアプローチを見てきました。 Mixins（Reactに同梱されているLinkedStateMixinのような）; コンテナコンポーネント（react-infinite-scrollなど）。 Reactでの継承よりもミックスインとコンテナーが優先されることは正しいのでしょうか？これは意図的な設計決定ですか？ 2番目の段落の「フォームウィジェット」の例に、ミックスインまたはコンテナコンポーネントを使用する方が理にかなっていますか？ ここでの要点だFeedbackWidgetとJoinWidgetそれらの現在の状態では。それらは類似した構造、類似したbeginSendメソッドを持ち、両方ともいくつかの検証サポートが必要です（まだありません）。

116 javascript  refactoring  mixins  reactjs 

入力を変更することは想定されていないため、オブジェクトを複製して変更する必要があります。私は以下を使用するreduxスタータープロジェクトで使用される規則に従っていました： ADD_ITEM: (state, action) => ({ ...state, items: [...state.items, action.payload.value], lastUpdated: action.payload.date }) アイテムを追加する場合-配列にアイテムを追加するためにスプレッドを使用します。 私が使用した削除： DELETE_ITEM: (state, action) => ({ ...state, items: [...state.items.splice(0, action.payload), ...state.items.splice(1)], lastUpdated: Date.now() }) しかし、これは入力状態オブジェクトを変更しています-新しいオブジェクトを返しているにもかかわらず、これは禁止されていますか？

116 javascript  reactjs  redux 

私はReact.jsから始めて、簡単なフォームを作成したいのですが、ドキュメントでそれを行う2つの方法を見つけました。 最初のものは使用している参考文献を： var CommentForm = React.createClass({ handleSubmit: function(e) { e.preventDefault(); var author = React.findDOMNode(this.refs.author).value.trim(); var text = React.findDOMNode(this.refs.text).value.trim(); if (!text || !author) { return; } // TODO: send request to the server React.findDOMNode(this.refs.author).value = ''; React.findDOMNode(this.refs.text).value = ''; return; }, render: function() { return ( <form className="commentForm" onSubmit={this.handleSubmit}> <input type="text" …

116 reactjs 

バニラjsで知っている、私たちができる onclick="f1();f2()" ReactJSでonClickの2つの関数呼び出しを行うことと同等のものは何ですか 私は1つの関数を呼び出すことがこのようなものであることを知っています： onClick={f1}

116 javascript  reactjs 

私の反応アプリでは、axiosを使用してREST apiリクエストを実行しています。 ただし、リクエストとともにAuthorizationヘッダーを送信することはできません。 これが私のコードです： tokenPayload() { let config = { headers: { 'Authorization': 'Bearer ' + validToken() } } Axios.post( 'http://localhost:8000/api/v1/get_token_payloads', config ) .then( ( response ) => { console.log( response ) } ) .catch() } ここでは、validToken()メソッドは単純にブラウザストレージからトークンを返します。 すべてのリクエストには、500エラー応答があり、 リクエストからトークンを解析できませんでした バックエンドから。 各リクエストで認証ヘッダーを送信する方法は？反応する他のモジュールをお勧めしますか？

116 reactjs  rest  token  axios  access-token 

Reactアプリを実行しようとすると、次のエラーが発生します。 ./src/components/App/App.js インポートエラーの試行：「combineReducers」 は「../../store/reducers/」からエクスポートされません。 これが私がエクスポートする方法ですcombineReducers： import { combineReducers } from 'redux'; import userReducers from './userReducers'; import articleReducers from './articleReducers'; export default combineReducers({ userReducers, articleReducers }); これが私がそれをインポートする方法ですApp.js： import { combineReducers } from '../../store/reducers'; エクスポート方法の何が問題になっていcombineReducersますか？

116 reactjs  redux 

以下のフックの例を検討する import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } 基本的に、this.forceUpdate（）メソッドを使用して、以下の例のように、Reactクラスコンポーネントでコンポーネントをすぐに再レンダリングするように強制します。 class Test extends Component{ constructor(props){ super(props); this.state = { count:0, count2: 100 } this.setCount = …

116 javascript  reactjs  react-native  react-hooks