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'
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 (
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>
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.
