Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

377
Vistas
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")
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

.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!

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda