React é o framework JavaScript mais popular do planeta. Você pode usá-lo para criar rapidamente aplicativos da Web com muitos recursos. Além disso, permite que você adicione facilmente novos recursos ao seu projeto existente, como nosso   que construímos em nosso site. carregador de imagens React  Você só precisa digitar algumas linhas de código. Pode tornar sua vida muito mais fácil. Mas como você pode adicionar o React ao projeto existente? Quais são os passos? Neste post, você encontrará todos os detalhes.  É realmente fácil adicionar o React a um projeto existente?  Sim, você pode facilmente adicionar o React ao seu aplicativo existente. O processo é muito simples. Nesta postagem, você encontrará a maneira de adicionar um componente React a uma página HTML existente. Você pode seguir o mesmo método para adicioná-lo ao seu próprio site. Como alternativa, você pode criar um arquivo HTML vazio para praticar.  Adicionar reação ao projeto existente: equipamento necessário  Primeiro, você precisa ter o Node instalado no seu PC. Você pode obtê-lo em   . Você precisa ter pelo menos a versão 10 do Node. nodejs.org  Em seguida, você precisa ter o gerenciador de pacotes do nó (npm). Ele é instalado automaticamente no seu PC com o Node. A versão npm precisa ser 5.2 ou superior.  Finalmente, você precisa ter um bom editor de código. Existem muitas soluções disponíveis no mercado. Por exemplo, o Visual Studio Code é um editor intuitivo. É extremamente popular entre os desenvolvedores. Você pode baixá-lo   . aqui  Adicionar React a um projeto ou site existente  Nesta seção, você adicionará um componente React para modificar uma página HTML existente do seu site. Aqui estão os passos:  Etapa 1: adicionando o contêiner DOM ao HTML  Primeiro, abra a página HTML que você deseja alterar. Crie um elemento div vazio. Esta é a área onde você usará o React para exibir as alterações.   <div id="medium_blog_container">      </div>  Etapa 2: adicionar as tags de script ou as tags de reação  Em seguida, você deve adicionar três tags <script> à página HTML logo antes da tag de fechamento </body>. As duas primeiras tags carregam React. O terceiro carrega seu código de componente.  Etapa 3: criar um componente React  Agora, você deve criar um arquivo JS, chamado medium_post_component.js, próximo à sua página HTML.   Você pode escrever React com JSX ou sem JSX. O exemplo mostrado acima é sem JSX. Ele pode ser executado diretamente no navegador.  Dê uma olhada nessas duas linhas:  Com essas duas linhas, você está procurando o <div> que adicionou na primeira etapa. Em seguida, você exibe o componente React do botão “Curtir” dentro dele.  Adicionar React a um projeto existente – Adicionar JSX a um projeto  Você não precisa usar ferramentas complicadas, como um bundler ou um servidor de desenvolvimento, para adicionar JSX a um projeto. Na verdade, é bem semelhante a adicionar um pré-processador CSS. No entanto, você deve ter o Node.js instalado em seu PC. É o único requisito. O processo de adicionar JSX é muito simples. Você só precisa seguir estes passos:  Primeiro, vá para a pasta do seu projeto no terminal.  Agora, execute o seguinte comando   npm init -y  Se o comando acima falhar, execute este comando:   npm install babel-cli@6 babel-preset-react-app@3  É isso! Você adicionou com sucesso uma configuração JSX pronta para produção ao seu projeto.  Adicione o React ao projeto existente – execute o pré-processador JSX  Para executar o pré-processador JSX, você deve criar uma pasta chamada “src”. Em seguida, execute este comando no terminal:   npx babel --watch src --out-dir . --presets react-app/prod    Você está vendo uma mensagem de erro que diz “Você instalou o pacote babel por engano”? Você pode ter perdido a etapa anterior. Tente executá-lo na mesma pasta. Deve corrigir o problema. Dica:  Você não precisa esperar o processo terminar. O comando mencionado acima inicia um observador automatizado para JSX.  Se você criar um arquivo chamado like_button.js na pasta src, o observador criará um arquivo like_button.js pré-processado. Ele terá o código JavaScript simples adequado para o navegador.  Além disso, permite que você utilize recursos de sintaxe JavaScript modernos. Por exemplo, você pode usar classes sem se preocupar em quebrar navegadores mais antigos.  Tenha em mente que npx não é um erro de digitação. É uma ferramenta executora de pacotes que vem com o npm 5.2+.  Adicionar React ao projeto existente – AJAX e APIs Call-in React For Component  Existem inúmeras bibliotecas para fazer chamadas de API. No entanto, estes são os mais populares são:  Buscar  Axios  React-Axios  Use-Http React-request e muito mais  Adicionar React ao projeto existente – usando Fetch para fazer chamadas HTTP em React  Fetch() é uma API baseada em navegador. Você pode usá-lo para fazer chamadas HTTP. Vamos dar uma olhada na sintaxe padrão da API Fetch.   let response = fetch(   API_URL,   .... (some more options)   );  Aqui, você está chamando uma função chamada getNames. Ele busca os dados. Além disso, ele busca outros parâmetros. gosta:  Método: Ajuda a determinar que tipo de chamada HTTP existe  Cabeçalho: Permite definir cabeçalhos de requisição para autorização ou conteúdo  Mode: Mode define o tipo de modo, cors ou no-cors  Corpo: você pode usá-lo para enviar dados adicionais ao servidor como um corpo de solicitação  Aqui está um exemplo de uso do Fetch no React:   async getName(){   //With .then and .catch section   let response = await fetch("https://jsonplaceholders.com/users") .then(resposne => { return response.json(); this.setState({ names:response })}) .catch(error => { console.log(error); }); }  Dicas para adicionar React a um projeto existente   Reutilizar um Componente  Você pode querer exibir componentes React em vários lugares em uma página HTML. Para fazê-lo, você deve seguir estas etapas:  Vá para o seu arquivo HTML. Em seguida, adicione estas linhas:   <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Add React in One Minute</title> </head> <body> <h2>Add React in One Minute</h2> <p>This page demonstrates using React with no build tooling.</p> <p>React is loaded as a script tag.</p> <p> This is the first comment.  <div class="like_button_container" data-commentid="1"></div> </p> <p> This is the second comment.  <div class="like_button_container" data-commentid="2"></div> </p> <p> This is the third comment.  <div class="like_button_container" data-commentid="3"></div> </p>   <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>  <script src="like_button.js"></script> </body> </html>  Vá para o seu arquivo JavaScript. Insira este código:   'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked comment number ' + this.props.commentID; } return e( 'button', { onClick: () => this.setState({ liked: true }) }, 'Like' ); } } // Find all DOM containers, and render Like buttons into them. document.querySelectorAll('.like_button_container') .forEach(domContainer => { // Read the comment ID from a data-* attribute. const commentID = parseInt(domContainer.dataset.commentid, 10); const root = ReactDOM.createRoot(domContainer); root.render( e(LikeButton, { commentID: commentID }) ); });  Lembre-se de que a abordagem é útil quando as partes da página estão isoladas umas das outras. Mas dentro do código React, você deve usar composição de componentes. Porque é mais fácil de usar.  Minificar JavaScript para produção  O JavaScript não minificado pode afetar significativamente a velocidade da página. Isso vai frustrar os usuários. É por isso que você precisa minificar o JavaScript antes de implantar aplicativos React. Isso aumentará a velocidade de carregamento e a experiência do usuário.  Você já minimizou seus scripts de aplicativos? Você garantiu que o HTML implantado carregue as versões do React que terminam no arquivo production.min.js? Se estiver pronto, seu site está pronto para produção.   <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>  Se você não tiver uma etapa de minificação para seus scripts, poderá configurá-la seguindo estas etapas:  Primeiro, você precisa instalar o Node.js  Em seguida, execute o seguinte comando na pasta do seu projeto:   npm init -y  Em seguida, execute este comando:   npm install terser  Finalmente, é hora de minificar um arquivo. Se você deseja minificar um arquivo, chamado like_button.js, basta executar este comando no terminal:   npx terser -c -m -o like_button.min.js -- like_button.js  Você verá a criação de um novo arquivo, chamado like_button.min.js. Ele conterá todo o código minificado.   Experimente o JSX rapidamente  Você pode experimentar rapidamente o JSX em seu projeto adicionando a seguinte tag <script> à sua página:   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>  Agora, você pode começar a usar o JSX em qualquer tag <script>. Você só precisa adicionar o atributo type=”text/babel” a ele.  Aqui está um exemplo de um arquivo HTML com JSX:   <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> function MyApp() { return <h1>Hello, world!</h1>; } const container = document.getElementById('root'); const root = ReactDOM.createRoot(container); root.render(<MyApp />); </script>  </body> </html>  Apresentando o React SDK do Filestack  filestack-react é um wrapper no SDK do filestack-js. Ele permite a integração com o serviço Filestack em apenas algumas linhas de código. Você pode utilizá-lo para melhorar significativamente a aparência e o desempenho do seu carregador de arquivos.  Como posso usar o React SDK do Filestack em meu aplicativo?  Primeiro, você deve instalar o React SDK do Filestack com este comando:   npm install filestack-react  Em seguida, você pode inserir filestack-react em seu aplicativo.   import { PickerOverlay } from 'filestack-react'; <PickerOverlay apikey={YOUR_API_KEY} onSuccess={(res) => console.log(res)} onUploadDone={(res) => console.log(res)} />  Você pode usá-lo para adicionar facilmente várias funcionalidades. Por exemplo, você pode renderizar um seletor de painel suspenso básico usando esta linha:   <PickerDropPane apikey='YOUR_APIKEY'/>  Você pode usar o Filestack para habilitar facilmente o upload de arquivos no React. Você pode encontrar os detalhes aqui.  Conclusão  Neste artigo, você aprendeu a adicionar o React a um projeto existente. Além disso, você conhece dicas úteis, como reutilizar componentes e reduzir o JavaScript para produção. Agora, você pode começar a aproveitar o React e adicionar facilmente recursos incríveis aos seus projetos existentes.  Adicionar React a um projeto existente – FAQ   O que é um componente React?  Os componentes são um dos principais blocos de construção do React. Eles são bits de código independentes e reutilizáveis. Eles permitem que você crie facilmente interfaces de usuário para seu aplicativo.   Como posso criar um aplicativo de reação com npx?  Você pode criar um aplicativo de reação com npx usando este comando: “npx create react app”.   O que é React na codificação?  React é uma biblioteca JavaScript eficiente e flexível. Ele permite que você crie facilmente interfaces de usuário complexas usando pedaços de código pequenos e isolados, chamados de “componentes”.   Inscreva-se gratuitamente e experimente as melhores soluções de upload de arquivos para seus aplicativos da web hoje com o Filestack.

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Make resilience your competitive advantage

Você deve adicionar o React a projetos ou sites existentes?

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Crescimento de Criptomoedas: Criando Personas de Usuários Eficazes

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

Telegram: a ponte da Crypto Island para o continente

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Crescimento de Criptomoedas: Criando Personas de Usuários Eficazes

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

Telegram: a ponte da Crypto Island para o continente

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps