Tag: GitHub

Publicado em

Como criar um app React sem configuração

Para aqueles que ainda não saber, o Facebook lançou uma ferramenta que promete reduzir toda complexidade envolvida em configurar um novo projeto React. O projeto disponibilizado no github e chamado de “Create React App”,, permite que os desenvolvedores criem suas aplicações React com apenas um comando.

Se você estiver bem no inglês, pode ler a postagem feita a um tempinho atras no blog oficial do React através deste link: https://reactjs.org/blog/2016/07/22/create-apps-with-no-configuration.html, caso seu inglês esteja enferrujado ou precisando de um prática, abaixo segue um resumo dos passos envolvidos.

Antes de mais nada, Node.js 4.x ou uma versão mais recente é necessária.

Primeiro, precisamos utilizar o npm para instalar a ferramenta globalmente na nossa máquina usando o comando:

npm install -g create-react-app

O comando acima instalará o Create React App na sua máquina, que permitirá criar um projeto utilizando o comando create-react-app seguido do nome do nosso projeto:

create-react-app hello-world

A estrutura abaixo é a gerada automáticamente na criação dos projetos

node_modules/
src/
.gitignore
README.md
favicon.ico
index.html
package.json

Ao abrir o package.json, iremos notar que há somente uma dependência de desenvolvimento chamada react-scripts e três scripts:

  • start: react-scripts start
  • build: react-scripts build
  • eject: react-scripts eject

O script start iniciará nossa aplicação com base nos componentes que estão no diretório src/.

Na criação, ele irá conter os seguintes arquivos:

App.css
App.js
index.css
index.js
logo.svg

Era isso, você já tem as coisas que precisa para executar seu projeto.

Gostaria de saber mais? Então acesse o git deste projeto, aprenda, pergunte e contribua.

Até mais

Fontes:

https://tableless.com.br/criando-sua-aplicacao-react-em-2-minutos/

https://reactjs.org/blog/2016/07/22/create-apps-with-no-configuration.html

https://github.com/facebook/create-react-app

Publicado em

JQuery está perdendo espaço para o JavaScript puro?

Seguindo diversas ocorrências nos últimos meses, podemos observar que o JavaScript puro tem tomado o espaço em aplicações, bibliotecas e frameworks que antes utilizam o JQuery. Ao final do ano passado, o Github removeu qualquer traço do JQuery do seu front-end enquanto o Bootstrap informou a retirada da biblioteca e colocou um pull request para fazer o mesmo tipo de adaptação.

Agora você pode estar se perguntando, será que o Jquery está chegando ao seu fim?

É claro que não, nem de perto. Sites e sistemas que utilizam extensivamente a biblioteca não vão sair trocando agora algo que está funcionando por outra coisa que também estaria funcionando se não houver nenhum ganho de performance ou produção em cima disso.

Então o que está acontecendo?

A resposta é simples, o JavaScript está evoluindo e funcionalidades que antes eram exclusivas do Jquery, ou ele tornava muito mais fácil através de suas funcionalidades e bibliotecas prontas agora se tonaram redundantes. Itens como:

  • A manipulação de classes pode ser alcaçada através do Element.classList.
  • As animações visuais podem ser criadas com CSS3.
  • Os AddEventListeners estão mais estáveis entre os navegadores
  • Chamadas AJAX ficaram mais simples com o método Fetch.

Caso você tenha interesse em saber mais sobre a possibilidade de remover o JQuery do seu código, talvez seja o momento de fazer uma analise para saber o quanto da biblioteca você usa, ou se você apenas a tem por estar acostumado com alguns métodos. Um site legal para olhar alternativas é o http://youmightnotneedjquery.com/

Por outro lado, lembre-se que diversas implementações novas do Ecmascript 6+ ainda não são 100% implementadas por todos navegadores. Então lembre-se de conferir se você pode usar o método no site https://caniuse.com/ e se você estiver bem no inglês e tem um tempo de sobra, leia esse artigo da Google sobre os workarounds que o JQuery fornece que precisarão ser implementados caso você não o utilize

Publicado em

Projeto Diablo.JS

Após navegar no mundo do código fonte para jogos, encontrei um projeto já abandonado a alguns anos chamado Diablo.js. Ele é um projeto simples que utiliza 1 arquivo HTML, 1 arquivo JS (não que isso seja bom) e diversasimagens para simular o jogo Diablo 2.

Como esse jogo consumiu muitas horas da minha vida, pensei em usa-lo como uma ferramenta para praticar programação e reviver o passado.Então fiz um fork dele e comecei a trabalhar em diversas alterações.

O objetivo do projeto é o seguinte:

  • “Atualizar” o código JavaScript para ES6.
  • Manter o projeto em um formato fácil de executar para outros que estão aprendendo a programar ou queira brincar com o código.
  • Melhorar o posicionamento e quantidade monstros e itens aleatórios.
  • Aumentar o mapa.
  • Permitir que o personagem morra.
  • Corrigir bug de colisão e barreiras físicas (paredes e objetos).
  • Permitir escolher outros personagens.
  • Adicionar ao menos 1 habilidade com o botão direito.

Não sei se tudo será possível, mas um objetivo fica difícil chegar a algum lugar.

Tendo dito isso, aqui vão algumas observações sobre o jogo para que você que está interessado em contribuir possa começar a fazer. Se você quiser fazer alterações, comentar cada classe e função trabalhada é muito importante!

Converter funções em classes

Já fiz isso para praticamente todas as classes, mas algumas ainda precisam ser ajustadas, as propriedades precisam ter nomes mais uteis que x, y e z.

Separar arquivos

Não é opção mais performática, mas para manter o código mais fácil de ler, seria interessante separar as classes e funcionalidades em arquivos diferentes.

Imortal

Esse aqui é o Diablo Imortal, o bárbaro não morre mesmo chegando a zero de vida.

Paredes

Além de ser possível “pisar” nas paredes, é possível atacar e ser atacado através delas

Piso e Limite do Mapa

Consegui adicionar paredes, objetos e piso indo para a diagonal esquerda, mas para o outro lado não tem força que renderize o chão.

Talvez seja possível resolver esse problema com paredes, mas tanto o jogador quanto os inimigos podem sair do limite do mapa. Dependendo, os inimigos começaram de fora do mapa.

Contador de ouro

Não que ele tenha utilidade na versão atual, mas seria legal saber quanto de ouro o personagem já coletou