Embelezando frontend React com w3css

Se você leu o tutorial anterior ou viu o vídeo percebeu que o front deixou a desejar.

Se ainda não leu confira aqui depois volte nessa página.

Mas a proposta anterior era mesmo mostrar o poder do react-router-dom em melhorar a acessibilidade e conferir funcionalidades na navegação.

Hoje vamos ver como usar a biblioteca css w3css do w3school que você pode conferir na documentação rica desse framework css.

Simbora.

Vamos alterar alguns arquivos e instalar a biblioteca.

Primeiro na pasta public do React crie uma pasta nomeando-a css.

Após isso você pode baixar para essa pasta o arquivo w3.css você poderá baixar diretamente no site do w3schools.

Agora vamos mexer nos arquivos. Beleza.

Altere App.js conforme abaixo.

import React from 'react';

import './App.css';

import { Outlet, Link} from 'react-router-dom';

function Navbar(){

  return(

    <div>

    <nav className="w3-bar w3-green">

      <Link to="./invoices">Invoices</Link> |{" "}

      <Link to="./expences">Expences</Link>

    </nav>

    <Outlet />

    </div>

  )

}

export default function () {

return(

<div>

<Navbar />

</div>

)

}

Nós chamamos w3-bar e w3-green na Navbar e chamamos os links dos componentes Invoices e Expences dentro.

Agora vamos alterar o css de Invoices o novo css ficou assim.

main{

display: flex;

flex-direction: column;

padding: 1rem 0;m 

}

nav{

border-right: solid 1px;

padding: 1rem;

}

.links{

display: block;

margin: 1rem 0;

}

Altere também seu invoices.jsx

import React from 'react';

import './invoices.css';

import { Outlet, Link } from "react-router-dom";

import { getInvoices } from "../data";

export default function Invoices() {

let invoices = getInvoices();

return (

<div className="w3-half">

<div className="w3-sidebar">

<nav>

{invoices.map((invoice) => (

<Link className="links"

to={`/invoices/${invoice.number}`}

key={invoice.number}>

{invoice.name}

</Link>

))}

</nav>

</div>

<div className="w3-margin w3-right">

<Outlet />

</div>

</div>

);

}

Você poderá aprender mais na documentação do w3.css que é bem completa.

Paramos aqui mas você vai ver que o layout já começou a ficar bonito...

Agora é posssível ir incrementando conforme o gosto de cada um.

Fico por aqui...

Epa.

O vídeo curto do layout melhorado você pode ver aqui.

NOVA PLANILHA MEI OU PEQUENA EMPRESA ATUALIZAÇÃO


 

Essa atualização da planilha Frente de caixa com Libreoffice Calc agora possui a opção de uso com os bancos de dados: MySql ou HSQL. Ao comprar envie pelo formulário a opção.
A instalação e configuração do banco de dados será feita remotamente.

TELAS DE CADASTROS DO SISTEMA FRENTE DE CAIXA PARA MEI OU PEQUENA EMPRESA

Cadastros:
Clientes, Fornecedores, Funcionários, Estoque e Despesas
Visualização gráfica e em relatórios de todos os dados cadastrados do negócio.


BANCO DE DADOS: Mysql.
Código: 9090