Criando e executando um projeto React

O que é React?

React é uma biblioteca JavaScript de código aberto para construir interfaces de usuário, mantida pelo Facebook. Ela foca na construção da camada de visualização e permite que os desenvolvedores construam interfaces de usuário complexas de maneira eficiente através da componentização. O princípio central do React é a estruturação em componentes e o fluxo de dados unidirecional, o que torna o código mais fácil de entender e manter.

Principais características e vantagens do React

• Componentização: Através de componentes para construir a interface de usuário, tornando o código mais modular e reutilizável.
• DOM Virtual: React usa o DOM virtual para otimizar o desempenho, atualizando o DOM real apenas quando necessário.
• Fluxo de dados unidirecional: Os dados fluem unidirecionalmente entre os componentes, tornando a gestão de estado da aplicação mais clara e previsível.
• Comunidade e ecossistema robustos: React possui uma vasta comunidade e suporte a bibliotecas de terceiros, facilitando o desenvolvimento.

Usar React pode ajudar os desenvolvedores a construir aplicações web modernas e responsivas de maneira mais eficiente.

Criando e executando um projeto React com o ServBay

Neste artigo, usaremos o ambiente Node.js fornecido pelo ServBay para criar e executar um projeto React. Utilizaremos o recurso de 'host' do ServBay para configurar um servidor web e acessar o projeto através de proxy reverso e serviço de arquivos estáticos.

Criando um projeto React

1. Inicialização do projeto

   Primeiro, certifique-se de que você instalou o ambiente Node.js fornecido pelo ServBay. Em seguida, use o seguinte comando para inicializar um novo projeto React:

   cd /Applications/ServBay/www
   npx create-react-app servbay-react-app

2. Instalação das dependências

   Entre no diretório do projeto e instale as dependências:

   cd servbay-react-app
   npm install

Modificando o conteúdo de saída do projeto React

1. Modificar o arquivo src/App.js

   Abra o arquivo src/App.js e modifique o conteúdo para que a página web exiba "Hello ServBay!":

   import React from 'react';
   import './App.css';
   
   function App() {
     return (
       <div className="App">
         <header className="App-header">
           <h1>Hello ServBay!</h1>
         </header>
       </div>
     );
   }
   
   export default App;

Entrando no modo de desenvolvimento

1. Executar o servidor de desenvolvimento

   Inicie o servidor de desenvolvimento e especifique a porta (por exemplo: 8585):

   npm start -- --port 8585

   Isso iniciará um servidor de desenvolvimento local e exporá a porta 8585.

2. Configurar o proxy reverso do host ServBay

   Use o recurso 'host' do ServBay para acessar o servidor de desenvolvimento através de proxy reverso. Nas configurações de 'host' do ServBay, adicione um novo proxy reverso:

   • Nome: My first React dev site
   • Domínio: servbay-react-test.dev
   • Tipo de host: Proxy reverso
   • IP: 127.0.0.1
   • Porta: 8585

   Para as etapas detalhadas da configuração, consulte Adicionar um website de desenvolvimento Nodejs.

3. Acessar o modo de desenvolvimento

   Abra o navegador e acesse https://servbay-react-test.dev para visualizar o projeto em tempo real. Como o ServBay oferece suporte a domínios personalizados e certificados SSL gratuitos, você terá maior segurança.

Construindo a versão de produção

1. Construir a versão de produção

   Quando o desenvolvimento estiver concluído, use o comando a seguir para construir a versão de produção:

   npm run build

   Após a construção, os arquivos estáticos gerados serão colocados no diretório build.

2. Configurar o serviço de arquivos estáticos

   Use o recurso 'host' do ServBay para acessar a versão de produção através de serviço de arquivos estáticos. Nas configurações de 'host' do ServBay, adicione um novo site estático:

   • Nome: My first React production site
   • Domínio: servbay-react-test.prod
   • Tipo de host: Estático
   • Diretório raiz do site: /Applications/ServBay/www/servbay-react-app/build

3. Acessar o modo de produção

   Abra o navegador e acesse https://servbay-react-test.prod para visualizar a versão de produção. Com os domínios personalizados e certificados SSL gratuitos do ServBay, seu site terá maior segurança e credibilidade.

Seguindo esses passos, você terá criado e executado com sucesso um projeto React, utilizando os recursos fornecidos pelo ServBay para gerenciar e acessar seu projeto.