Duas Formas de Utilizar React: Inclução Direta e CLI

Existem duas principais abordagens para trabalhar com React, cada uma com suas particularidades e vantagens específicas:

  1. Flexibilidade e Adaptabilidade:
  • A abordagem de inclusão direta permite que desenvolvedores integrem React rapidamente em páginas HTML existentes, sem a necessidade de configurar um ambiente de projeto completo. Ideal para pequenos projetos ou protótipos.
  • A abordagem CLI é mais adequada para aplicações React complexas e de grande escala, pois oferece estrutura de projeto completa e suporte a ferramentas de build.
  1. Curva de Aprendizado:
  • A inclusão direta é relativamente simples e mais acessível para inicinates em React.
  • A abordagem CLI requer conhecimento adicional de ferramentas e configurações, mas proporciona maior poder e flexibilidade, sendo mais adequada para desenvolvedores com experiência prévia.
  1. Suporte da Comunidade:
  • A inclusão direta tem suporte comunitário vasto, remontando aos primeiros dias do React, com muitos tutoriais disponíveis.
  • A ferramenta CLI create-react-app, desenvolvida pela equipe oficial do Facebook, também goza de ampla adoção e suporte na comunidade.
  1. Requisitos do Projeto:
  • Projetos pequenos se beneficiam da inclusão direta devido ao menor custo de configuração.
  • Projetos empresariais complexos são mais adequados para a abordagem CLI, que oferece melhor estrutura e gerenciamento de dependências.

Cada abordagem tem seus méritos e se aplica a diferentes cenários e níveis de experiência do desenvolvedor. Compreender quando usar cada método ajuda na escolha da melhor forma de iniciar com React.

Incluindo React Diretamente no HTML

Para começar com esta abordagem:

  1. Primeiro, adicione as bibliotecas React e ReactDOM ao seu arquivo HTML:

<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <title>Minha Aplicação React</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="destino"></div>
    <script type="text/babel">
      // Seu código React será inserido aqui
    </script>
  </body>
</html>
  1. Dentro da tag <script>, escreva seu código React. Para usar JSX, defina o type como "text/babel" para que o Babel possa processar o código.
  2. Renderize seu componente React dentro do <div id="destino"></div>:
ReactDOM.render(<MeuComponente />, document.getElementById('destino'));
  1. Crie seu componente React:
function MeuComponente() {
  return (
    <div>
      <h1>Olá, React!</h1>
      <p>Este é um componente React simples.</p>
    </div>
  );
}

Esta abordagem permite criar rapidamente uma aplicação React básica. No entanto, para projetos mais complexos, geralmente utiliza-se ferramentas como create-react-app ou Webpack para configurar o ambiente, facilitando o gerenciamento de dependências e o processo de build.

Utilizando a Interface de Linha de Comando (CLI)

Os passos básicos para usar React via CLI são:

  1. Instalar Node.js: Certifique-se de ter a versão mais recente do Node.js instalada em seu sistema. Faça o download no site oficial (https://nodejs.org/).
  2. Instalar create-react-app: Abra seu terminal ou prompt de comando e execute o seguinte comando para instalar globalmente a ferramenta create-react-app:
npm install -g create-react-app
  1. Criar Projeto React: No terminal, execute o comando abaixo para criar um novo projeto React:
create-react-app minha-aplicacao

Isso criará um novo diretório de projeto React chamado "minha-aplicacao".

  1. Iniciar Servidor de Desenvolvimento: Navegue até o diretório recém-criado e execute o comando para iniciar o servidor de desenvolvimento:
cd minha-aplicacao
npm start

Isso iniciará o servidor e abrirá sua aplicação React no navegador padrão.

  1. Explorar a Estrutura do Projeto: A estrutura gerada pelo create-react-app inclui:
  • src/: Contém os arquivos de código-fonte da aplicação.
  • public/: Contém o modelo HTML e outros recursos estáticos.
  • node_modules/: Contém os módulos Node.js do projeto.
  • package.json: Define as dependências e outras configurações do projeto.
  1. Escrever Código React: No diretório src/, você pode criar componentes React, arquivos de estilo e outros recursos relacionados. O arquivo src/App.js contém o componente principal da aplicação.
  2. Construir e Implantar: Quando estiver pronto para implantar sua aplicação, execute o comando abaixo para gerar a versão de produção:
npm run build

Isso criará arquivos otimizados estáticos no diretório build/, prontos para serem implantados em um servidor web.

Usando a ferramenta create-react-app, você pode configurar rapidamente um novo projeto React e focar na escrita do código da aplicação, sem se preocupar com a configuração de ferramentas de build e ambiente de desenvolvimento. Esta é uma das formas mais simples e populares de começar a trabalhar com React.

Tags: React javascript desenvolvimento web CLI create-react-app

Publicado em 6-2 23:15 por Thomas

Tags em Destaque

©2026 Doido Dev