Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

376
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda