lgustta13 / github_explorer

Interface desenvolvida com ReactJS para apresentar meus repositórios do Github

github explorer - página desenvolvida com ReactJS

Interface desenvolvida para apresentar meus repositórios do Github

_{A documentação a seguir será postada em Inglês em breve!}

Sumário

• FUNCIONAMENTO DA APLICAÇÃO
• INICIALIZANDO O PROJETO PELO REACT
• O QUE SABER ANTES DE COMEÇAR?
• ESTRUTURA DE PASTAS DO PROJETO
• TYPESCRIPT

Funcionamento da aplicação

A interface foi desenvolvida com objetivos de estudos e aplicação do ReactJS. O princípio de funcionamento se baseia no consumo de uma API do Github que retorna todos os repositórios de um usuário a partir de seu nome de usuário na plataforma.

Inicializando o projeto pelo React

O React é uma biblioteca baseada em JavaScript que facilita o desenvolvimento de interfaces para aplicações web e dispositivos móveis, de forma escalonável (dividido em etapas e níveis), onde a renderização do código é mais rápida, leve e menor, uma vez que o .jsx (JS e XML) realiza esse procedimento. Em relação ao ReactJS, a tecnologia possibilita construir interfaces de usuário. Pode ser localizada no seguinte repositório e na sua documentação oficial.

Seguindo as recomendações de preparação do ambiente de desenvolvimento, é interessante instalar ou atualizar:

• Chocolatey (para instalação de ferramentas e dependências no Windows)
• NPM (gerenciador de pacotes do Node.js)
• Yarn (instalação de pacotes e dependências de códigos prontos para uso)
• Node.js (ambiente de execução Javascript server-side)

O que saber antes de começar?

Criando um novo projeto React pelo CLI

yarn create-react-app <nome_do_projeto>

Para executar a aplicação no servidor local pelo react-scripts

yarn dev   

Caso este projeta seja clonado, executar para baixar todas as dependências

yarn

Estrutura de pastas do projeto

• images: pasta que contém as imagens utilizadas no README
• public: contém arquivos estáticos que não são processados pelo webpack
• src: contém todos os componentes e arquivos de estilização da aplicação
• components: onde estão todos os componentes da aplicação
• styles: lida com os estilos globais da aplicação
• App.tsx: arquivo principal com os componentes em JSX que rodarão na aplicação.
• babel.config.js: configurações do babel, transpilador Javascript para o navegador
• webpack.config.js: configurações do webpack, empacotador de códigos Javascript
• package.json: arquivo criado pelo NPM com configurações relacionadas às dependências de desenvolvimento, de produção e scripts de inicialização.
• tsconfig.json: configurações do Typescript

Typescript

O TypeScript é um superset de tipagem para o JavaScript, podendo ser usado em componentes e objetos. Não é muito intuitivo mas em grandes proporções é um facilitador para não se perder no projeto por conta de tipagem.

Configurando o TypeScript em um projeto React do zero

yarn create-react-app <nome> --template typescript 

Configurando o TypeScript em um projeto React Native em andamento

yarn add typescript @types/react -D

Para o segundo caso, deve-se criar o seguinte arquivo de configuração tsconfig.json