React JS Fernando Alves
Criando projeto de REACT com vite
Requisitos: Node JS, npm package manager (Instalado junto com o node).
No terminal do VsCode digite:
Escolha o nome do projeto:
Digite ‘.’ para usar o mesmo nome da pasta do projeto:
Selecione o Framework a ser utilizado:
Selecione a variante:
Projeto criado, digite os dois comandos abaixo
para instalar e rodar o projeto, consecutivamente:
npm install para instalar as dependências do
projeto:
[Link] lfalvespe@[Link]
React JS Fernando Alves
Após terminar a instalação, rode o projeto:
Projeto iniciado, CTRL + click no endereço do servidor local (em azul) para visualizar no navegador.
Projeto aberto no navegador:
Estrutura:
[Link] lfalvespe@[Link]
React JS Fernando Alves
[Link]
Dentro do Body temos a div de id “root”, onde todo o conteúdo será renderizado. E a importação do script
[Link]
Aqui, geralmente alteramos apenas o título: <title>Meu App</title>
[Link]
Aqui temos a importação do [Link]
cujo conteúdo será renderizado dentro
da div de id ‘root’.
[Link]
Aqui é onde será criada, de fato a aplicação. Onde todo
o conteúdo será inserido. Geralmente o conteúdo será
componentizado para ser reutilizado, e importado no
[Link]
[Link] lfalvespe@[Link]
React JS Fernando Alves
Outras formas de criar a função do componente:
● Limpamos o conteúdo inicial do exemplo criado pelo vite para desenvolver a nossa aplicação do zero.
● React fragment <> </>
Por padrão, o react exige que o conteúdo seja envolvido num tag “mãe”. Ao invés de utilizar uma div,
podemos utilizar uma tag vazia, chamada de “React Fragment”
[Link] e [Link]
Geralmente limpamos os dois arquivos, de estilo global, [Link] e de estilo do App, [Link].
Pastas a serem criadas:
● components → Para colocar os componentes criados a fim de serem reutilizados na aplicação
● pages → Aqui serão criadas as páginas da aplicação.
● routes → Aqui serão colocados as rotas criadas.
Outras:
● hooks → Para colocar os hooks personalizados
● context → Aqui colocamos os contextos criados para compartilhar dados entre os componentes.
- Por padrão as pastas têm nomes com letras minúsculas e os componentes, iniciados com letra
maiuscula.
[Link] lfalvespe@[Link]