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

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:
bash
```
cd /Applications/ServBay/www
npx create-react-app servbay-react-app
```
1
2
Instalação das dependências
Entre no diretório do projeto e instale as dependências:
bash
```
cd servbay-react-app
npm install
```
1
2

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

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!":

javascript

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

Executar o servidor de desenvolvimento
Inicie o servidor de desenvolvimento e especifique a porta (por exemplo: 8585):
bash
```
npm start -- --port 8585
```
1
Isso iniciará um servidor de desenvolvimento local e exporá a porta 8585.
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.
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

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:
bash
```
npm run build
```
1
Após a construção, os arquivos estáticos gerados serão colocados no diretório build.
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
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.