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

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 carregador de imagens React que construímos em nosso site.

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 nodejs.org . Você precisa ter pelo menos a versão 10 do Node.
• 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">

<!-- Here we will mount our component -->

</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:

1. Primeiro, vá para a pasta do seu projeto no terminal.

   
   

2. Agora, execute o seguinte comando

   npm init -y

   
   

3. 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

Dica: 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.

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. <!-- We will put our React component inside this div. --> <div class="like_button_container" data-commentid="1"></div> </p> <p> This is the second comment. <!-- We will put our React component inside this div. --> <div class="like_button_container" data-commentid="2"></div> </p> <p> This is the third comment. <!-- We will put our React component inside this div. --> <div class="like_button_container" data-commentid="3"></div> </p> <!-- Load React. --> <!-- Note: when deploying, replace "development.js" with "production.min.js". --> <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> <!-- Load our React component. --> <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> <!-- Don't use this in production: --> <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> <!-- Note: this page is a great way to try React but it's not suitable for production. It slowly compiles JSX with Babel in the browser and uses a large development build of React. Read this section for a production-ready setup with JSX: https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project In a larger project, you can use an integrated toolchain that includes JSX instead: https://reactjs.org/docs/create-a-new-react-app.html You can also use React without JSX, in which case you can remove Babel: https://reactjs.org/docs/react-without-jsx.html --> </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.