ノードJSとJSXがリアクションJSに必要ですか？

Question

フロントエンドにはリアクションJS 0.14.8が選択されています。これはIE 8ブラウザをサポートしていますが、JS JSまたはJSXはReact JS開発に必要です。またはJsx

Answer 1

はい、nodejsとjsxを使わずにReactJsアプリケーションを作成できます。

なぜJSXを使用する必要がありますか？

JSXは、あなたのUIコンポーネントを宣言するための非常にクリーンな方法を提供します。 使い慣れたhtml構文を使用して、ユーザーインターフェイスを宣言することができます。 JSXがトランスパイルされ、UI要素を表す軽量オブジェクトに変換されます。 例えば あなたがある1を推測することができます

1.jsx

const App =() => { 
    return (
      <div><h1>Welcome to React</h1></div> 
    ); 
} 

または

2.withoutのJSX

const App = function App() { 
    return React.createElement(
    "div", 
    null, 
    React.createElement(
     "h1", 
     null, 
     "Welcome to React" 
    ) 
); 
}; 

を経由して反応するのJSを宣言するために、以下の方法を使用することができます書きやすい。

ブラウザプロジェクトをビルドするのにnodejsを使用するのはなぜですか？

nodejsは、ブラウザでウェブサイトを実行する場合には必要ありません。 しかしnodejsエコシステムは、あなたのプロジェクトのためだけにそれらを改革することなく、あなたのプロジェクトで使用する何千ものnpmモジュールを提供します。

を使用していないと、任意のライブラリを使用するために、とタグを追加できました。しかし、などのモジュールバンドラと静的資産ジェネレータを使用してブラウザとwebpackを使用すると、nodejsエコシステムのpowserをWebプロジェクトで直接活用できます（nodejsランタイム環境は必要ありませんが、ブラウザで実行します）。

以下のスニペットでは、012jタグを使用すると、nodejsなしでreactjsを利用できるようになります。

const App =() => { 
 
    return (
 
      <div><h1>Welcome to React</h1></div> 
 
    ); 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"> 
 
</div>

Answer 2

これは厳しい要件ではありません。スクリプトタグと反応させ、React.createElementを使用することができます。

ほとんど誰もが開発ツール用にnode.jsを使用し、jsxを使用しています。あなたのapiサーバーにはどんな言語でも使うことができますが、ほとんどの場合、開発中にnode.jsサーバーを使用します。

Answer 3

使用法：

require('node-jsx').install()

あなたが別の拡張子を使用したい場合は、操作を行います。

require('node-jsx').install({extension: '.jsx'})

あなたワットの場合（例えばCoffeeScriptのような）変換の追加とカップリングにアリ、です：

var coffee = require('coffee-script'); 
require('node-jsx').install({ 
    extension: '.coffee', 
    additionalTransform: function(src) { 
    return coffee.compile(src, { 
     'bare': true 
    }); 
    } 
}); 

あなたはES6を使用したい場合は、

require('node-jsx').install({harmony: true})