/CleanArchitecture-React

Projeto exemplificando como utilizar clean architecture.

Primary LanguageTypeScriptGNU General Public License v3.0GPL-3.0

Build Status Coverage Status js-standard-style GPLv3 License Open Source

4Dev React - Enquetes para Programadores

alt text

Link para o curso completo

Essa sistema faz parte do treinamento do professor Rodrigo Manguinho (Mango) na Udemy.

O objetivo do treinamento é mostrar como criar um sistema em ReactJs utilizando os novos Hooks, com uma arquitetura bem definida e desacoplada, utilizando TDD (programação orientada a testes) como metodologia de trabalho, Clean Architecture para fazer a distribuição de responsabilidades em camadas, sempre seguindo os princípios do SOLID, DRY, YAGNI, KISS e aplicando Design Patterns para resolver alguns problemas comuns.

Link para a documentação da API

Princípios

  • Single Responsibility Principle (SRP)
  • Open Closed Principle (OCP)
  • Liskov Substitution Principle (LSP)
  • Interface Segregation Principle (ISP)
  • Dependency Inversion Principle (DIP)
  • Separation of Concerns (SOC)
  • Don't Repeat Yourself (DRY)
  • You Aren't Gonna Need It (YAGNI)
  • Keep It Simple, Silly (KISS)
  • Composition Over Inheritance
  • Small Commits

Design Patterns

  • Factory
  • Adapter
  • Composite
  • Decorator
  • Dependency Injection
  • Abstract Server
  • Composition Root
  • Builder
  • Proxy

Metodologias e Designs

  • TDD
  • Clean Architecture
  • DDD
  • Reactive Programming
  • Conventional Commits
  • GitFlow
  • Modular Design
  • Dependency Diagrams
  • Use Cases
  • Continuous Integration
  • Continuous Delivery
  • Continuous Deployment

Bibliotecas e Ferramentas

  • Typescript
  • React
  • React Testing Library
  • React Router DOM
  • Cypress
  • Jest
  • Axios
  • Git
  • Webpack
  • SASS + Animations
  • NPM
  • Travis CI
  • Faker
  • Coveralls
  • Husky
  • Lint Staged
  • Eslint
  • Standard Javascript Style

Features do React

  • Functional Components
  • UseState
  • UseContext
  • UseEffect
  • UseHistory
  • UseRef
  • Custom Hooks
  • Router
  • Memo

Features do Git

  • Alias
  • Log Personalizado
  • Branch
  • Reset
  • Amend
  • Tag
  • Tag Anotada
  • Stash
  • Rebase
  • Merge
  • Add
  • Commit
  • Push
  • Pull
  • Shortlog
  • Status

Features do Typescript

  • POO Avançado
  • Interface
  • Type Alias
  • Namespace
  • Module
  • Utility Types
  • Modularização de Paths
  • Build
  • Deploy
  • Generics

Features de Testes

  • Testes Unitários
  • Testes de Integração
  • Testes e2e
  • Cobertura de Testes
  • Test Doubles
  • Mocks
  • Stubs
  • Spies
  • Fakes
  • Dummies

Estudo com principais práticas do React

Este projeto tem como objetivo realizar um apanhado geral das principais metodologias e práticas

Badge

Status

🚧 🚀 Em construção... 🚧

Features

  • Estrutura de diretórios
  • Arquivo ReadMe
  • Conteudo de diretórios
  • Outros
  • Outros
  • Outros

Demonstração

🚧 🚀 Em construção... 🚧
Exemplo de como usar https://github.com/tgmarinho/meetapp Screenshots, github, imagens

🛠 Tecnologias

As seguintes ferramentas foram usadas na construção do projeto:

Pré-requisitos

Antes de iniciar instale:

NodeJS

Npm

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js. Além disto é bom ter um editor para trabalhar com o código como VSCode

🎲 Rodando

# Clone este repositório
$ git clone 

# Acesse a pasta do projeto no terminal/cmd
$ cd pasta

# Instale as dependências
$ npm install

# Execute a aplicação em modo de desenvolvimento
$ yarn start

# O servidor inciará na porta:3333 - acesse <http://localhost:3333>

Instalação

Outras Dependencias

React-Router-Dom
npm install @types/react-router-dom More (https://reactrouter.com/web/guides/quick-start)

#Autor

Kátia Cibele 🚀❤️👋🏽 Entre em contato! Badge saythanks