Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

React com linguagem backend e JSX

Comecei a assistir as aulas, mas logo no começo surgiram duas dúvidas. Porque tem JSX e tem que compilar para React e vice-versa?

Participei de um projeto que depois de tudo pronto com Jquery, framework python e bootstrap, estavam querendo implementar React, mas o framework já tinha um template e pelo que eu vi o react gera elementos html de um arquivo js.

Como funciona a integração do React com PHP, Frameworks Python ou Wordpress?

7 respostas

Oi Gisele, usamos o jsx pq, caso contrário, teríamos que ficar criando os elementos do React usando a api padrão deles. Ex: quer criar uma div, teria que fazer React.createElement("div") e aí, se quisesse que a div tivesse filhos, teria que passar outro React element.

Isso leva ao segundo fato, os seus componentes não geram HTML de fato, geram objetos do React e, se necessário, eles vão ser convertidos para o dom real.

Em relação a integração, o React não tem nenhum relação com isso.. ele eh um projeto focado em construir suas views, vc pode recuperar os dados de onde quiser. Claro que tudo via ajax :).

Obrigada por responder.

Eu perguntei porque, eu não faço ideia de como utilizaria o react em um template jinja, por exemplo, porque pelo menos pra mim fica claro como inserir um elemento no dom com javascript, pega um elemento por um id ou tag ou class e inseri com innerHtml ou textContent, mas React eu não faço ideia:

{% extends "layout.html" %}
{% block body %}
  <ul>
  {% for user in users %}
    <li><a href="{{ user.url }}">{{ user.username }}</a></li>
  {% endfor %}
  </ul>
{% endblock %}

Não conheço o jinja, mas pelo exemplo deu para entender. Bom, vc vai precisar dar uma olhada no jsx mesmo, é o padrão para ser utilizado com o react. O curso mostra bastante coisa, tenta fazer :).

Entendi, vou terminar de ver as aulas, mas pelo primeiro exemplo que é utilizado o ajax do Jquery, acho que não precisaria do Reactjs no projeto, o resultado final é o mesmo e era só algumas página.

Obrigada.

solução!

Oi Gisele, vc pode não precisar do React, assim como não precisa do jQuery :). Vc usa as bibliotecas para te ajudar em tarefas específicas. No curso só eh usado o jQuery para fazer o Ajax, poderia ter utilizado a fetch api ou qualquer outra forma. Vc pode até tentar atualizar os trechos de sua página só com o jQuery ou de outra forma, mas atualmente o approach seguido pelo React deixa tudo mais fácil de manter e evoluir.

Perceba que vc não manipular o dom diretamente, em nenhum momento.

É que eu fiz o curso de Angular e algumas coisas eu achei mais fácil de entender e de aplicar e com Jquery já me pediram muito para inserir conteúdo com ajax na página dentro de uma div e tendo um template html ou jinja, ou seja, inserindo conteúdo no meio de uma página. Assistindo as primeiras aulas eu vi que cria o componente, mas não tem restante da página tipo o

        <head>
         <body>

como funciona isso?

O angular 1 tem o two way data binding que deixa mais fácil a parte de pegar os valores dos inputs e vice versa. De resto é um approach completamente diferente...

O html, head etc está lá no index.html.