Ir para o conteúdo

Dojo em React

A divisão MDS da equipe, durante o segundo módulo da matéria de Métodos de Desenvolvimento de Software, apresentou um dojo para a turma sobre React e React Native, com uma parte prática refatorando um projeto feito em HTML, CSS e Javascript, utilizando a componentização do React em Typescript.

Desenvolvimento da apresentação

  • Montagem dos slides
    • Juan Mangueira
    • Thiago Vivan
  • Apresentação
    • Thiago Vivan
    • Marcus Martins
  • Criação do repositório, códigos e condução do dojo
    • Marcus Martins
  • Assistência durante a produção
    • Iago Matos
    • Igor Thiago
    • Thiago Vivan

Conceitos

Foram apresentados os conceitos de:

  • ReactJS
    • Uma biblioteca mantida pela Meta, Inc.
    • Focada em UI, assim construindo de forma simples e eficiente plataformas responsivas.
    • Usa de Single Page Application, sendo uma aplicação que roda em uma única página, trazendo a impressão de ser uma aplicação Web.
    • Possui linguagem declarativa, ou seja, baseada em programação funcional, lógica e restritiva.
      • O CSS é um exemplo de linguagem declarativa.
    • Baseada em componentes, então alterações afetam componentes específicos.
    • Reativa.
  • React Native
    • Possuindo os mesmos princípios do React, trouxe de forma nativa, seus elementos para aplicações Mobile.
    • Mas o que é ser Nativo?
      • As primitivas do React são renderizadas para a interface do usuário da plataforma nativa, ou seja, utiliza as mesmas APIs que outros aplicativos usam.
    • Sendo assim, é um framework multiplataforma, onde é possível manter as plataformas Android e iOS, a partir de uma tecnologia em comum.

Andamento do projeto

  • Primeiramente, passo-a-passo com a turma foi clonado, utilizando git clone, o seguinte repositório: https://github.com/marcusmartinsxx/Projeto-Calculadora-React.
    • Na branch main está o template do projeto que foi clonado e usado como base para os alunos produzirem.
    • Na branch dev está o resultado da calculadora pronta.
  • Os colegas utilizaram arquivos HTML e CSS pré-definidos, e adaptaram seus códigos aplicando as tecnologias do React e Typescript, encaixando no modelo de projeto intrínsseco destes.
  • A duração teve, aproximadamente, 1h30, e foi possível finalizar o projeto, apesar de complicações técnicas por parte das máquinas utilizadas pelos alunos, os problemas passíveis de resolução foram solucionados e a construção continuou.

Inicializando um projeto em TypeScript

  • Este projeto teve como objetivo ensinar conceitos básicos de React, tais como a componentização.

  • Para inicializar um projeto Typescript com React, no terminal se utiliza o comando:

npx create-react-app --template typescript nome-projeto --use-npm

  • Para assim utilizar o npm para gerenciar os pacotes e criar o app no template de Typescript.

Para começar um projeto

1) cd nome-projeto

2) npm start

  • Ao fazer isso, o terminal rodará um comando react-scripts start e o projeto será executado na URL localhost:3000.

Referências

Introdução ao React. React, 2022. Disponível em: https://pt-br.reactjs.org/tutorial/tutorial.html. Acesso em: 19, julho de 2022.

Programação Declarativa. Wikipedia, 2022. Disponível em: https://pt.wikipedia.org/wiki/Programa%C3%A7%C3%A3o_declarativa. Acesso em: 19, julho de 2022.