(Jade oder Slim) -ähnliche Syntax für Reagieren?

Question

Ich habe mich an die Verwendung von Slim und Jade gewöhnt, und ich bin kürzlich mit React zum Schreiben von Anwendungen am Frontend übergegangen und finde jetzt, dass ich aufgeblähtes HTML wieder in meine Komponenten schreibe. Ich bin derzeit mit Ruby on Rails und .jsx Dateien mit babel, etc mit:

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

Aber ich bin auch mit Knoten Reagieren und Express mit den react-starterify vorformulierten und es ist die gleiche Geschichte mit Knoten.

Gibt es irgendetwas, das mir erlauben kann, mein HTML in React mit einer Syntax wie Slim oder Jade zu schreiben?

Answer 1

Eine Sache zu beachten ist, dass JSX nicht HTML ist - es sieht einfach so aus. Dies ist wichtig, weil die JSX Transpiler (in der Regel Babel in diesen Tagen) Syntax, um die JSX nimmt und modifiziert sie daraus:

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

etwas wie folgt aus:

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

Durch Abstrahieren über React.createElement Anrufe, können Sie am Ende mit einem Projekt wie r-dom, die die gleiche Sache tut, aber mit einer schöneren Syntax:

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

oder react-hyperscript , Der es ermöglicht eine alternative Syntax für einige Eigenschaften:

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

Da jedoch JSX verwandelt sich in Ebene JS ruft, jede Sprache oder Syntax, die in React.createElement Anrufe umgewandelt werden können, werden große Arbeit mit Reaktion, so lange wie Sie einrichten Ihre Rails-Asset-Pipeline, damit sie die Übertragung als Teil der Bereitstellung von Assets korrekt durchführt.

Dort ist ein Projekt, das dies mit Jades Syntax tut called react-jade; Es gibt a few differences from regular Jade und some unsupported features, aber es kann tun, was Sie wollen. In einem Rails-Projekt müssen Sie einen Präprozessor finden oder erstellen, der den entsprechenden Jade-Code in reaktionsspezifisches JS umwandelt.

---

gibt es noch eine andere Sache wollte ich basierte auf einem Kommentar in Frage erwähnen:

jetzt schreibe ich aufgeblähte HTML wieder in meiner Komponente

Wenn Sie nur über HTML Syntax dann kein Problem, aber wenn Sie feststellen, dass die render Methoden Ihrer React-Komponenten werden groß und schwer zu verwalten, dann ist es wahrscheinlich ein gutes Zeichen, dass Sie muss break your component into smaller components (see "Tip 4: Embrace composition!" at this link).