Tema: Introdução ao React

Tempo: 3h

Modelo: online

Mapa mental 👇

Quais são os softwares e/ou ferramentas necessárias para a aula?

• Visual Studio Code
• Node.js

• Introduzir os(as) alunos(as) ao React, apresentando o contexto histórico da web, a fim de compreender a razão pela qual o React foi desenvolvido;
• Explorar o conceito do React, seu funcionamento, os benefícios de utilizar esse framework e exemplos de empresas que o adotam;
• Abordar a existência de outros frameworks além do React, ampliando o entendimento sobre as opções disponíveis;

A apresentação será feita a partir de slides + momentos para codar e explicar cada linha de código.

• Revisão da aula passada (20 minutos)

  • Recapitular brevemente os conceitos e tópicos discutidos na aula anterior.
  • Permitir que os alunos esclareçam dúvidas ou revisem pontos importantes.

• Contexto histórico (20 minutos)

  • Apresentar uma breve contextualização histórica sobre o desenvolvimento da web.
  • Discutir as limitações e desafios enfrentados pelos desenvolvedores no passado.
  • Explicar como esses desafios levaram à necessidade de novas abordagens e tecnologias, como o React.

• O que é o React (20 minutos)

  • Apresentar o React como uma biblioteca JavaScript de código aberto para construção de interfaces de usuário.
  • Explicar os princípios básicos do React, como a composição de componentes e a manipulação eficiente do virtual DOM.

• Pausa (10 minutos)

• Recapitulação do conteúdo + espaço para dúvidas (10 minutos)

• Como funciona (60 minutos)

  • Explorar os principais conceitos do React, como componentes, props, estado e renderização condicional.
  • Demonstrar como o React permite a criação de interfaces interativas e responsivas.
  • Exemplificar a estrutura de um componente React e como ele se relaciona com outros componentes.

• Espaço para dúvidas (15 minutos)

• Empresas que utilizam o React + Outros frameworks (20 minutos)

  • Apresentar exemplos de empresas e projetos renomados que utilizam o React, destacando seus casos de sucesso.
  • Introduzir brevemente outros frameworks populares além do React, como Angular e Vue.js.

• Recapitulação e encerramento (5 minutos)

Os exercícios devem ser entregues no Classroom com o link do repositório do GitHub com a resolução do(s) exercício(s).

Exercício obrigatório: crie um componente React chamado HelloWorld e renderize a frase "Hello, world!".

Exercício opcional: crie um componente React chamado Counter. O componente Counter deve ser renderizado com o valor inicial como 0 e com dois botões: um para incrementar o contador e outro para decrementar. No método de incremento, atualize o estado count adicionando 1 ao valor atual. No método de decremento, atualize o estado count subtraindo 1 do valor atual. O layout e o comportamento do componente deve seguir a imagem abaixo:

Documentação do React: Learn React

Introdução ao React, mas de forma interativa: A gentle introduction to React, but visualized

Introdução ao React através do vídeo do canal Código Fonte: React JS // Dicionário do Programador - Canal Código Fonte