Projeto final da disciplina de Arquitetura de Software - Demo jogo da velha em HTML + CSS + REACT
Tutorial: https://pt-br.reactjs.org/tutorial/tutorial.html
Danny Sullivan e Deisilani Nunes
O React é uma biblioteca JavaScript declarativa, eficiente e flexível para criar interfaces com o usuário.
Ele permite compor UIs complexas a partir de pequenos e isolados códigos chamados “componentes”.
possibilita aos desenvolvedores criarem aplicações web, tendo a facilidade de alterar elementos ou os dados exibidos, sem recarregar a página. Por exemplo, o número de likes de uma rede social pode aumentar ou diminuir sem a necessidade de realizar o refresh na página.
O React trabalha com o modelo de arquitetura mvc (model, view controller).
MODEL: classes que armazenam os dados manipulados pela aplicação e que têm a ver com o domínio do sistema em construção.
View: classes responsáveis pela apresentação da interface gráfica do sistema, incluindo janelas, botões, menus, barras de rolagem, etc.
controller: classes que tratam e interpretam eventos gerados por dispositivos de entrada, como mouse e teclado.
O diferencial do React é ser rápida, escalável e simples, podendo ser usada com outras bibliotecas ou frameworks de JavaScript, como o Angular JS.
Essa amplitude de funcionalidades e sua forma descomplicada de realizar processos são os responsáveis pela ferramenta ser tão buscada pelos programadores.
Props: Um componente recebe parâmetros, chamados props (abreviação de propriedades), e retorna uma hierarquia de elementos para exibir através do método render.
RENDER: o método render retorna uma descrição do que você deseja ver na tela. React recebe a descrição e exibe o resultado. Em particular, render retorna um elemento React, que é uma descrição simplificada do que renderizar.
Este exemplo é do clássico jogo da velha, onde ganha o jogador que primeiro fizer 3 pontos.
- Um jogador ganha ao preencher 3 campos que caem em uma linha horizontal, vertical ou diagonal.
- Os jogadores empatam se não houver mais movimentos possíveis (ou seja, todas os campos são reivindicados).
- Ao finalizar a partida, é anunciado um vencedor e o jogo pode ser reiniciado.
- Quando clicar no botão de reiniciar, é exibida uma caixa de diálogo perguntando ao usuário se ele tem certeza. Se clicar no "OK", reinicia a partida, se clicar em cancelar, a caixa de diálogo é fechada e o jogo atual é retomado.
- Quando o jogo termina, exibe uma caixa de diálogo indicando o vencedor ou o empate, juntamente com um botão de iniciar uma nova partida.
- clone https://github.com/Deisilani/Jogo-da-velha.git
- cd Jogo-da-velha
- npm install
- npm start
Licenciado nos termos da licença MIT.