Basico

Question 1

operador ternario no jsx

Answer 1

<h1>
{ x == 1? (
  <p>caiu no if</p>
): (
  <p>caiu no else</p>
)}
<h1>

Question 2

props

Answer 2

permite passar dados do componente pai para o filho.
Ficam disponivel no componente filho a partir do objeto prop.nomeDoCampo

Question 3

passando props para o componente

Answer 3

<Componente nomeDaProps="valorDaProps" />

Question 4

recebendo a props no componente

Answer 4

const NomeComponente = (props) =>{
  return (
     <h1>{props.nomeDaProps?</h1>
   )
}

export default NomeComponente;

Question 5

maneira moderna de receber um props no componente, fazendo destructing

Answer 5

cont NomeComponente = ({nomeDaProps1,nomeDaProps2}) =>{
  return (
     <h1>{nomeDaProps1}</h1>
     <h1>{nomeDaProps2}</h1>
   )
}

export default NomeComponente;

Question 6

Loop em listas no jsx

Answer 6

~~~
usa-se o maps.
listaArray.maps(x =>(//como vou imprimir jsx aqui precisa ser parentesis
<componentes nome={x.nome} />
))
```

Question 7

fragments

Answer 7

Interessantes quando precisamos ter mais de um elemento pai;
Ele é uma tag vazia <></>

Question 8

Enviando o Children Prop

Answer 8

Recurso utilizado para qundo um componente precisar ter JSX dentro dele;
<componente>
	<h1>Children Prop</h1>
</componente>

Question 9

Recendo o Children Prop

Answer 9

const NomeComponente = ({children}) =>{
  return (
     {children}
   )
}

Question 10

Enviar funções como props

Answer 10

<Componente nomeFuncao={funcao} />

Question 11

receber funcao como props e executar

Answer 11

const Componente = ({funcao}) =>{
  return (
     <button onClick={funcao} >Clique</button>
   )
}

Question 12

Elevacao de state ou State lift

Answer 12

Enviar dados do filho para o pai através de uma função passada como props para o filho. E essa funcao no filho recebe um valor e altera o estado de alguma variavel do componenente pai

Question 13

Hooks

Answer 13

funcoes do react que dão acessos ao estado da aplicação e outros dispositivos do react.
Começam com "use" exemplo: useState(), utilizado para criar estados

Question 14

Hooks

Answer 14

Os Hooks são mais restritivos do que outras funções. Você só pode chamar Hooks no topo de seus componentes

Question 15

hook useState

Answer 15

gerenciamento de estado da aplicacao

Question 16

hook useState

Answer 16

const [nome,setNome] = useState("Herlessi");
setNome("Herlessi Nogueira");
console.log(nome);//imprime herlessi nogueira

Question 17

previous State

Answer 17

estaudar mais sobre isso

Question 18

css de componente

Answer 18

não é scoped, ou seja, ele vaza para outros componentes, o ideal é criar classes de css com o nome do componente como prefixo

Question 19

css de componente

Answer 19

Por padrão criamos um arquivo .css como o mesmo nome do componente e o importamos no componente

Question 20

css inline por meio de um objeto

Answer 20

<div style={{color:red,background-color:blue}}>texto</div>

Question 21

css inline dinamico

Answer 21

~~~
<div style={n>1?{color:red}:{color:blue}}}>texto</div>```

Question 22

classes de css dinamicas

Answer 22

<div className={n>1?"classe1":"classe2"}>texto</div>

Question 23

Css Modules (Css Scoped)

Answer 23

Nome do arquivo .css deve ser NomeComponente.module.css

Question 24

Para usar o css modules(CSS Scoped)

Answer 24

importa-se como objeto e aplica-se como objeto;

import Style from './componente.module.css'

<div className={Style.nomeClasse}>texto</div>

ele gera um id maluco para a classe, para ser unico

Question 25

Hook useState()

Answer 25

Usamos para gerenciar estado da aplicação para facilitar a comunicação entre componentes pai e filho, filho e pai e entre irmãos

Question 26

Hook useState

Answer 26

Importamos do react com destructing.
Import {useState} from React.

Let [nome, setNome] =useState("tim")

Question 27

Hook useEffect(()=>{}, [])

Answer 27

Usamos para controlar os side effect, efeitos colaterais.

Em outras palavras, usamos para garantir a redenrização inicial da página como tbm controlar a atualização de página bloqueando e liberando a redenrizacao da página de acordo com o segundo parâmetro passado

Question 28

Hooks

Answer 28

São utilizados somente em componente funcionais.
Não funcionam em componentes de classes

Question 29

Hook

Answer 29

Em inglês quer dizer gancho, anzol, na programação são trechos de códigos incorporados

Question 30

Principais hooks

Answer 30

UseState, useEffect e useContext

Question 31

Estado em componente de classe

Answer 31

Se usa o objeto state.
State={nome:tim}

E para alterar setState({nome:Nogueira})

Question 32

Imagens publicas

Answer 32

basta colocar a imagem na pasta public e ser adicionada na tag <img src='/nomeImagem.jpg' />

Question 33

Imagens em assets

Answer 33

Diferente das imagens publicas, colocamos na pasta assets e precisamos importar a imagem como se fosse um componente 

import nomeImg from './assets/nomeIms.jpg';

<img src={nomeImg} />

Question 34

Componente Padrão

Answer 34

import './comp.css'

const comp = () =>{
  return (
    <h1>Titulo</h1>
  )
}

export default comp;