estudo react

Prévia do material em texto

//CRIAR APP REACT
npx create-react-app NomeAPp
//iniciar app react navegador
NPM START
//INSTALAR ROTAS REACT
npm install react-router-dom 
//INSTALAR STYLED COMPONENTE
npm i styled-component
JSX NÃO É HTML, e ajuda a previnir ataques de injection.
JSX usa className
COMPONENTES
Permite dividir a aplicação em partes;
Os componentes renderizam JSX, assim como APP.js q é um componente.
Precisamos criar um arquivo de componente e importado onde precisamos utilizar.
NORMALMENTE ficam em uma posta chamada COMPONENTS;
PROPS
As props são valores passados para componentes;
Podemos deixa-los dinâmicos, ou seja, mudar a execução por conta do valor do props;
O valor é passado com um atributo na chamada do componente;
Props são somente de leitura;
É possível definir os tipos para as props (realizando um tipo de validação).
Definimos em um objetivo chamado PropTypes no próprio compoenente,.
Ainda é possível setar um valor padrão (defaultProps).
import { ReactPropTypes } from "react"
CSS NO REACT
PODE SER CONFIGURADO GLOBAL A PARTIR O ARQUIVO index.css
PODE ser configurado para cada componente, para tal é criado na pasta componentes um arquivo com “mesmo nome”+.module.css
No componente será necessário importar esse arquivo utilizando a sintaxe.
import styles from './Frase.module.css'
para usar bosta botar no classname o style ex:  <div className={styles.fraseContainer}>
Não aceita traços no nome do estilo, somente underline.
Fragmentos
Permite criação de um componente sem elemento PAI;
Proposito descomplicar os nós do Dom.
A Sintay é <> e </> não há um nome para a tag,
Criamos no próprio JSX.
Eventos
Os eventos de react são os mesmos dos DOM, ex: evento para responder a um click;
O evento é atrelado a uma tag q irá executá-lo.
Geralmente um método é atribuído ao evento, deve ser criado no componente.
useState
O useState é um Hook do react;
Com ele conseguimos manusear o estado de um componente de forma simples.
Este Hook funciona muito bem com eventos, podemos atrelar um evento para a mudança de state.
Metodospor props
Os métodos também pode ser passados por props;
Componente filho pode ativar o método do seu ancestral.
Vamos acessar o método por um evento.
Sintaxe é a mesma de props de dados. Props.meuEvento.
Renderização por condição
Podemos atrelar a exibição de algum elemento a um if;
Esta ação é chamada de renderização condicional;
Envolvemos tags em chaves{}, Como as chaves executam JS, criamos nossa condição;
É possível usar o state para criar condições.
RENDERIZAÇÃO DE LISTAS
Para renderizar uma lsita vamos primeiros precisar de um array;
Depois utilizadmos a função map., para percorrer cada um dos itens;
Podemos assim renderizar algo na tela;
É possível unir operadores condicionais com a renderização de listas.,
STATE LIFT
Técnica utilizada para compartilhar o state.
É normal vários componentes dependerem do mesmo estado.
Então precisamos elevar o nível do mesmo a um componente pai.
Então centralizamos o state no pai, definimos quem usa e quem define (setState)
REACT ROUTER
É um pacote para mudança de URL da aplicação;
Podemos assim acessar outras views, sem o page reload;
Trocando apenas uma parte do layout da aplicação, ou seja, oq muda de view pra view;
Precisamos instalar este pacote no projeto;
E tamb´´em realizar algumas mudanças em como o APP é estruturado.
RECT ICONS
É um pacote de ícones externo;
Precisamos adicionar ao projeto atráves do NPM;