6

I've gotten used to using slim and jade and I recently moved to writing applications on the front end with React and find that now I'm writing bloated HTML again inside my components. I'm 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'm also using React with node and express using the react-starterify boilerplate and it's the same story with Node.

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

1 Answers1

9

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

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

to something like this:

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

By abstracting over React.createElement calls, you can end up with a project like r-dom, which does the same thing but with a nicer syntax:

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

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

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

However, since JSX turns into plain JS calls, any language or syntax that can be converted into React.createElement calls will work great with React, as long as you set up your Rails asset pipeline so that it correctly does the transpilation as part of serving assets.

There is a project that does this with Jade's syntax called react-jade; there are a few differences from regular Jade and some unsupported features, but it may do what you want it to do. In a Rails project, you'd need to find or create a preprocessor that turns the appropriate Jade code into React-specific JS.

There's one other thing I wanted to mention based on a comment in your question:

now I'm writing bloated HTML again inside my components

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

Michelle Tilley
  • 157,729
  • 40
  • 374
  • 311
  • 1
    +1 for the last paragraph, although I've wondered how far that should be taken. Since it's all wrapped up into JS code it's not like it's hugely less-efficient, but there's got to be a point at which you stop decomposing. (Insert old joke here.) – Dave Newton Oct 03 '16 at 14:21
  • I'm just learning React, myself, and I'm actually really liking the basic conception of components and composition. BUT, I agree with the original poster as well: for markup, I hate HTML. Hate hate hate. And I love Slim. So, being able to do something Slim-like inside a component is still a good idea. – Michael Scott Shappe Jun 05 '17 at 23:51