React.js

Enviado por

jose.silva690000

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

7 visualizações

React.js

Enviado por

jose.silva690000

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 55

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