<p><a href="https://facebook.github.io/jsx/">JSX</a> é uma excelente abstração para montar interfaces. Introduzida pelo Facebook e popularizada pelo React, trata-se de uma extensão do JavaScript para abstrair a chamada de funções aninhadas. É esperado que o código JSX seja pré-processado (transpilado) para JavaScript válido antes de ser executada nos navegadores ou em ambientes como Node.js.</p>
<h2>Configuração do projeto</h2>
<p>Antes de tudo, vamos iniciar o nosso projeto e instalar as dependências necessárias:</p>
<pre><code><div class="highlited-code" data-language="">npm init -y
npm i fastify react react-dom
npm i -D @types/node @types/react @types/react-dom tsx typescript</div>
</code></pre><p>Agora, configuramos os <em>scripts</em> do nosso projeto. O <code>package.json</code> deverá ficará assim:</p>
<pre><code class="highlited-code-wrapper langjson"><div class="highlited-code" data-language="json">{
  &quot;type&quot;:  &quot;module&quot;,
  &quot;name&quot;:  &quot;fastify-react&quot;,
  &quot;version&quot;:  &quot;1.0.0&quot;,
  &quot;author&quot;:  &quot;Douglas Moura &lt;douglas.ademoura@gmail.com&gt;&quot;,
  &quot;description&quot;:  &quot;POC on rendering React components from Fastify&quot;,
  &quot;main&quot;:  &quot;dist/main.js&quot;,
  &quot;scripts&quot;: {
    &quot;start&quot;:  &quot;tsc &amp;&amp; node dist/main.js&quot;,
    &quot;dev&quot;:  &quot;tsx --watch src/main.tsx&quot;,
    &quot;build&quot;:  &quot;tsc&quot;
  },
  &quot;license&quot;:  &quot;ISC&quot;,
  &quot;dependencies&quot;: {
    &quot;fastify&quot;:  &quot;^4.25.2&quot;,
    &quot;react&quot;:  &quot;^18.2.0&quot;,
    &quot;react-dom&quot;:  &quot;^18.2.0&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@types/node&quot;:  &quot;^20.11.6&quot;,
    &quot;@types/react&quot;:  &quot;^18.2.48&quot;,
    &quot;@types/react-dom&quot;:  &quot;^18.2.18&quot;,
    &quot;tsx&quot;:  &quot;^4.7.0&quot;,
    &quot;typescript&quot;:  &quot;^5.3.3&quot;
  }
}</div>
</code></pre><p>E esse é o <code>tsconfig.json</code> que iremos utilizar:</p>
<pre><code class="highlited-code-wrapper langjson"><div class="highlited-code" data-language="json">{
  &quot;compilerOptions&quot;: {
    &quot;target&quot;:  &quot;ESNext&quot;,
    &quot;module&quot;:  &quot;ESNext&quot;,
    &quot;lib&quot;: [
      &quot;dom&quot;,
      &quot;es6&quot;,
      &quot;es2017&quot;,
      &quot;esnext.asynciterable&quot;
    ],
    &quot;skipLibCheck&quot;:  true,
    &quot;sourceMap&quot;:  false,
    &quot;outDir&quot;:  &quot;./dist&quot;,
    &quot;moduleResolution&quot;:  &quot;node&quot;,
    &quot;removeComments&quot;:  true,
    &quot;noImplicitAny&quot;:  true,
    &quot;strictNullChecks&quot;:  true,
    &quot;strictFunctionTypes&quot;:  true,
    &quot;noImplicitThis&quot;:  true,
    &quot;noUnusedLocals&quot;:  true,
    &quot;noUnusedParameters&quot;:  true,
    &quot;noImplicitReturns&quot;:  true,
    &quot;noFallthroughCasesInSwitch&quot;:  true,
    &quot;allowSyntheticDefaultImports&quot;:  true,
    &quot;esModuleInterop&quot;:  true,
    &quot;emitDecoratorMetadata&quot;:  true,
    &quot;experimentalDecorators&quot;:  true,
    &quot;resolveJsonModule&quot;:  true,
    &quot;baseUrl&quot;:  &quot;.&quot;,
    &quot;jsx&quot;:  &quot;react-jsx&quot;
  },
  &quot;exclude&quot;: [
    &quot;node_modules&quot;
  ],
  &quot;include&quot;: [
    &quot;./src/**/*.ts&quot;,
    &quot;./src/**/*.tsx&quot;
  ]
}</div>
</code></pre><h2>Criando nossos componentes</h2>
<p>O ecossistema do React já fornece as ferramentas necessárias para renderizarmos os nossos componentes para HTML e enviarmos diretamente do servidor para o nosso cliente. Então, primeiro, vamos criar o componente raiz:</p>
<pre><code class="highlited-code-wrapper langts"><div class="highlited-code" data-language="ts">// src/components/root.tsx

type  RootProps  = {
  children:  React.ReactNode
  title:  string
}

export  function  Root({ children, title }:  RootProps) {
  return (
    &lt;html  lang=&quot;en&quot;&gt;
      &lt;head&gt;
        &lt;meta  charSet=&quot;utf-8&quot;  /&gt;
        &lt;meta  name=&quot;viewport&quot;  content=&quot;width=device-width, initial-scale=1&quot;  /&gt;
        &lt;title&gt;{title}&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;{children}&lt;/body&gt;
    &lt;/html&gt;
  )
}</div>
</code></pre><p>E nossa página inicial:</p>
<pre><code class="highlited-code-wrapper langts"><div class="highlited-code" data-language="ts">// src/components/index.tsx

export  function  App() {
  return (
    &lt;h1&gt;Hello, World!&lt;/h1&gt;
  )
}</div>
</code></pre><h2>Configurando o Fastify para renderizar nosso componente React</h2>
<p>Como não pretendemos carregar o React para hidratar o nosso HTML do lado do cliente, podemos usar a função <code>renderToStaticMarkup</code> exportada de <code>react-dom/server</code>. Nosso arquivo de inicialização do servidor ficará assim:</p>
<pre><code class="highlited-code-wrapper langts"><div class="highlited-code" data-language="ts">import Fastify from  'fastify'
import { renderToStaticMarkup } from  'react-dom/server'

// Importando com o `.js` no final, o arquivo &quot;buildado&quot;
// fará as importações corretamente e você não deverá ver nenhum erro na
// IDE, ainda que os arquivos tenham a extensão `.tsx`.
import { App } from  './components/index.js'
import { Root } from  './components/root.js'

type  RenderArgs  = {
  children:  React.ReactNode
  title:  string
}

const  render  = ({ title, children }:  RenderArgs) =&gt; {
  // Aqui, inserimos `&lt;!DOCTYPE html&gt;`
  return `&lt;!DOCTYPE html&gt;${renderToStaticMarkup(
    &lt;Root  title={title}&gt;{children}&lt;/Root&gt;
  )}`
}

const fastify =  Fastify({
  logger:  true,
})

fastify.get('/', async  function  handler(_request, reply) {
  reply.type('text/html')
  return  render({ children:  &lt;App  /&gt;, title:  'Hello, World!' })
})

try {
  await fastify.listen({ port:  3000 })
} catch (err) {
  fastify.log.error(err)
  process.exit(1)
}</div>
</code></pre><p>Se você iniciar o projeto agora (<code>npm run dev</code>), você deverá ver a página em <a href="http://localhost:3000">http://localhost:3000</a>. Claro, podemos melhorar a nossa implementação usando a nova API de stream, introduzida no React 18 (<a href="https://github.com/reactwg/react-18/discussions/106#discussion-3611411">que é o método recomendado</a>). Para isso, faremos as seguintes alterações no nosso código:</p>
<pre><code class="highlited-code-wrapper langts"><div class="highlited-code" data-language="ts">import Fastify from  'fastify'
import { renderToStaticNodeStream } from  'react-dom/server'
import { Transform } from  'node:stream'

import { App } from  './components/index.js'
import { Root } from  './components/root.js'

type  RenderArgs  = {
  children:  React.ReactNode
  title:  string
}

const  render  = ({ title, children }:  RenderArgs) =&gt; {
  let  isFirstChunk  =  true
  const  prepend  =  new  Transform({
    transform(chunk, _encoding, callback) {
      if (isFirstChunk) {
        isFirstChunk  =  false
        this.push('&lt;!DOCTYPE html&gt;')
      }
      callback(null, chunk)
    },
  })

  return  renderToStaticNodeStream(
    &lt;Root  title={title}&gt;{children}&lt;/Root&gt;
  ).pipe(prepend)
}

const  fastify  =  Fastify({
  logger:  true,
})

fastify.get('/', async  function  handler(_request, reply) {
  const  stream  =  render({ children:  &lt;App  /&gt;, title:  'Hello, World!' })

  reply.type('text/html')
  reply.send(stream)
})

try {
  await  fastify.listen({ port:  3000 })
} catch (err) {
  fastify.log.error(err)
  process.exit(1)
}</div>
</code></pre><p>E com isso, conseguimos renderizar nossos componentes React do lado do servidor e fazer <em>streaming</em> deles para o nosso cliente. E este é o <a href="https://github.com/DouglasdeMoura/react-fastify">link</a> do repositório.</p>


Renderizando JSX no servidor com Fastify

<p>A propriedade <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius"><code>border-radius</code></a> permite arredondar as bordas de um elemento. Dar o mesmo valor de <code>border-radius</code> para o elemento pai e elemento filho não resulta na melhor aparência, então como calcular o raio da borda de elementos aninhados?</p>
<p>Observe a demonstração abaixo:</p>
<CodePen id="ExGaRJY" />

<p>No exemplo acima, os dois círculos possuem o mesmo raio e estão inscritos nos quadrados com bordas arredondas. Note que o raio da borda é o mesmo raio do círculo. Nós queremos que o fim do arco do círculo de cada borda comece seja coincidente com ambos os quadrados. Isso pode ser feito de duas formas:</p>
<ol>
<li>Raio da borda do quadrado interno (R<sub>i</sub>) + espaçamento entre os quadrados (E) = raio da borda do quadrado externo (R<sub>e</sub>);</li>
<li>Raio da borda do quadrado externo (R<sub>e</sub>) - espaçamento entre os quadrados (E) = raio da borda do quadrado interno R<sub>i</sub>.</li>
</ol>
<p>Observe que o centro dos círculos inscritos nos quadrados não coincidem, assim como o fim do arco da borda. Ainda assim, o resultado é satisfatório.</p>
<h2>Bônus</h2>
<p>Neste exemplo interativo, feito por <a href="https://jhey.dev/">Jhey Tompkins</a>, você pode ver como essa regra se aplica na prática:</p>
<CodePen user="jh3y" id="KKrYaxx" />

<h2>Referências</h2>
<ul>
<li><a href="https://twitter.com/jh3yy/status/1688542283602231296">@jh3yy</a></li>
<li><a href="https://www.30secondsofcode.org/css/s/nested-border-radius/">Tip: Perfect nested border radius in CSS</a></li>
<li><a href="https://www.w3schools.com/cssref/css3_pr_border-radius.asp">CSS3 border-radius Property</a></li>
<li><a href="https://www.w3.org/TR/css-backgrounds-3/#corners">CSS Backgrounds and Borders Module Level 3</a></li>
</ul>


Como calcular o raio da borda (border-radius) de elementos aninhados

<p><a href="https://cpu.land/">Neste delicioso artigo</a> (em inglês),  <a href="https://kognise.dev/">Lexi Mattick</a> (juntamente com o <a href="https://hackclub.com/">Hack Club</a>) descreve como funciona multiprocessamento, o que são <a href="https://en.wikipedia.org/wiki/System_call"><em>system calls</em></a>, como os computadores gerenciam sua memória e como o Linux carrega seus executáveis. Tenho certeza que vocês aprenderão muito.</p>


Douglas Moura

Douglas Moura

#Dicas

Renderizando JSX no servidor com Fastify

Como calcular o raio da borda (border-radius) de elementos aninhados

Aprenda como os programas são executados no computador