タグ付けされた質問 「ecmascript-6」

Reactの学習に少し時間を費やした後、コンポーネント作成の2つの主要なパラダイムの違いを理解しました。 私の質問は、いつどちらを使用する必要があるのか​​、そしてその理由は何ですか？一方の利点ともう一方の利点は何ですか？ ES6クラス： import React, { Component } from 'react'; export class MyComponent extends Component { render() { return ( <div></div> ); } } 機能的： const MyComponent = (props) => { return ( <div></div> ); } そのコンポーネントによって操作される状態がないときはいつでも機能的だと思いますが、それはそれですか？ ライフサイクルメソッドを使用する場合は、クラスベースのコンポーネントを使用するのが最善だと思います。

212 javascript  reactjs  ecmascript-6  redux 

ES6で新しい矢印構文に変換しようとしている関数があります。これは名前付き関数です： function sayHello(name) { console.log(name + ' says hello'); } varステートメントなしでそれに名前を付ける方法はありますか？ var sayHello = (name) => { console.log(name + ' says hello'); } 明らかに、私はそれを定義した後でのみ、この関数を使用できます。次のようなもの： sayHello = (name) => { console.log(name + ' says hello'); } ES6でこれを行う新しい方法はありますか？

204 javascript  ecmascript-6  arrow-functions 

私はこれらの2つの間に大きな違いがあるかどうかを判断しようとしexport defaultています。 import myItem from 'myItem'; そしてexport const私ができることを使用して： import { myItem } from 'myItem'; これ以外の違いやユースケースはあるのでしょうか。

204 javascript  ecmascript-6  es6-modules 

現在、webpack / babelを介してReactアプリでES6を使用しています。インデックスファイルを使用して、モジュールのすべてのコンポーネントを収集し、それらをエクスポートしています。残念ながら、これは次のようになります。 import Comp1_ from './Comp1.jsx'; import Comp2_ from './Comp2.jsx'; import Comp3_ from './Comp3.jsx'; export const Comp1 = Comp1_; export const Comp2 = Comp2_; export const Comp3 = Comp3_; だから私はこのように他の場所からうまくインポートすることができます： import { Comp1, Comp2, Comp3 } from './components'; 明らかにそれはあまり良い解決策ではないので、他に方法があるかどうか疑問に思いました。インポートしたコンポーネントを直接エクスポートできないようです。

202 javascript  ecmascript-6  webpack  babeljs 

ECMAScript 6にはまだ慣れていません。アプリケーションコードにES6を使用するReact Starter Kitリポジトリのクローンを作成しました。リンターがディレクティブの発生を禁止するように構成されていることを知って驚きましたuse strict。これは、ES6より前のJavaScriptで推奨されていたものだと思いました。それで、ポイントは何ですか？

200 javascript  ecmascript-6  strict  es6-modules 

以前は、babelが行を追加していましたmodule.exports = exports["default"]。これはもう行われません。これが意味することは、私ができる前のことです。 var foo = require('./foo'); // use foo 今私はこれをしなければなりません： var foo = require('./foo').default; // use foo 大したことではありません（そして、これはそれがずっとあったはずのことだと私は推測しています）。問題は、以前は機能していた方法に依存するコードがたくさんあることです（ほとんどのコードをES6インポートに変換できますが、すべてをインポートできるわけではありません）。私のプロジェクトを通過してこれを修正する必要なしに、古い方法を動作させる方法に関するヒントを誰かに教えてもらえますか？ ありがとう！ 例： 入力： const foo = {} export default foo Babel 5での出力 "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var foo = {}; exports["default"] = foo; module.exports = exports["default"]; Babel …

195 ecmascript-6  commonjs  babeljs 

jsファイルでは、require toの代わりにimport toを使用しました import co from 'co'; インポートは「出荷機能」であり、ランタイムフラグなしでサポートされているため（https://nodejs.org/en/docs/es6/)、nodejsで直接実行しようとしましたが、エラーが発生しました import co from 'co'; ^^^^^^ SyntaxError: Unexpected token import それから私はバベルを使ってみました npm install -g babel-core npm install -g babel-cli npm install babel-core //install to babel locally, is it necessary? とによって実行されます babel-node js.js まだ同じエラーが発生しますが、予期しないトークンのインポート？ どうすればそれを取り除くことができますか？

192 javascript  node.js  ecmascript-6  babeljs  package.json 

私は次のようなことをする必要があります： if (condition) { import something from 'something'; } // ... if (something) { something.doStuff(); } 上記のコードはコンパイルされません。投げSyntaxError: ... 'import' and 'export' may only appear at the top levelます。 ここにSystem.import示すように使ってみましたが、どこSystemから来たのかわかりません。受け入れられなかったES6の提案ですか？その記事からの「プログラムAPI」へのリンクは、非推奨のドキュメントページにダンプします。

192 javascript  module  ecmascript-6 

ことを知っているに来たv15.3.0反応し、我々は新しいベース・クラスと呼ばれる持ってPureComponentに拡張するPureRenderMixinビルトインを。私が理解しているのは、内部では小道具の浅い比較を採用しているということshouldComponentUpdateです。 これで、Reactコンポーネントを定義する3つの方法があります。 クラスを拡張しない機能的なステートレスコンポーネント PureComponentクラスを拡張するコンポーネント Componentクラスを拡張する通常のコンポーネント 昔、ステートレスコンポーネントをPure Components、またはDumb Componentsと呼んでいました。「純粋」という言葉の定義全体がReactで変更されたようです。 これら3つの基本的な違いは理解していますが、いつ何を選択するかはまだわかりません。また、それぞれのパフォーマンスへの影響とトレードオフは何ですか？ 更新： これらは私が明らかにすることを期待する質問です： 単純なコンポーネントを機能的（単純化するため）に定義するか、PureComponentクラスを拡張する（パフォーマンスのために）ように定義する必要がありますか？ 私が失ったシンプルさと実際のトレードオフで得られるパフォーマンスの向上はありますか？ Component常にPureComponentパフォーマンスを向上させるために使用できる場合、通常のクラスを拡張する必要がありますか？

188 javascript  reactjs  ecmascript-6 

ESLintからこのエラーが発生します。 error Parsing error: The keyword 'const' is reserved このコードから： const express = require('express'); const app = express(); const _ = require('underscore'); 私はnode_modulesすべてのnpmパッケージを削除して再インストールしようとしましたが（ここで提案されています）、役に立ちませんでした。

188 javascript  node.js  ecmascript-6  eslint 

constJavaScriptで特定の関数を使用して設定できる値のタイプに制限があるかどうかに興味があります。これは有効ですか？動作することは確かですが、なんらかの理由で悪い習慣と見なされていますか？ const doSomething = () => { ... } ES6では、このようにすべての関数を定義する必要がありますか？もしそうなら、これは流行っていないようです。 コメントありがとうございます！

183 javascript  function  const  ecmascript-6 

ReactでES6クラスを使用するのは初めてですが、以前は現在のオブジェクトにメソッドをバインドしていましたが（最初の例を参照）、ES6を使用すると、クラス関数を矢印でクラスインスタンスに永続的にバインドできますか？（コールバック関数として渡すときに便利です。）CoffeeScriptでできるように使用しようとすると、エラーが発生します。 class SomeClass extends React.Component { // Instead of this constructor(){ this.handleInputChange = this.handleInputChange.bind(this) } // Can I somehow do this? Am i just getting the syntax wrong? handleInputChange (val) => { console.log('selectionMade: ', val); } SomeClass.handleInputChangeたとえばsetTimeout、に渡した場合、スコープはwindowオブジェクトではなくクラスインスタンスにスコープされます。

181 javascript  reactjs  ecmascript-6  babeljs  ecmascript-next 

上にスクロールするたびに一連のメッセージを表示するチャットウィジェットがあります。私が今直面している問題は、メッセージが読み込まれるときにスライダーが上部に固定されたままであることです。前の配列の最後のインデックス要素に焦点を当てたいです。インデックスを渡すことで動的参照を作成できることを理解しましたが、それを達成するために使用するスクロール関数の種類を知る必要もあります handleScrollToElement(event) { const tesNode = ReactDOM.findDOMNode(this.refs.test) if (some_logic){ //scroll to testNode } } render() { return ( <div> <div ref="test"></div> </div>) }

181 javascript  reactjs  ecmascript-6 

静的メソッドを呼び出す標準的な方法は何ですか？constructorクラス自体の名前を使用したり、使用したりすることは考えられますが、必要がないので後者は好きではありません。前者が推奨される方法ですか、それとも他に何かありますか？ これは（不自然な）例です： class SomeObject { constructor(n){ this.n = n; } static print(n){ console.log(n); } printN(){ this.constructor.print(this.n); } }

175 javascript  class  static  ecmascript-6  es6-class 

create-react-appパッケージでReactJSプロジェクトを作成しましたが、うまくいきましたが、webpackファイルと構成が見つかりません。 react-create-appはwebpackでどのように機能しますか？webpack構成ファイルは、デフォルトのインストールのどこにありますcreate-react-appか？プロジェクトのフォルダーに構成ファイルが見つかりません。 オーバーライド構成ファイルを作成していません。他の記事で構成設定を管理できますが、従来の構成ファイルを見つけたいです。

172 javascript  reactjs  webpack  ecmascript-6  create-react-app