React.js: Menus e alternando conteúdos

Afluentes: Desenvolvimento Front-end II

Alterando o Conteúdo

O aplicativo criado com o Vite é muito legal e prático, mas o que é criado é apenas o motor do que vamos querer trabalhar, então pode não ser muito bom esteticamente quando estamos lidando com a identidade visual de uma empresa, organização ou mesmo gosto pessoal. Então, o que vamos fazer aqui é excluir, ou comentar os arquivos CSS usados pelo nosso aplicativo.

No arquivo src/main.jsx, exclua ou comente a linha abaixo

import './index.css'

Podemos criar um CSS customizado na nossa página ou usar um pronto. Basta adicioná-lo com import. Veja que podemos apenas alterar o conteúdo de index.css sem problemas.

Contudo, no nosso caso, vamos usar o Bootstrap para vite no nosso aplicativo.

Primeiro, dentro da pasta raiz do nosso projeto já criado, vamos instalar o Bootstrap da seguinte forma:

npm install bootstrap

E agora podemos adicionar no nosso arquivo do aplicativo, src/App.js o import:

import 'bootstrap/dist/css/bootstrap.min.css';

Pronto! Nossa aplicação agora vai trabalhar com o visual do Bootstrap e sem o CSS básico que vem com o vite, que no nosso caso não ia ficar legal.

Conteúdo da Página Inicial

Agora vamos criar um arquivo JSX para o conteúdo da página inicial. Então, dentro de src crie o arquivo Home.jsx com o seguinte conteúdo:

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <div>
        <h1>Bem-vindo à Página Inicial!</h1>
        <p>Este é o conteúdo da página Home.</p>
      </div>
    );
  }
}

export default Home;

Lembre-se, o componente pode ser uma função também, o que em alguns casos pode simplificar em termos visuais

Conteúdo da Página Sobre

E teremos também o About.js:

import React, { Component } from 'react';

class About extends Component {
  render() {
    return (
      <div>
        <h1>Sobre nós</h1>
        <p>Este é o conteúdo da página About.</p>
      </div>
    );
  }
}

export default About;

App.js

Por fim, temos o código do nosso App.js alterado para gerenciar o Navbar (menu) e os conteúdos:

import React, { Component } from 'react';
import './App.css'; // Importando o CSS externo
import Home from './Home';
import About from './About';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: 'Home',
    };
  }

  /* Tratamento do clique do menu para alterar o conteúdo da página.
     Isso deve ser gerenciado por meio de um state.
  */
  handleMenuClick = (page) => {
    this.setState({ content: page });
  };

  /* Renderizador da Navbar com os ítens do menu. Veja que ao clicar,
    chamamos a função de tratamento do click do menu.
  */
  renderNavbar() {
    return (
      <nav className="navbar">
        <ul className="navList">
          <li className="navItem" onClick={() => this.handleMenuClick('Home')}>
            Início
          </li>
          <li className="navItem" onClick={() => this.handleMenuClick('About')}>
            Sobre
          </li>
        </ul>
      </nav>
    );
  }

  /* Renderizamos o conteúdo por meio de um condicional if. Pegamos do state
     qual o ítem que foi clicado e então chamamos a classe específica.
  */
  renderContent() {
    const { content } = this.state;
    if (content === 'Home') {
      return <Home />;
    } else if (content === 'About') {
      return <About />;
    }
  }

  /* Função de renderização da aplicação */
  render() {
    return (
      <div className="App">
        {/* Navbar */}
        {this.renderNavbar()}

        {/* Conteúdo dinâmico */}
        <div className="content">
          {this.renderContent()}
        </div>

        {/* Rodapé */}
        <footer className="footer">
          <p>© 2024 MeuSite. Todos os direitos reservados.</p>
        </footer>
      </div>
    );
  }
}

export default App;