Compilado de padrões e boas práticas para ajudar o desenvolverdor Front-End em projetos React JS
O intuito deste projeto não é definir o formato de desenvolvimento e estruturas, mas servir de apoio com uma base configurada seguindo as boas práticas e integrar toda a equipe para ajudar na evolução do projeto como um todo.
Boilerplate é um projeto progressivo que será alimentado pelas equipes (Front-End, Back-End, Designers, Testes, etc..)
git clone https://github.com/snksergio/Boilerplate.git && cd Boilerplate
yarn
yarn start
Executa a aplicação em modo desenvolvimento no caminho http://localhost:3000. A página é recarregada com edições nos arquivos e os erros de lint são acusados no console.
- ./docs: Área de documentos de auxílio do projeto
- ./design: Arquivos de design do projeto
- src/assets: Arquivos estáticos (Imagens, ícones, fontes, etc...)
- src/commons: Utilitários, recursos, assets, globais, etc..
- src/components: Componentes compartilhados do projeto
- src/routes: Definições e Configurações de Rotas
- src/screens: Componentes de telas de apresentação
- src/screens/Explorer: Compilado de exemplos de uso e componentes
Área independente de apoio ao Desenvolvedor duplicando a estrutura base como exemplo contendo documentações de apoio para o uso do Boilerplate e componentes que podem ser reutilizados e alterados conforme a necessidade
Boilerplate
├── ....
├── public
└── src
├── Main
├── Home
└── Explore.js
├── assets
├── commons
├── components
├── routes
└── screens
Para remover o pacote explorer basta remover a pasta ./src/screens/Explore
e também remover a importação do Explore na rota principal .src/routes
This project was bootstrapped with Create React App.
- Styled-Components: https://www.styled-components.com/ Lib para escrever código CSS dentro do JS
- React Router V4: https://reacttraining.com/react-router/ Lib para configuração e gerênciamento de rotas
- ESlint: Fiscalizador da qualidade e padrões de códigos (Airbnb)
- SonarQube
Opicional
: Plataforma dedicado à analisar continuamente seu código e mensurar a qualidade técnica do código fonte, desde o projeto até o nível do método.
Para facilitar o uso e agilizar o processo seguindo as padronizações definidas redomenda-se automatizar tais configurações em tempo real na edição do código utilizando o VS Code
Basta adicionar a seguinte configuração no settings.json
do seu VS Code:
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false,
},
"prettier.disableLanguages": [
"js"
],
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"files.autoSave": "onFocusChange"
As demais configuração já estão alocadas no arquivo .eslintrc
do Boilerplate
Para instalar o SonarQube é necessário atender os seguintes pré-requisitos: Java (Oracle JRE 7 or greater or OpenJDK 7 or greater) e Database (SQL Server, MySQL, Oracle ou PostegreSQL)
1 - Criar uma base nova para o projeto (Ex: createdb sonarqube)
2 - Baixar o SonarQube e também o SonarScanner
3 - Descompactar em qualquer diretório, nesse caso C:\sonarqube-7.7
4 - Editar as configurações de conexão com a base de dados no arquivo C:\sonarqube-7.7\conf\sonar.properties
sonar.jdbc.username=postgres
sonar.jdbc.password=postgres
sonar.jdbc.url=jdbc:postgresql://localhost/sonarqube?currentSchema=my_schema
5 - Setar as variáveis de ambientes no Path
C:\sonar-scanner-3.3.0.1492-windows\bin
C:\sonarqube-7.7\bin\windows-x86-64
6 - Configurar o arquivo sonar-project.properties
que se encontra na pasta raiz do Boilerplate
7 - Iniciar o serviço do SonarQube pelo terminal digitando startsonar
e após o serviço iniciado inicar o serviço do SonarScanner também pelo terminal sonar-scanner
(obs: SonarScanner será o responsável pela leitura do projeto, ele irá validar o código de acordo com o projectVersion dentro do arquivo sonar-project.properties
)
Inicia o test runner interativo.
Veja a seção sobre testes em execução para mais informações.
Cria o aplicativo para produção na pasta build
.
Ele agrupa corretamente o React no modo de produção e otimiza o build para obter o melhor desempenho.
A compilação é reduzida e os nomes dos arquivos incluem os hashs.
Seu aplicativo está pronto para ser implantado!
Veja a seção sobre deployment para mais informações.
Guias e informações de uso e implementações que foram utilizadas para a estruturação e padronização do Boilerplate
- Styles - Guia responsável pela padronização de estilos do Boilerplate
- Router - Configurações e administração das rotas e navegabilidade do Boilerplate
- SonarQube - Guia para implementação do SonarQube do Boilerplate
- Documento Padrão - Exemplo de uma estrutura padrão para a criação de uma documentação
- Suporte à sintaxe React, JSX, ES6, TypeScript e Flow.
- Autoprefixo CSS, para que você não precise de -webkit ou outros prefixos
- Um Test Runner interativo rápido com suporte integrado para relatórios de cobertura.
- Um servidor de desenvolvimento ativo que avisa sobre erros comuns.
- Offline-first service worker e web app manifest, atendendo a todos os critérios do Progressive Web App
- Atualizações sem complicações para as ferramentas acima com uma única dependência.
Seja também um contribuidor, e nos ajude a evoluir com o nosso Boilerplate.
Qualquer tipo de contribuição que proponha evolução é bem vinda!