Tema: Introdução ao React
Tempo: 3h
Modelo: online
Mapa mental 👇
![planejamento-de-aula](https://private-user-images.githubusercontent.com/20157546/245968936-fd6ac167-3b7b-47c9-9b8e-fa7f585b90de.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ4OTgyMjUsIm5iZiI6MTcyNDg5NzkyNSwicGF0aCI6Ii8yMDE1NzU0Ni8yNDU5Njg5MzYtZmQ2YWMxNjctM2I3Yi00N2M5LTliOGUtZmE3ZjU4NWI5MGRlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI5VDAyMTg0NVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE0MDhhZjExOTBkOGExMjZlYmNkYWRkMzg1MDZmNWM0N2EyN2U5ZTM1ZjVhZmJmYzA4NWY2YTljNzRmYzRhZjUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Husry9UoyWcZXjL5UFSr0v07PYRv1D50rHjwfkcl5VM)
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