Criando e Executando Projetos React no Ambiente Local do macOS com ServBay

O que é o React?

O React é uma biblioteca JavaScript de código aberto mantida pela Meta (antigo Facebook) e sua comunidade, dedicada à construção de interfaces de usuário (UI). Com uma abordagem baseada em componentes, o React permite que desenvolvedores criem rapidamente UIs interativas para aplicações web de página única (SPA) ou sistemas web complexos, de forma eficiente e sustentável. Entre seus principais diferenciais estão o paradigma declarativo, atualizações eficientes de DOM por meio do virtual DOM e um ecossistema vibrante.

Principais características e vantagens do React

• Desenvolvimento baseado em componentes: Divide interfaces complexas em componentes independentes e reutilizáveis, facilitando manutenção e reutilização do código.
• Visão declarativa: Permite descrever o estado da UI de forma simples; o React se encarrega de atualizar o DOM conforme o estado muda, simplificando a lógica de desenvolvimento.
• Virtual DOM: Mantém uma representação virtual do DOM na memória para comparar diferenças e minimizar operações diretas no DOM real, resultando em alto desempenho.
• Fluxo de dados unidirecional: O fluxo de dados de cima para baixo torna as mudanças de estado mais fáceis de rastrear e compreender.
• JSX: Uma extensão de sintaxe para o JavaScript que permite escrever estruturas similares ao HTML, tornando o código mais legível.
• Ecossistema robusto: Suportado por uma enorme comunidade e muitas bibliotecas de terceiros (como React Router, Redux/Zustand/MobX, Material UI etc.), cobrindo gerenciamento de estado, roteamento, componentes UI e mais.

A utilização do React permite construir aplicações web modernas e de alta performance de forma mais rápida e eficiente.

Configurando Ambiente de Desenvolvimento e Produção React com o ServBay

ServBay é um poderoso ambiente local de desenvolvimento web para usuários macOS, incluindo suporte integrado ao Node.js e outros pacotes. Neste guia, você aprenderá passo a passo como criar, configurar e rodar um projeto React utilizando o Node.js do ServBay e os recursos de Websites, abrangendo desde proxy reverso no desenvolvimento até hospedagem de arquivos estáticos em produção.

Pré-requisitos

Antes de começar, certifique-se de ter realizado as etapas abaixo:

1. ServBay instalado: O ServBay já deve estar instalado e em execução no seu macOS.
2. Node.js instalado: Instale o pacote Node.js via interface ou CLI do ServBay. Para mais detalhes, consulte a documentação de instalação do Node.js no ServBay. O ServBay gerencia automaticamente versões e variáveis do Node.js.

Criando um Projeto React

Vamos utilizar o moderno Vite para criar rapidamente um novo projeto React. O Vite oferece inicialização instantânea e Hot Module Replacement (HMR), proporcionando uma experiência superior de desenvolvimento, tornando-se a principal opção para novos projetos React no lugar do antigo create-react-app.

1. Abra o terminal e navegue até o diretório raiz dos sites

   Inicie o Terminal. O diretório sugerido pelo ServBay para sites é /Applications/ServBay/www. Navegue até ele:

   cd /Applications/ServBay/www

2. Crie um novo projeto React com Vite

   Execute o seguinte comando para criar um projeto React chamado servbay-react-demo usando o template do React:

   npx create-vite servbay-react-demo --template react

   • npx: Executor de pacotes npm, possibilita rodar ferramentas diretamente do repositório npm sem instalar globalmente, sempre usando a versão mais recente do create-vite.
   • create-vite: Ferramenta oficial de scaffolding do Vite para iniciar projetos rapidamente.
   • servbay-react-demo: Nome da pasta do seu projeto.
   • --template react: Indica que o projeto será iniciado com o template React.

   Siga as instruções exibidas no terminal para finalizar a criação do projeto.

3. Acesse o diretório do projeto e instale as dependências

   Entre no novo diretório criado e instale os pacotes necessários via npm:

   cd servbay-react-demo
   npm install

   • Se preferir, pode usar yarn install ou pnpm install como gerenciador de pacotes.

Modificando o Conteúdo do Projeto React (Opcional)

Para verificar que tudo foi configurado com sucesso, vamos editar o conteúdo da página inicial.

1. Abra o arquivo src/App.jsx ou src/App.tsx

   Use seu editor de código favorito e acesse src/App.jsx (template JavaScript) ou src/App.tsx (template TypeScript).

2. Modifique o conteúdo

   Encontre a parte principal da renderização e troque para exibir "Hello ServBay!":

   // ... outros imports ...
   import './App.css';
   
   function App() {
     // ... outro código ...
     return (
       <>
         {/* ... outros elementos ... */}
         <h1>Hello ServBay!</h1>
         {/* ... outros elementos ... */}
       </>
     );
   }
   
   export default App;

   Salve o arquivo.

Iniciando o Modo de Desenvolvimento

Durante o desenvolvimento, utiliza-se um servidor local que oferece HMR (Hot Module Replacement) para facilitar ajustes. O ServBay pode realizar proxy reverso para encaminhar acessos externos ao servidor de desenvolvimento.

1. Inicie o servidor de desenvolvimento via terminal

   No diretório raiz do projeto servbay-react-demo, execute:

   npm run dev -- --port 8585

   • npm run dev executa o script dev do package.json, normalmente ativando o Vite.
   • -- --port 8585 define a porta do servidor (8585 neste exemplo).

   O terminal exibirá o endereço local, por exemplo, http://localhost:8585. Mantenha a janela do terminal aberta durante o desenvolvimento.

2. Configure o proxy reverso do site pelo ServBay

   Abra a interface do ServBay e vá até Websites. Clique para adicionar uma nova configuração:

   • Nome: ServBay React Dev (nome descritivo)
   • Domínio: servbay-react-dev.servbay.demo (um domínio de demonstração relacionado ao ServBay)
   • Tipo do site: selecione Reverse Proxy (Proxy Reverso)
   • Proxy IP: 127.0.0.1 (servidor está rodando localmente)
   • Porta do Proxy: 8585 (igual ao definido ao iniciar o dev server)

   Salve as configurações. O ServBay aplicará as alterações e configurará seu servidor web interno (Caddy ou Nginx) para encaminhar requisições do domínio servbay-react-dev.servbay.demo para http://127.0.0.1:8585.

   Para detalhes sobre como adicionar sites no ServBay, consulte a documentação de gerenciamento de sites do ServBay.

3. Acesse seu site de desenvolvimento

   Abra o navegador e acesse: https://servbay-react-dev.servbay.demo

   • Graças ao ServBay, seu site local já estará protegido com um certificado SSL (emitido pela ServBay User CA ou ServBay Public CA), podendo acessar via HTTPS. Veja mais em Como proteger seu site com SSL.
   • Agora, ao editar arquivos do projeto, seu navegador atualizará automaticamente a página — isso é o HMR funcionando.

Construindo para Produção

Quando o projeto estiver pronto para ser publicado, gere o build otimizado.

1. Crie o build de produção no terminal

   No diretório servbay-react-demo, execute:

   npm run build

   Este comando executa o script build do package.json, compilando, empacotando e otimizando seus arquivos em HTML, CSS, JavaScript, etc., e os salva normalmente em dist. Após finalizar, o terminal mostrará o sucesso da build.

2. Configure o serviço de arquivos estáticos no ServBay

   O diretório dist contém os arquivos prontos para hospedagem. No ServBay, cadastre um novo site do tipo estático apontando para essa pasta.

   Na interface do ServBay, acesse Websites e adicione uma nova configuração:

   • Nome: ServBay React Prod (nome descritivo)
   • Domínio: servbay-react.servbay.demo (um domínio de demonstração distinto do dev)
   • Tipo do site: selecione Static (Estático)
   • Diretório raiz: /Applications/ServBay/www/servbay-react-demo/dist (diretório build)

   Salve para que o servidor web interno faça a entrega direta dos arquivos do dist.

3. Acesse seu site de produção

   No navegador, acesse: https://servbay-react.servbay.demo

   Você verá o site otimizado, rodando o build de produção com SSL automático do ServBay.

Conclusão

Seguindo estas etapas, você configurou com sucesso um projeto React localmente no macOS utilizando o ServBay, criando ambientes de desenvolvimento com proxy reverso e de produção para arquivos estáticos. O ServBay facilita o gerenciamento do ambiente de desenvolvimento, graças ao suporte nativo ao Node.js, configurações flexíveis (proxy e estático) e SSL automático — otimizando significativamente o fluxo de trabalho de desenvolvedores React. Continue evoluindo, testando e publicando seus projetos com comodidade!