ReactJSでJSX以外の構文を使用する場所

Question

ReactJS now-a-daysを学習しています。私はReactに取り組んでいるときにJSX構文を使っています。 私は、JSXを使用することによって、ツリー構造を属性で定義するための簡潔で親しみのある構文であることを知っています。 これはコードを理解しやすくしますか？

JSX構文なし

/** @jsx React.DOM */ 
Var ReactComponent = React.createClass({ 
    Render: function(){ 
    Return (

    <ul className = “my-list"> 
      &ltli&gtFirst Text Content &lt/li&gt 
      &ltli&gtSecond Text Content &lt/li&gt 
    </ul> 

); 
} 
}); 

Var ReactComponent = React.createClass({ 
    Render: function(){ 
     Return(

    var child1 = React.createElement('li', null, 'First Text Content'); 
    var child2 = React.createElement('li', null, 'Second Text Content'); 
    var root = React.createElement('ul', { className: 'my-list' }, child1, child2); 

    ); 
    } 
    )); 

JSXの構文は簡単にして反応実施のためのとても便利であれば誰も私を導くことができるし、反応させ、非JSX構文コンポーネントを使用するには、状況は何ですか？

Answer 1

基本的に、JSXを採用するかどうかはあなたの個人的な選択です。 JSXはReactアプリケーションを書く際に人気があります。なぜなら、コードは簡潔で読みやすく、保守性も高いからです。 ReactをJSXなしで記述したいのであれば、確かにそうすることができ、JSXを使用する必要がある/使用しない特定のケースはありません。しかし、あなたのアプリが成長するにつれて、非JSX構文のためコードベースが複雑になってきていることがわかります。

JSXを使用すると、長期的には単純さと保守性が向上します。実際には、純粋なJSでReactを書くことができます。