Aluno: Rodrigo Osvaldo Paim

Série: 3°7

1- Como vc define um componente funcional em React usando JSX?

Um componente funcional em React é uma função JavaScript que retorna JSX. Ele
aceita props como um argumento e retorna um elemento React.

2- como vc pode usar props para um componente em React?

Elas permitem que você passe dados de um componente pai para um componente
filho. As props são somente leitura, o que significa que um componente filho não deve
modificar os valores das props que recebe.

3- Explique a diferença entre state e props em React.

As props são passadas para um componente e são imutáveis dentro desse componente,
enquanto o state é mantido dentro de um componente e pode ser alterado. Ambos são usados
para controlar o que é renderizado em um componente do React.

4- Como você cria um estado local dentro de um componente funcional em React?

Para criar um estado local dentro de um componente funcional no React, você pode usar o
Hook useState. O Hook useState é uma função que permite adicionar o estado React a
componentes funcionais.

5- O que é JSX e por que é usado em React?

JSX é uma extensão da linguagem JavaScript que é usada pelo React para criar interfaces de
usuário. Ele permite que você misture código JavaScript com sintaxe de HTML, o que torna
mais fácil escrever componentes de interface de usuário em um único arquivo de código.

6- Como vc estiliza um componente em react usando CSS?

CSS Inline: Você pode usar a propriedade style em JSX para adicionar estilos CSS inline a um
elemento. Os estilos são escritos como um objeto JavaScript, onde as propriedades CSS são
escritas em camelCase.

Arquivo CSS Externo: Você pode criar um arquivo CSS externo e importá-lo para o seu
componente React.

CSS Modules: CSS Modules são uma maneira de usar arquivos CSS normais, mas com escopo
local por padrão. Isso significa que os estilos definidos em um arquivo só se aplicam ao
componente que importa esse arquivo.

Styled Components: Styled Components é uma biblioteca que permite escrever CSS real em
seus componentes. Ele gera classes CSS únicas para seus estilos.

7- Como vc lida com eventos em react?

No React, eventos são tratados de maneira similar aos eventos DOM tradicionais, mas com
algumas diferenças de sintaxe. Por exemplo, eventos em React são nomeados usando
camelCase, e você passa uma função como manipulador de eventos, em vez de um texto. Para
lidar com eventos, você pode definir uma função dentro do seu componente e passá-la como
propriedade para o elemento JSX desejado. É importante lembrar de vincular o contexto
correto ao usar funções de manipulação de eventos, especialmente se estiver usando a
palavra-chave `this` dentro da função.

8- Explique a diferença entre == e === em Javascript

Para o operador == compara por 'resultado'; Ele converte o que você quer comparar e verifica.
Ja o operador === compara o valor e o tipo, (você força comparar o tipo também) então só vai
ser true se for exatamente igual (valor e tipo).

9- O que é o ciclo de vida de um componente em react?

O Ciclo de vida de componentes funcionais no React é um conjunto de funções de ciclo de vida

que são automaticamente chamadas pelo React quando um componente é criado, atualizado
ou removido da página.

10- O que é o Hook useEffect em React e para que serve?

O useEffect é um hook do React que permite a execução de efeitos colaterais no seu código.
Esses efeitos colaterais podem incluir buscar dados de uma API, mudar a DOM ou configurar
uma subscription. Além disso, o useEffect fornece um mecanismo para limpar esses efeitos
colaterais, garantindo que todos os recursos ou assinaturas criadas durante o efeito sejam
finalizados corretamente e evitando vazamentos de memória.

11- Como vc lida com formulários em React?

Em React, os elementos de formulário como <input>, <textarea> e <select> são chamados de

“componentes controlados”. Eles mantêm seu próprio estado e atualizam com base na entrada
do usuário. Você pode criar um componente controlado vinculando o valor do elemento ao
estado do React.

12- O que é a propriedade key em React e por que é importante?

As chaves ajudam o React a identificar quais itens sofreram alterações, foram adicionados ou
removidos.

13- Como vc renderiza uma lista de elementos em React?

Para renderizar uma lista de elementos em React, utilize o método map() do JavaScript. Esse
método itera sobre um array de dados e retorna um novo array de elementos JSX. Cada
elemento da lista deve ter uma propriedade key única, que ajuda o React a identificar quais
itens mudaram, foram adicionados ou removidos.

14- O que é um componente de classes em React e como você define um?

Um componente de classe em React é uma forma tradicional de definir componentes que

gerenciam seu próprio estado e acessam métodos de ciclo de vida do React. Para criar um
componente de classe, você estende a classe React.Component e implementa o método
render, que retorna o JSX a ser renderizado. Dentro dessa classe, você pode inicializar o estado
no construtor e vincular métodos de evento, permitindo um controle mais detalhado sobre o
comportamento do componente. Os componentes de classe são úteis quando você precisa de
um estado interno ou quer aproveitar os métodos de ciclo de vida para operações como busca
de dados ou atualizações baseadas em mudanças de propriedades.

15- Como você adiciona roteamento em um aplicativo React usando a biblioteca React
router?

Para adicionar roteamento em um aplicativo React usando a biblioteca React Router, você deve
começar instalando o pacote via npm ou yarn com os comandos `npm install react-router-dom`
ou `yarn add react-router-dom`. Após a instalação, envolva seu aplicativo no componente
`BrowserRouter` e utilize o componente `Routes` para definir suas rotas, especificando o
caminho e o componente que será renderizado para cada rota com o componente `Route`.
Para navegação entre as rotas, use o componente `Link`, que permite a transição sem a
necessidade de recarregar a página.

16- Com base no que você aprendeu em nossas aulas fale sobre o React, elegendo uma
facilidade comparado ao método tradicional.

Bom, o React com certeza é uma forma bem mais eficiente de começar e produzir um projeto
sendo já compartilhada com outras plataformas, não só com sites que é geralmente proposto
pelo HTML. Além do mais, essa estrutura de linguagem é um pouco mais complexa por se
tratar de ser sua maior parte feita para javaScript, mas como HTML e CSS, acaba sendo bem
mais funcional do que o convencional. Portanto, o React apresentando muito mais
possibilidades e recursos disponíveis para se utilizar, sendo focada justamente para a criação de
interfaces de usuário.

17- Sobre o GitHub fale sobre seu entendimento dos temas “commit” e “branch”.

O commit é o comando utilizado para a enviar o código selecionado, sendo em arquivo ou

pasta, movendo para seu direcional, no caso um diretorio do GitHub. Já o Branch, é um
comando que serve para criar um local no diretório que será adicionado o código exportado.