（翡翠またはスリム）のような構文？

Question

私はスリムとヒスイの使用に慣れてきましたが、最近Reactでフロントエンドにアプリケーションを書くことに移りました。私は現在使用してなどのRuby on Railsやバベルと.jsxのファイルを、使用しています：

gem 'react-rails', '~> 1.4.0' 
gem 'react-router-rails', '~>0.13.3.2' 

しかし、私はまた、ノードと反応し使用していますとreact-starterify定型を使用して表現し、それはノードと同じ話です。

SlimやJadeのような構文を使ってReactで自分のHTMLを書き始めることができるものはありますか？

Answer 1

JSXはHTMLではなく、ちょうどそのように見えます。

<div className="container"> 
    <p>Testing!</p> 
</div> 

このような何かを：：

React.createElement("div", { className: "container" }, 
    React.createElement("p", null, "Testing!") 
) 

React.createElement以上の呼び出しを抽象化することで、次のことができJSXのtranspiler（通常バベル、これらの日は）JSX構文を取り、このことから、それを修正するため、これは重要です同じことを行いますが、よりよい構文を持つr-domようなプロジェクト、で終わる：

r.div({className: 'container'}, [ 
    r.p('Testing!'), 
]) 

またはreact-hyperscript 、いくつかのプロパティのための代替構文ができた：JSXはプレーンJSコールに変わり以来、React.createElement呼び出しに変換することができ、任意の言語や構文を持つ偉大な動作します、しかし

h('div.container', [ 
    h('p', 'Testing!') 
]) 

は、限り、あなたは設定として、リアクトRailsのアセットパイプラインを使用して、アセットを配信する際に蒸散が正しく行われるようにします。

そこにはであり、玉の構文called react-jadeでこれを行うプロジェクトです。 a few differences from regular Jadeとsome unsupported featuresがありますが、それはあなたがしたいことをするかもしれません。 Railsプロジェクトでは、適切なJadeコードをReact-specific JSに変換するプリプロセッサを見つけたり作成したりする必要があります。あなたがいるなら

は今、私は私のコンポーネント

の内側に再び肥大化したHTMLを書いている：私はあなたの質問にコメントをもとに言及したかった一つの他の事があります

---

HTMLのの構文について言えば、問題はありませんが、Reactコンポーネントのrenderメソッドが大きくなって管理が難しいことがわかっている場合は、おそらくbreak your component into smaller components (see "Tip 4: Embrace composition!" at this link)が必要です。