javascriptreactjspug

How do I turn PUG into JSX?

I am trying to use some code written in Pug, in a JS react app.

I have found this plugin here that will convert the code, but there is a problem. It states that it cannot convert "." statements, of which there are a few.

So what do I replace the "."s with to make it work (or alternatively if anyone could convert it to react JS that would be fantastic!

The Pug code I wish to use:

- const droplets = 250
.rain
  - for (let r = 0; r < droplets; r++)
    svg.rain__drop(preserveAspectRatio="xMinYMin", viewBox='0 0 5 50', style=`--x: ${Math.floor(Math.random() * 100)}; --y: ${Math.floor(Math.random() * 100)}; --o: ${Math.random()}; --a: ${Math.random() + 0.5}; --d: ${(Math.random() * 2) - 1}; --s: ${Math.random()}`)
      path(stroke='none', d="M 2.5,0 C 2.6949458,3.5392017 3.344765,20.524571 4.4494577,30.9559 5.7551357,42.666753 4.5915685,50 2.5,50 0.40843152,50 -0.75513565,42.666753 0.55054234,30.9559 1.655235,20.524571 2.3050542,3.5392017 2.5,0 Z")
Solution 
  • .rain__drop

    is parsed into this HTML markup

    class="rain__drop"

    which would mean this JSX:

    className="rain__drop"

    As a rule of thumb, if you have the possibility to run the app, you can always inspect the resulting markup.

    Probably useful: Pug: interpolation.
    Probably even more useful: PUG to HTML. Tip: combine it with HTML to JSX.
    Copy/paste time!