(Jade or Slim) -like syntax for React?

Question

I'm used to using slim and jade, and recently I switched to writing front-end applications using React and found that now I am writing bloated HTML again inside my components. I am currently using Ruby on Rails and .jsx files with babel, etc. Using:

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

But I also use React with node and express with the react-starterify , and this is the same story with Node.

Is there anything that can allow me to start writing my html in React using syntax like slim or Jade?

Answer 1

One thing to keep in mind is that JSX is not HTML — it just looks. This is important because the JSX transpiler (usually Babel these days) uses the JSX syntax and modifies it from this:

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

like that:

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

Distracted by calls to React.createElement , you can get a project like r-dom , which does the same, but with a stronger syntax:

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

or react-hyperscript , which allows you to use an alternative syntax for some properties:

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

However, since JSX turns into simple JS calls, any language or syntax that can be converted to React.createElement calls is great for React if you configured your Rails pipeline to properly translate as part of its serving assets.

There is a project that does this with a Jade syntax called jade reaction ; There are a few differences from regular Jade and some unsupported features , but it can do what you want it to do. In a Rails project, you will need to find or create a preprocessor that turns the corresponding Jade code into JS with specific requirements.

---

There is one more thing that I wanted to mention based on the comments in your question:

now i am writing bloated HTML again inside my components

If you're just talking about HTML syntax, then no problem, but if you find that the render methods of your React components are getting large and difficult to manage, then this is probably a good sign that you need to break your component into smaller components ( see “Tip 4: Embrace Composition!” at this link) .