Um dos pontos fortes do React é o quão bem ele funciona com os outros. Descubra algumas das melhores ferramentas para integrar com o framework.

React é uma biblioteca JavaScript bem conhecida que você pode usar para criar UIs para aplicativos da Web versáteis. O React é adaptável e você pode combiná-lo com outras tecnologias para criar aplicativos mais poderosos e eficazes.

Aprenda a integrar o React com várias tecnologias e você obterá benefícios de várias fontes.

1. Reagir + Redux

Redux é uma biblioteca de gerenciamento de estado usada em conjunto com o React. O Redux facilita o gerenciamento centralizado do estado do aplicativo. Ao criar aplicativos complexos com muitos estados, o React e o Redux funcionam bem juntos.

Aqui está uma ilustração de como usar Redux com React:

importar Reagir de'reagir';
importar {criarloja} de'Restaurado';
importar { Fornecedor } de'reagir-redux';
const estadoinicial = { contar: 0 };
funçãoredutor(estado = estado inicial, ação) {
trocar (Tipo de acão) {
caso'INCREMENTO'





instagram viewer

:
retornar { contar: estado.contagem + 1 };
caso'DECREMENTO':
retornar { contar: estado.contagem - 1 };
padrão:
retornar estado;
 }
}


constimportar Reagir de'reagir';
importar { useQuery, gql } de'@apollo/cliente';
const GET_USERS = gql`
 consulta GetUsers {
 Usuários {
 eu ia
 nome
 }
 }
;
funçãoUsuários() {
const { carregando, erro, dados } = useQuery (GET_USERS);
se (carregando) retornar<p>Carregando...p>;
se (erro) retornar<p>Erro :(p>;
retornar (
store = createStore (redutor);
funçãoContador() {
const contagem = useSeletor(estado => estado.contagem);
const dispatch = useDispatch();
retornar (


Contagem: {contagem}</p>

Este exemplo cria um armazenamento Redux com um estado inicial de 0. Uma função redutora lida com o INCREMENTO e DECREMENTO operações. O código usa o useSelector e useDispatch ganchos para obter a contagem contínua e despachar as atividades individualmente.

Por fim, para tornar o armazenamento acessível a todo o aplicativo, envolva o componente contador no componente provedor.

2. Renderização no lado do servidor com Next.js

Next.js é uma estrutura de desenvolvimento que otimiza a velocidade do site e SEO táticas transmitindo HTML para clientes e usando renderização do lado do servidor de componentes React.

Seu poderoso conjunto de ferramentas funciona junto com o React, fornecendo desempenho excepcional e altas classificações nos mecanismos de pesquisa.

// páginas/index.js
importar Reagir de'reagir';
funçãoLar() {
retornar (


Olá, mundo!</h1>




Este é um componente React renderizado pelo servidor.</p>
 </div>
 );
}
exportarpadrão Lar;

Neste modelo, você caracteriza um componente React chamado Lar. Next.js cria uma página HTML estática com o conteúdo desse componente ao renderizá-lo no servidor. Quando a página receber uma visita do cliente, ela enviará o HTML para o cliente e hidratará o componente, permitindo que ele funcione como um componente React dinâmico.

3. Busca de dados com GraphQL

GraphQL é uma linguagem de consulta para APIs que oferece uma alternativa proficiente, forte e adaptável ao REST. Com o GraphQL, você pode obter dados mais rapidamente e atualizar a interface do usuário mais rapidamente.

Esta é uma ilustração da maneira de usar GraphQL com React:

importar Reagir de'reagir';
importar { useQuery, gql } de'@apollo/cliente';
const GET_USERS = gql`
 consulta GetUsers {
 Usuários {
 eu ia
 nome
 }
 }
;
funçãoUsuários() {
const { carregando, erro, dados } = useQuery (GET_USERS);
se (carregando) retornar<p>Carregando...p>;
se (erro) retornar<p>Erro :(p>;
retornar (
    

     {data.users.map(do utilizador => (
  • {user.name}</li>
     ))}
     </ul>
     );
    }
    funçãoAplicativo() {
    retornar (
    

    Usuários</h1>

     </div>
     );
    }
    exportarpadrão Aplicativo;
    

    

    •

Este modelo chama o useQuery função do @apollo/cliente biblioteca para trazer o resumo dos clientes da interface GraphQL Programming. A lista de usuários é então exibida na IU.

4. Estilizando com CSS-in-JS

CSS-in-JS é um método baseado em JavaScript para estilizar componentes React. Ele simplifica o gerenciamento de folhas de estilo complexas e permite que você escreva estilos em um estilo modular e baseado em componentes.

Aqui está uma ilustração de como usar CSS-in-JS com React:

importar Reagir de'reagir';
importar estilizado de'componentes de estilo';
const Button = style.button`
 cor de fundo: #007melhor amigo;
 cor: #fff;
 preenchimento: 10px 20px;
 raio da borda: 5px;
 tamanho da fonte: 16px;
 cursor: ponteiro;
 &:flutuar {
 cor de fundo: #0069d9;
 }
;
funçãoAplicativo() {
retornar (

Este exemplo cria um botão estilizado componente usando o estilizado função. Ele define o tom da experiência do botão, o tom do texto, o amortecimento, a varredura de linha, a dimensão do texto e o cursor.

Um estado de foco que altera a cor de fundo quando o usuário passa o mouse sobre o botão também é definido. O botão é finalmente renderizado usando um componente React.

5. Integração com D3 para visualização de dados

D3 é uma biblioteca JavaScript de manipulação e visualização de dados. Você pode fazer visualizações de dados poderosas e interativas usando o React. Uma ilustração de como usar D3 com React é a seguinte:

importar Reagir, { useRef, useEffect } de'reagir';
importar * como d3 de'd3';
funçãoGráfico de barras({ dados }) {
const ref = useRef();
 useEffect(() => {
const svg = d3.select (ref.current);
const largura = svg.attr('largura');
const altura = svg.attr('altura');
const x = d3.scaleBand()
 .domain (dados.map((d) => d.rótulo))
 .faixa([0, largura])
 .preenchimento(0.5);
const y = d3.scaleLinear()
 .domínio([0, d3.max (dados, (d) => d.value)])
 .range([altura, 0]);
 svg.selectAll('reto')
 .dados (dados)
 .digitar()
 .acrescentar('reto')
 .attr('x', (d) => x (d.rótulo))
 .attr('y', (d) => y (d.valor))
 .attr('largura', x.bandwidth())
 .attr('altura', (d) => altura - y (d.value))
 .attr('preencher', '#007bff');
 }, [dados]);
retornar (
400} altura={400}>
 {/* os eixos vão aqui */}
 </svg>
 );
}
exportarpadrão Gráfico de barras;

Este código define um Gráfico de barras componente que aceita um dados prop no trecho de código anterior. Ele chama o useRef gancho para fazer uma referência ao componente SVG que o usará para desenhar o contorno.

Depois disso, renderiza as barras do gráfico e define as escalas com o gancho useEffect(), que mapeia os valores dos dados para as coordenadas da tela.

6. Adicionando funcionalidade em tempo real com WebSockets

A implementação de WebSockets estabelece uma avenida bidirecional totalmente operacional que permite a comunicação contínua entre um cliente e um servidor. Eles permitem que o React adicione utilidade contínua a aplicativos da Web, por exemplo, quadros de discussão, atualizações ao vivo e avisos.

Você usa WebSockets da seguinte maneira com o React:

importar Reagir, { useState, useEffect } de'reagir';
importar io de'socket.io-client';
funçãoSala de bate-papo() {
const [mensagens, setMessages] = useState([]);
const [inputValue, setInputValue] = useState('');
const soquete = io(' http://localhost: 3001');
 useEffect(() => {
 socket.on('mensagem', (mensagem) => {
 setMessages([...mensagens, mensagem]);
 });
 }, [mensagens, soquete]);
const handleEnviar = (e) => {
 e.preventDefault();
 socket.emit('mensagem', valor de entrada);
 setInputValue('');
 };
retornar (


    

     {mensagens.map((mensagem, eu) => (
  • {mensagem}</li>
     ))}
     </ul>
    

     tipo="texto"
     valor={inputValue}
     onChange={(e) => setInputValue (e.target.value)}
     />
    

    

    •

Neste exemplo, você define um Sala de bate-papo componente que usa o socket.io-client biblioteca para se conectar a um servidor WebSocket. Você pode usar o useState gancho para lidar com o resumo de mensagens e a estimativa de informações.

Ao receber uma nova mensagem, o useEffect hook registra um ouvinte para acionar uma atualização de evento de mensagem na lista de mensagens. Para limpar e enviar um valor de entrada para a mensagem de evento, existe um manipularEnviar função.

Posteriormente, tanto o formulário com um campo de entrada e botão quanto a lista de mensagens atualizadas serão exibidos na tela.

A cada envio de formulário, solicitando ao manipularEnviar função é inevitável. Para entregar a mensagem ao servidor, esse método utiliza o soquete.

7. Integrando com o React Native para desenvolvimento móvel

React Local é um sistema para construir aplicações universais locais usando React, que se conectam para promover aplicações portáteis para estágios iOS e Android.

Usando a integração do React Native com o React, você pode usar o design baseado em componentes e o código reutilizável do React em plataformas móveis e da web. Isso reduz os ciclos de desenvolvimento de aplicativos móveis e o tempo de lançamento no mercado. O React Native é uma estrutura popular para o desenvolvimento de aplicativos móveis nativos que faz uso da biblioteca React.

Apresentando programação e bibliotecas vitais, como Node.js, Responder CLI local, e código X ou Estúdio Android, é fundamental para designers que lidam com iOS e Android separadamente. Por fim, componentes React Native simples permitem que os desenvolvedores criem aplicativos móveis robustos e ricos em recursos para as plataformas iOS e Android.

Combine o React com outras tecnologias

React é uma biblioteca popular e eficaz para criar aplicativos online. O React é uma ótima opção para criar interfaces de usuário, mas também é usado com outras tecnologias para aumentar seus recursos.

Ao integrar o React com essas tecnologias, os desenvolvedores podem criar aplicativos mais complexos e avançados que oferecem uma melhor experiência do usuário. O React e seu ecossistema de ferramentas e bibliotecas cobrem tudo o que é necessário para criar um site básico ou um aplicativo da web complexo.