Sobre a aplicação | Interfaces | Stacks | Rodando Aplicação | Por quê? |
Esta aplicação é um Dashboard de registros financeiros para acompanhamento de valores de entrada, saída e total. Neste projeto é aplicado conceitos de Styled Components (Estilização) , MirageJS (API), Context, Axios, além dos conceitos básicos de ReacjJS como State, Components, Props. Recursos do JS aplicado ao Typescript como: Map, Format Currency, Spread.
Tela Principal |
---|
Modal |
---|
TypeScript
(TypeScript é uma linguagem de programação fortemente tipada que se baseia em JavaScript, oferecendo melhores ferramentas em qualquer escala.)map
(Iteração com retorno de conteúdo trabalhado, com outro formato, contexto.)spread
(Método usado para fazer cópia de uma array já existente)format Currency
(Método para formatação de monetária)
-
Style Components
(Biblioteca de estilização que permite escrever CSS no formato de Javascript)
Componente
(Uso de componentes)Estado
(Uso de hooks para controle de estado e ciclo de vida da aplicação)Props
(Recurso utilizado para passar atributos de um componente pai para outro componente filho)Context API
(Usado para compartilhar dados de Estado, Funções etc... entre componentes diferentes. Faz com que a visão seja global.)
- Clonar repositório:
git clone https://github.com/DIGOARTHUR/DashBoard-Financeiro.git
- Instalar dependências
yarn install
- Ajustar endereço de acesso baseURL do axios para as requisições. Arquivo:
services
>api.ts
import axios from 'axios';
export const api = axios.create({
baseURL:'http://localhost:3000/api',
})
- Rodar aplicativo
yarn start
- Acesse http://localhost:3000/ e navegue pelo site
5.1 Ver qual o repositorio atual
git remote -v
5.2 Mudar a URL do repositorio remoto
git remote set-url origin <LinkDoNovoRepositorio>
5.3 Verifique se a mudança foi realizada
git remote -v
A aplicação da aula do Chapter II da trilha ReactJS da @Rocketseat foi muito divertida! Busco seguir essa trilha para aprender o FrontEnd de uma forma enriquecedora, onde eu possa compreender, aplicar e ver rodando o que programo. Este é o meu foco, e venho aprendendo cada vez mais isso com a Rocketseat.
Só tenho a agradecer! ♥