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 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. Etapa 2: adicionar as tags de script ou as tags de reação Em seguida, você deve adicionar três tags à página HTML logo antes da tag de fechamento . 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 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: Add React in One Minute Add React in One Minute This page demonstrates using React with no build tooling.

React is loaded as a script tag.

This is the first comment.

This is the second comment.

This is the third comment.

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. 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 à sua página: Agora, você pode começar a usar o JSX em qualquer tag . Você só precisa adicionar o atributo type=”text/babel” a ele. Aqui está um exemplo de um arquivo HTML com JSX: Hello World function MyApp() { return Hello, world! ; } const container = document.getElementById('root'); const root = ReactDOM.createRoot(container); root.render( );  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'; 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: 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.