Quer aprender a criar apps React com Python? Descubra como usar a biblioteca ReactPy e trabalhar com elementos do React diretamente no Python!
Se quiser pode acompanhar esse conteúdo em formato de vídeo ou pode acessar o nosso Canal do YouTube para mais vídeos!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
O que você vai ver hoje?
ReactPy – Criando Apps React com Python
O React é uma das bibliotecas JavaScript mais populares para criar interfaces dinâmicas e interativas. No entanto, com o ReactPy, essa funcionalidade fica acessível para quem prefere desenvolver suas aplicações utilizando Python!
Na aula de hoje, vou te mostrar o que é o ReactPy, suas principais características e funcionalidades, além de como utilizá-lo para criar uma aplicação simples em React com Python!
Embora essa biblioteca não exija a escrita direta de HTML e CSS, é importante que você tenha noções básicas dessas linguagens para entender as estruturas dos componentes que ele utiliza.
Então, caso você queira aprender mais sobre HTML e CSS antes de acompanhar essa aula, confira nossas aulas:
O que é ReactPy?
O ReactPy é uma biblioteca Python que encapsula as funcionalidades do React, permitindo que você crie aplicações front-end sem usar HTML, CSS ou JavaScript diretamente.
Com essa ferramenta, você pode escrever interfaces de usuário dinâmicas usando apenas Python, simplificando o processo de desenvolvimento para quem já é familiarizado com a linguagem.
Ela adapta os conceitos do React para o Python, facilitando a criação de front-end. Se você já trabalhou com React.js, perceberá que muitos conceitos são semelhantes, mas adaptados para Python.
Entre as principais funcionalidades e usos do ReactPy temos:
- Desenvolvimento com Python: O ReactPy permite criar aplicações React usando apenas Python, sem a necessidade de mexer com HTML, CSS ou JavaScript.
- Fácil Instalação: É possível instalar o ReactPy com um simples comando pip install react-py[flask], e ele já vem integrado com frameworks como Flask, FastAPI e Starlette.
- Componentes Reutilizáveis: Seguindo a estrutura do React tradicional, o ReactPy facilita a criação de componentes reutilizáveis, melhorando a organização do frontend.
- Manipulação de Eventos: Eventos de interação, como cliques e movimentos de mouse, podem ser tratados diretamente em Python, sem a necessidade de JavaScript.
- Hooks e Estados: ReactPy permite a manipulação de estados e o uso de hooks, possibilitando atualizações dinâmicas de componentes, sem a necessidade de recarregar a página inteira.
- Renderização Eficiente: Apenas os componentes que precisam são atualizados, otimizando o desempenho e tornando a renderização mais rápida.
Saiba mais com a documentação oficial do ReactPy.
Instalando a Biblioteca
A primeira etapa para trabalhar com o ReactPy é configurar o ambiente de desenvolvimento e instalar a biblioteca.
Você precisará do Python e de um editor de código instalado no seu computador. Vou usar o VS Code, mas você pode utilizar o editor de sua preferência.
O ReactPy gerencia a parte de front-end e oferece integração nativa com algumas bibliotecas de back-end em Python, como Flask, FastAPI e o Starlette.
Para este projeto, vamos utilizar o ReactPy com o Flask, portanto, podemos fazer a instalação pelo comando: pip install reactpy[flask]
Isso instalará o ReactPy com as dependências necessárias do Flask.
Criando Componentes no ReactPy
Ao iniciar um projeto com ReactPy, é necessário importar três elementos fundamentais:
- component: Usado para criar os componentes da aplicação.
- html: Fornece acesso às tags HTML, permitindo escrever os componentes usando sintaxe HTML diretamente em Python.
- run: Responsável por rodar o aplicativo.
O React é baseado em componentes, blocos reutilizáveis de código que representam partes da interface do usuário.
Cada componente pode ser entendido como um bloco individual que compõe uma página web.
Em vez de criar uma página inteira de uma vez, você pode dividir a interface em pequenos componentes independentes, que se combinam para formar a página final.
Os componentes são definidos por funções Python que retornam elementos HTML que serão exibidos no navegador. Antes dessas funções, usamos o decorator @component.
Por exemplo, podemos criar um componente que exibe um título <h1>:
from reactpy import html, run
@component
def app():
return html.h1("Meu primeiro site com ReactPy")
run(app)Neste exemplo, criamos um componente app que retorna um título HTML <h1> com o texto “Meu Primeiro Site com ReactPy”. A função run(app) é usada para iniciar o servidor e renderizar a página no navegador.
A grande vantagem de usar componentes é que eles são reutilizáveis e permitem atualizações dinâmicas na página sem a necessidade de recarregá-la completamente.
Um exemplo prático seria uma lista de tarefas, onde novos itens podem ser adicionados dinamicamente, atualizando apenas o componente correspondente.
Estrutura de Componentes
O ReactPy permite criar a estrutura de componentes sem a necessidade de um arquivo HTML separado.
Toda a estrutura de componentes e elementos HTML pode ser criada diretamente no arquivo principal ou em um arquivo separado, que pode ser importado depois.
Cada função só pode retornar um único elemento HTML. Contudo, assim como no FastHTML, podemos retornar uma <div> que envolve todos os conteúdos exibidos, como um título em <h1> e um parágrafo em <p>.
from reactpy import component, html, run
@component
def app():
pagina = html.div(
html.h1("Meu Primeiro Site com ReactPy"),
html.p("Se inscreva no canal")
)
return pagina
run(app)
Perceba que os elementos utilizados, como h1 e p, correspondem diretamente às tags HTML, por isso, ter conhecimento de HTML facilita ainda mais o desenvolvimento.
Funcionalidades do ReactPy
Além de permitir a criação de componentes reutilizáveis, o ReactPy oferece uma série de funcionalidades que facilitam o desenvolvimento de aplicativos web. Entre as principais, destacam-se:
- Gerenciamento de Estado: O ReactPy oferece ferramentas para que os componentes possam manter e gerenciar seu próprio estado, reagindo a mudanças de forma dinâmica e resultando em interfaces mais interativas e responsivas.
- Interatividade via Eventos: Através de eventos disparados por interações do usuário, como cliques ou digitação, podemos alterar o estado dos componentes e, consequentemente, modificar a interface da página em tempo real.
- Renderização e Atualização da Interface: A renderização dos componentes é feita de maneira individual, permitindo atualizar partes específicas da página sem a necessidade de recarregar o site por completo, tornando o processo mais eficiente.
Hook e Estado no ReactPy
Quando trabalhamos com React, dois conceitos fundamentais são Hook e Estado.
Em termos simples, um hook é uma função que se conecta a funcionalidades específicas de um componente, como o gerenciamento de estados ou a manipulação de efeitos colaterais.
Um dos hooks mais utilizados é o use_state, que gerencia o estado de um componente. O estado representa valores dinâmicos que podem ser alterados ao longo do tempo.
Sempre que o estado é modificado, o componente é re-renderizado automaticamente, refletindo as mudanças na interface de forma imediata.
Criando uma Página com ReactPy
Agora que já entendemos a base do ReactPy, vamos para um exemplo prático: criar um site para uma galeria de arte.
Essa galeria exibirá diversas obras e suas descrições, com botões para avançar e retroceder entre as obras. Cada vez que um desses botões for clicado, apenas a obra e suas informações serão atualizadas, mantendo o restante da página intacto.
No material disponível para download, você terá uma base de dados contendo informações sobre as obras de arte, como o nome da obra, o artista, a descrição e a imagem.
Essa base de dados foi retirada da própria documentação do ReactPy, mas, para facilitar o desenvolvimento, organizei-a em um arquivo Python que está disponível para download nesta aula.
Importando as Funções e Módulos Necessários
O primeiro passo para desenvolver uma aplicação em ReactPy é importar as funções e módulos essenciais.
Além de component, html e run, importaremos os hooks, que contêm as funcionalidades para gerenciar os estados dos componentes, e também a lista de dicionários obras.
from reactpy import component, html, run, hooks from base_dados import obras
Definindo o Componente Galeria e o Gerenciador de Estados use_state
Agora vamos definir o componente responsável pela galeria. Ele será o responsável por exibir as obras de arte.
Dentro desse componente, precisamos gerenciar o estado e renderizar a interface para o usuário. Para isso, utilizamos a função use_state para controlar o índice da obra que será exibida.
A função use_state retorna uma variável (indice_obra) que guarda o valor atual do índice da obra e uma função (set_indice_obra) para atualizar esse valor.
Como queremos que a galeria comece exibindo a primeira obra, passamos 0 como valor inicial. Assim, ao renderizar a galeria, a primeira obra será exibida.
Quando set_indice_obra for chamada com um novo valor, indice_obra será atualizado e o componente será re-renderizado para refletir essa mudança.
from reactpy import component, html, run, hooks from base_dados import obras @component def Galeria(): indice_obra, set_indice_obra = hooks.use_state(0)
Funções para Navegar entre Obras
Em seguida, vamos definir as funções obra_anterior e obra_proxima, que permitirão navegar entre as obras.
Ambas receberão o parâmetro evento, que será acionado quando o usuário clicar nos botões Anterior e Próxima.
Ao clicar em Anterior, a função obra_anterior chama set_indice_obra para diminuir o valor de indice_obra em 1. E ao clicar em Próxima, a obra_proxima aumenta o valor de indice_obra em 1
from reactpy import component, html, run, hooks from base_dados import obras @component def Galeria(): indice_obra, set_indice_obra = hooks.use_state(0) def obra_anterior(evento): set_indice_obra(indice_obra - 1) def obra_proxima(evento): set_indice_obra(indice_obra + 1)
Controlando a Navegação do Usuário
Para evitar que o usuário navegue além das obras disponíveis, criaremos uma verificação condicional.
Se o índice atual for maior ou igual ao número total de obras (len(obras)), ajustamos o índice para a última obra (len(obras) – 1)).
Da mesma forma, se o índice for menor que 0, ajustamos o índice para a primeira obra (set_indice_obra(0)).
from reactpy import component, html, run, hooks
from base_dados import obras
@component
def Galeria():
indice_obra, set_indice_obra = hooks.use_state(0)
def obra_anterior(evento):
set_indice_obra(indice_obra - 1)
def obra_proxima(evento):
set_indice_obra(indice_obra + 1)
if indice_obra >= len(obras):
set_indice_obra(len(obras) - 1)
elif indice_obra < 0:
set_indice_obra(0)Isso impede que o usuário navegue para uma obra inexistente. Quando ele tentar voltar a partir da primeira obra, será redirecionado para a própria primeira obra, e, ao tentar avançar a partir da última, será levado novamente à última obra.
Acessando as Informações das Obras e Estruturando a Página
Com as funções responsáveis por controlar a exibição das obras definidas, podemos partir para criação da estrutura da página.
Para começar, vamos acessar a obra atual da lista obras, usando o indice_obra. A partir disso, extraímos as informações da obra, como nome, artista, descrição e o URL da imagem.
from reactpy import component, html, run, hooks
from base_dados import obras
@component
def Galeria():
indice_obra, set_indice_obra = hooks.use_state(0)
def obra_anterior(evento):
set_indice_obra(indice_obra - 1)
def obra_proxima(evento):
set_indice_obra(indice_obra + 1)
if indice_obra >= len(obras):
set_indice_obra(len(obras) - 1)
elif indice_obra < 0:
set_indice_obra(0)
obra = obras[indice_obra]
nome = obra["name"]
artista = obra["artist"]
descricao = obra["description"]
imagem_url = obra["url"]Agora, construiremos o componente visual que será renderizado.
Envolveremos todo o conteúdo em uma div, que conterá um título (html.h3()), uma imagem (html.img()), três parágrafos (html.p()) e dois botões (html.button()).
Para elementos de texto, como parágrafos e títulos (H3), basta fornecer o texto ou a variável correspondente ao conteúdo que desejamos exibir.
Por outro lado, para elementos como imagens e botões, que são componentes HTML que aceitam vários parâmetros, no React, esses parâmetros devem ser passados em formato de dicionário, onde cada parâmetro corresponde a uma chave.
Portanto, para a imagem, definimos o caminho (src) e o estilo (style), que, neste caso, ajusta a altura para 200 pixels.
Para os botões, associamos as funções obra_anterior e obra_proxima ao evento on_click.
Em HTML, elementos como botões, links e imagens podem responder a eventos de interação do usuário, como cliques. O comportamento associado a esses eventos é definido pelo atributo onclick.
No ReactPy, essa interação também pode ser implementada utilizando um dicionário Python. No caso do evento on_click, ele especifica a ação a ser executada quando o usuário clica no botão.
Por exemplo, em nossa galeria, ao clicar no botão Anterior, chamaremos a função obra_anterior, e ao clicar em Próxima, chamaremos a função obra_proxima.
Ao final, nossa função Galeria retornará o componente responsável por exibir as obras.
from reactpy import component, html, run, hooks
from base_dados import obras
@component
def Galeria():
indice_obra, set_indice_obra = hooks.use_state(0)
def obra_anterior(evento):
set_indice_obra(indice_obra - 1)
def obra_proxima(evento):
set_indice_obra(indice_obra + 1)
if indice_obra >= len(obras):
set_indice_obra(len(obras) - 1)
elif indice_obra < 0:
set_indice_obra(0)
obra = obras[indice_obra]
nome = obra["name"]
artista = obra["artist"]
descricao = obra["description"]
imagem_url = obra["url"]
componente = html.div(
html.h3(nome), # nome
html.img({"src": imagem_url, "style":{"height": "200px"}}), # foto da obra
html.p(descricao), # descricao
html.p(f"Artista: {artista}"), # nome do artista: Artista: Fulano
html.button({"on_click": obra_anterior}, "Anterior"), # Anterior
html.button({"on_click": obra_proxima}, "Próxima"), # Próxima
html.p(f"Obra {indice_obra + 1} de {len(obras)}"), # Obra 2 de 9
)
return componenteComponente Principal App
Agora vamos definir o componente principal da nossa aplicação, o App. Ele será responsável por exibir o título Obras de Arte e renderizar o componente Galeria.
from reactpy import component, html, run, hooks
from base_dados import obras
@component
def Galeria():
indice_obra, set_indice_obra = hooks.use_state(0)
def obra_anterior(evento):
set_indice_obra(indice_obra - 1)
def obra_proxima(evento):
set_indice_obra(indice_obra + 1)
if indice_obra >= len(obras):
set_indice_obra(len(obras) - 1)
elif indice_obra < 0:
set_indice_obra(0)
obra = obras[indice_obra]
nome = obra["name"]
artista = obra["artist"]
descricao = obra["description"]
imagem_url = obra["url"]
componente = html.div(
html.h3(nome), # nome
html.img({"src": imagem_url, "style":{"height": "200px"}}), # foto da obra
html.p(descricao), # descricao
html.p(f"Artista: {artista}"), # nome do artista: Artista: Fulano
html.button({"on_click": obra_anterior}, "Anterior"), # Anterior
html.button({"on_click": obra_proxima}, "Próxima"), # Próxima
html.p(f"Obra {indice_obra + 1} de {len(obras)}"), # Obra 2 de 9
)
return componente
@component
def App():
pagina = html.div(
html.h1("Obras de Arte"),
Galeria(),
)
return pagina
run(App)Ao rodar o aplicativo, nossa galeria de arte será exibida, permitindo que o usuário navegue entre as obras disponíveis, clicando nos botões Anterior e Próxima.
Como estamos utilizando React, apenas o componente da galeria será re-renderizado ao navegar entre as obras, mantendo o restante da página estático.
Vantagens do ReactPy
Uma das grandes vantagens de usar o ReactPy é a simplicidade de escrever códigos front-end utilizando apenas Python. Além disso, ele oferece outros benefícios, como:
- Atualizações Dinâmicas: Assim como o React tradicional, o ReactPy permite que você atualize partes específicas da página sem a necessidade de recarregar o site por completo.
- Componentes Reutilizáveis: Você pode criar componentes modulares e reutilizá-los em diversas áreas do projeto, facilitando a manutenção e expansão.
- Gerenciamento de Estado: Com hooks como use_state, o gerenciamento do estado da interface de usuário se torna simples, permitindo que você construa interfaces mais interativas.
Conclusão – ReactPy – Criando Apps React com Python
O ReactPy proporciona uma maneira inovadora de desenvolver interfaces dinâmicas utilizando apenas Python. Sem precisar escrever JavaScript, HTML ou CSS, você pode criar seu projeto completo diretamente em Python.
Nessa aula, apresentei o básico sobre configuração e funcionalidades da biblioteca ReactPy, para que você possa começar a usar a ferramenta e construir sua primeira página.
Com essas capacidades, é possível desenvolver aplicações interativas e eficientes, tendo o Python como única linguagem.
Se quiser aprender a desenvolver projetos web completos com Python, confira o nosso curso Python Impressionador!
Hashtag Treinamentos
Para acessar outras publicações de Python, clique aqui!
Posts mais recentes de Python
- Descubra o poder da automação com Python com 4 códigos simples!
Neste post, vamos mostrar como códigos de automação com Python que vão simplificar o seu dia a dia, automatizando tarefas comuns que consomem nosso tempo. - Descubra as principais Funções do Python!Conheça as 10 funções do Python que são indispensáveis para todo programador! Aprenda a utilizar funções como print(), map() e open() e aprimore seus códigos!
- Orientação a objetos Python: o que é e como usarAprenda o que é programação orientada a objetos em Python, seus pilares e como aplicar na prática. Domine POO e eleve seus códigos!
Posts mais recentes da Hashtag Treinamentos
- Como surgiu a OpenAI: entenda a história completa da criadora do ChatGPT e seus impactos
Descubra como surgiu a OpenAI, conheça sua transformação na gigante da inteligência artificial e entenda como essa trajetória afeta a tecnologia e os negócios! - Connected Speech – Como Entender o Inglês Falado por NativosAprenda tudo sobre Connected Speech e entenda, de uma vez por todas, o inglês falado por nativos com mais fluência e clareza!
- 17 Novas Fórmulas Excel Úteis para o TrabalhoConheça 17 novas fórmulas Excel que serão muito úteis no seu dia a dia! Aprenda sobre as fórmulas mais recentes que aumentarão sua produtividade no trabalho!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.