React
React
Aprendendo a usar React e suas aplicações web
O que é o react
O react é uma Biblioteca JavaScript declarativa eficiente e flexível para criar
interfaces com o usuário.
Utilizando componentes exemplo cada objeto inserido é um componente
Como renderizar uma página WEB - DOM
O que é o DOM
Quando uma página da web é carregada, o navegador cria uma hierarquia dos
objetos chamada de modelo de documento por objeto. Por isso a sigla
DOM.
Exemplo DOM
Como funciona o react
Como a gente sabe o react trabalha com componentes, no react os
componentes ficam em uma espécie também de hierarquia que ficam
interligados e cada componente tem a sua função. Esta estrutura que o react
chamamos de DOM virtual
Após computar essas modificações necessarias ele então renderiza o
DOM real do navegador somente com o que foi alterado. Dai, não
precisa carregar toda a pagina.
Expressões em jsx
Introduzindo jsx
Neste caso utiliza-se { }
Expressões em jsx
Você pode até chamar uma função, por exemplo aqui eu estou chamando a
função de formatar data e passo a uma data.
Para ser executado dentro desta função.
O JSX é uma expressão então depois de compilar as expressões JSX elas se
transformam em chamadas normais em Javascript.
Isso significa que a gente pode fazer algo assim por exemplo uma função que
tem um parâmetro ali eu posso usar no retorno.
Utilizando atributo jsx
O react trabalha com componentes, mas o que é de fato um componente.
O componente permite você dividir uma interface em partes independente, reutilizável e pensar cada
Parte isoladamente.
O que é um componente
Componente que permite você dividir a UI (interface do usuário) em partes
independente, reutilizável e pensar em cada parte isoladamente, exemplo:
Essa função recebe um objeto propriedade ,conforme o exemplo.
“propriedade.nome”
O que é um componente
Renderizando componentes
Compondo componentes
Criando componente dentro de outro componente
ALTERNATIVAS DE BIBLIOTECAS
Preparação do ambiente windows
Nodejs é um ambiente de execução para o Javascript
Exemplo
teste visual
studio code
Criando um projeto em react
➢Criar um projeto em react
➢Criar componentes
➢Utilizar JSX
➢Como passar propriedades aos componentes
➢Alterar o estado da aplicação
➢Manipular eventos
➢Alterar o estilo dos componentes
➢Instalar pacotes adicionais
Criando um projeto
Construindo seu primeiro projeto Vite
https://vitejs.dev/guide/ copiar o primeiro NPM
Quando é criado o projeto
Criar uma pasta escolher a área
para salvar
Abrir um novo terminal fazer as
seleções necessarias
Depois perceba que abrir uma
sub pasta exemplo projeto-base
Abrir a pasta de arquivo
Raiz do projeto
Instalando as
dependências
Quando você quiser rodar
um projeto sempre clicar
no package.json e utilizar
o npm run dev
O meu dev esta rodando no endereço 5173
Segurando a tecla Ctrl
+ clique ele abre o
navegador
Criando um script dentro APP.JSX
Na pasta main estou importando APP
Deletar o index.css
Aqui ocorre o renderizado
Criando uma pasta Titulo.jsx
Adicionando Import app.jsx
Tela1 Tela2 – alterando para return<Titulo/>
Executando
Se eu quiser que pareça mais que uma frase basta utilizar uma <div>
JSX mistura de HTML COM JAVASCRIPT
{} as chaves representa a interpolação entre HTML E JAVASCRIPT
Outro exemplo acrescentando soma
Colocando url
Acrescentando tamanho
PROPS – são atributos ou propriedades que você pode dar aos
seus componentes funciona somente como leitura
PROPS – são atributos ou propriedades que você pode dar aos seus componentes
Fazendo validação dando um nome curinga como se fosse um
if e else
Passando parametros fazer teste true ou false para
ver a diferença
Passando parametros
Adicionando cor
Adicionando cor
Estado
O estado é a memória de um componente, é uma espécie de variável que vai armazenar
Um valor e sempre que existir uma alteração no valor dessa variável a gente chama de estado.
Então, o React entende que ele precisa renderizar novamente aquele componente e é isto que faz
com que o react receba esse nome , que é reagir .
Exemplo
Colocando uma memória – utilizando useState
Colocando uma memória – utilizando useState
Colocando campo input
Colocando campo input
executando
Rotas navegar entre página- quando react foi criado a ideia era navegar em uma
única página
Instalar um biblioteca reacton é uma biblioteca que faz a manipulação de rotas
Pasta home
Sobre.jsx
Contato.jsx
Rota menu
Ao clicar na rota ela só nos direciona para pagina
Instalando a biblioteca
Importando a biblioteca
Exemplo de como criar a rota
Colcar o comando no terminal
Npm run dev
Para funcionar a pagina
