Após utilizar o ecossistema Vue.js em meus projetos anteriores, decidi migrar para React em um novo empreendimento. Nesta série, vou compartilhar meu processo de aprendizado e implementação de uma aplicação com React.

As tecnologias que utilizaremos neste projeto incluem:

• React 18.1.0
• react-router-dom 6.3.0 para gerenciamento de rotas
• Redux para gerenciamento de estado global
• TypeScript para tipagem estática
• Ant Design 4.20.4 para componentes de UI
• axios para requisições de rede

Criando o Projeto

Para iniciar nosso projeto React, utilizaremos o create-react-app, a ferramenta oficial do Facebook para inicializar aplicações React:

// Siga as instruções do terminal para configurar seu projeto
npx create-react-app <nome-do-projeto>

Estrutura de Diretórios

Ao criar o projeto, obteremos a seguinte estrutura de pastas:

├── public
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── components // Componentes reutilizáveis
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    ├── routes // Pasta criada para organizar o gerenciamento de rotas
    ├── setupTests.js
    └── views // Páginas da aplicação

Iniciando o Projeto

Para executar nossa aplicação localmente:

// Navegue para o diretório do projeto
cd <nome-do-projeto>
// Inicie o servidor de desenvolvimento
npm start

Este comando abrirá automatiacmente seu navegador na página http://localhost:3000, onde você verá o logo padrão do React.

Configurando o Roteamento

Para implementar navegação entre páginas, instalaremos o react-router-dom:

npm install react-router-dom

Criando Páginas e Configurando Rotas

Vamos criar algumas páginas básicas e configurar as rotas:

Página Inicial

import * as React from "react";

class PaginaInicial extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mensagem: 'Bem-vindo à página inicial'
    }
  }

  render() {
    return <div>{this.state.mensagem}</div>;
  }
}

export default PaginaInicial;

Página de Login

import React from "react";

class TelaLogin extends React.Component {
  render() {
    return (
      <div>Área de Login</div>
    )
  }
}

export default TelaLogin;

Configurando as Rotas no App.js

import './App.css';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import PaginaInicial from "../views/PaginaInicial";
import TelaLogin from "../views/TelaLogin";

function App() {
  return (
    <browserrouter>
        <routes>
            <route element="{<PaginaInicial" path="{'/'}"></route>} />
            <route element="{<TelaLogin" path="{'/login'}"></route>} />
        </routes>
    </browserrouter>
  );
}

export default App;

Com esta configuração, ao acesar http://localhost:3000, você verá a página inicial. Já http://localhost:3000/login exibirá a tela de login.

Na próxima parte desta série, configuraremos TypeScript e SCSS para melhorar nosso fluxo de trabalho e estrutura de código.