Renderers: Usando React além de Web e Mobile · guilherssousa

O React foi criado em 2011 por desenvolvedores na equipe de Ads da Meta (antigo Facebook), inicialmente como uma biblioteca JavaScript para criação de views declarativas e reativas para a web.

Alguns anos depois, a Meta lançou o React Native, que deixa que desenvolvedores criem aplicações mobile nativas usando a mesma sintaxe declarativa em JavaScript.

Atualmente, o React é definido como “uma biblioteca JavaScript para criar interfaces de usuário”. Se analisarmos essa sentença, perceberemos que ela é agnóstica: React é para criar interfaces de usuário. Qualquer interface. Essa portabilidade é alcançada graças aos Renderers!

O que são Renderers?

Os Renderers, ou renderizadores, são implementações que traduzem as definições de componentes React para algum formato alvo. Toda aplicação prática que usa React acaba também usando um renderizador.

Os exemplos mais conhecidos são:

React DOM, que traduz componentes React para árvores DOM para serem renderizadas na Web
React Native Renderer, que traduz componentes React para uma árvore que o React Native possa gerar seus componentes nativos.
React Test Renderer, que traduz componentes React para árvores JSON, para fins de teste de aplicação.

Nesse post, mostrarei algumas outras aplicações alternativas de uso do React além de Web e Native usando Renderers customizados!

React TV

Criado pelo brasileiro Raphael Amorim, o React TV é um renderizador customizado para criação de interfaces React para Smart TVs.

Repositório do projeto no GitHub: https://github.com/raphamorim/react-tv

React Three Fiber

O React Three Fiber é uma famosa por portar a biblioteca de gráficos 3D Three.js para o React. Essa portabilidade é feita usando um renderer custom que adapta as classes e métodos do Three.js para a sintaxe declarativa do React. Além de também implementar otimizações e rotinas para conveniência do desenvolvedor.

Repositório do projeto no GitHub: https://github.com/pmndrs/react-three-fiber

Ink

Acredite se quiser, existe até mesmo um renderizador de React para interfaces de linha de comando. Essa é exatamente a proposta do Ink, que utiliza do Yoga, o motor de layout da Meta usado no React Native, para construção de interfaces declarativas voltadas para os terminais.

Repositório do projeto no GitHub: https://github.com/vadimdemedes/ink

Raycast Extensions

O Raycast, software do MacOS que substitui o Spotlight, dá suporte a criação de extensões construídas com React e TypeScript que serão renderizadas em componentes nativos do Apple AppKit!

Documentação das extensões: Introduction — Raycast API

Live em inglês sobre as extensões do Raycast: https://www.youtube.com/watch?v=dgyuttjX1oo

Onde ver outros Renderers

Existe um repositório no GitHub chamado de Awesome React Renderer que reúne vários projetos de renderers organizados por categoria, então se quiser ver outros projetos que abrangem temas diferentes, esse link é um ótimo começo.