2016-10-31 13 views
2

私はこれでとても新しいので、皆さんと一緒に抱きしめてください。私は、コンポーネントがどのように作成されたのか、リアクトを研究しました。Reactjsの構文との混乱

var app = React.createClass({ ... }); 

ちょうどhereと同じです。

しかし、私のMacに反応をインストールした後、私は構文が私が慣れていたものと少し違うことがわかります。すなわち、

class Application extends React.Component { ... } 

hereのようになります。

ここで、私はJavaでの私の以前の知識のためにコードを理解しました。しかし、私はその違いを知りたかっただけです。 React.createClass()のような構文を書いたときにうまくいきませんでしたので、これは私の問題でした。

2番目のlink in codepenを見ると、BabelはJSの横に書かれています。では、デフォルトでBabelを使用して反応しますか?

あなたは写真を撮ると思います。ありがとう!

+0

最初のフォーム使用ES5および第二形態の使用ES6構文。 –

+0

あなたはおそらく、誰かがここでそれに対処するのを待つよりも、これをすばやくグーグルで見つけて、より良い答えを得るでしょう。 'React.createClass'は、ES6クラス構文を使用するときに来ないいくつかの機能(例えば自動機能)を追加します。この投稿は、この件に関する有用な読書のようです:https://reactjsnews.com/composing-components –

答えて

2

最初の例ではReact.createClass()ヘルパー関数を使用し、2番目の例ではES6 class syntaxを使用してReactコンポーネントを定義しています。

どちらも、コンポーネントを定義するための有効な方法です。ただし、ブラウザ間で互換性を持たせるためには、ES6コードを出荷する前にES6コードをES5に転送する必要があります。

More info on ES6-style component definitions.