Doc
  • Comece Já
  • Academia
  • Biblioteca
  • Languages iconPortuguês
    • English

›Website

Academy

  • Visão Geral
  • Introdução
  • Backoffice
  • Poliglota
  • Apps
  • API
  • Estratégia
  • Demo Application

    • Configuração
    • Formulário
    • Relacionar Dados
    • Serviço
    • Interface & Design
  • Próximos Passos
  • Primeira aplicação

Explore

  • Configuração
  • Centralized Terminal
  • Linha de Comandos
  • Serviços
  • Indústria
  • Graphical Interface

    • Conheça a interface gráfica
    • Formulários
    • Campos
    • Queries Interface

User Interface

  • Modal Form
  • Implementar tabelas e gráficos
  • Eventos do Ciclo de Vida

Server

    Database

    • Excel
    • H2Database
    • MSSQL
    • Múltiplas bases de dados
    • PostgreSQL
    • DB Connection Pool

    Services

    • Serviços Web REST
    • WebSocket
    • JWT Token
    • OpenAPI
    • CORS
    • Queries Programaticamente
    • Gerar Unique ID's (UID/GUID)
    • Envio de e-mails
    • XLS - Excel
    • PDF
  • Actions
  • Cron Jobs
  • Custom URLs
  • Setup dos Dados
  • Monitor e Alertas
  • Templates
  • Desenvolvimento e debug em Java
  • Integração com NGINX

Website

  • ReactJS Create
  • Pages & Routers

Pages & Routers

Introdução

A criação de páginas é uma necessidade comum quando a aplicação web fica complexa ou quando trata-se de um website.

No desenvolvimento com ReactJS é possível criar o macanismo de páginas com o React Router.

Configuração

Certifique que tem instado o módulo do React Router na pasta website:

npm install -S react-router-dom 

E do Ant.Design, que será utilizado para a criar a estrutura geral:

npm install -S antd

No ficheiro App.js que é encontrado na pasta src da aplicação ReactJS, ou seja website/src, adicine a importação dos módulos da seguinte forma:

import {
  BrowserRouter as Router,
  Switch, Route, Link
} from "react-router-dom";

import { Layout, Menu } from 'antd';

Depois das importações adicione as constantes:

const { Header, Footer, Content } = Layout;

const { SubMenu } = Menu;

Nesta fase inicial o retorno do componente App poderá ser da seguinte forma:

  return (
    <Router>
      <Layout>
        <Header>
          <Menu mode="horizontal">
            <Menu.Item>
              <Link to="/">Home</Link>
            </Menu.Item>
          </Menu>
        </Header>
        <Content>
          <Switch>
            <Route path="/">
              <>Home</>
            </Route>
          </Switch>
        </Content>
        <Footer>Footer</Footer>
      </Layout>
    </Router>
  );

Assim os componentes do React Router estão estruturados com os componentes de estrutura de página do Ant.Design.

O component Link aponta para o /, que vai carregar o Route referente associado ao caminho path="/".

Criar Novas Páginas

As páginas ficam em componentes a parte, cada página é representada por um componente próprio em ReactJS.

Uma boa prática é colocar os componentes das páginas dentro de uma pasta chamada pages.

Home

Criar a página de entrada, que será o componente Home e estará associado ao path /.

O ficheiro do componente desta página será:

  • pages/Home/index.js

O código deste arquivos pode ser:

import React from 'react';

export default ()=> {
    return (
        <div>
            <h1>Home</h1>
        </div>
    );
};

Info

Criar uma página de conteúdo de exemplo, que será o componente Info e estará associado ao path /info.

O ficheiro do componente desta página será:

  • pages/Info/index.js

O código deste arquivos pode ser:

import React from 'react';

export default ()=> {
    return (
        <div>
            <h1>Info</h1>
        </div>
    );
};

Navegação

Para realizar a navegação das páginas criadas deverá ser adicionado no Menu componentes do tipo Link que aponta para o endereço referente.

Também deverá ser adicionado os componentes de Route que associa o endereço ao componente da página referente.

Desta forma deverá ser estruturado o retorno do componente App da seguinte forma:

  return (
    <Router>
      <Layout>
        <Header>
          <Menu mode="horizontal">
            <Menu.Item>
              <Link to="/">Home</Link>
            </Menu.Item>
            <Menu.Item>
              <Link to="/info">Info</Link>
            </Menu.Item>
          </Menu>
        </Header>
        <Content>
          <Switch>
            <Route path="/info">
              <Info/>
            </Route>
            <Route path="/">
              <Home/>
            </Route>
          </Switch>
        </Content>
        <Footer>Footer</Footer>
      </Layout>
    </Router>
  );

Conclusão

O ReactJS com o React Router é possível definir múltiplas páginas e realizar a navegação entre elas.

O Ant.Design auxilia a construção da estrutura da página e oferece diversos componentes úteis para construir interfaces complexas.

← PreviousNext →
  • Introdução
  • Configuração
  • Criar Novas Páginas
    • Home
    • Info
  • Navegação
  • Conclusão

Open Source

Download

admin@netuno.org

support@netuno.org

Copyright © Sitana 2022