What do you use instead of "." in Pug?-CodePudding

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 alternativly if anyone could convert is 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")

Any help would be much appreciated!

Kind Regards, ClaaziX

CodePudding user response：

.rain__drop

is parsed into this HTML markup

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!