React Aula 06

Pastas Build
REACT
Aula 05 - Estruturas de
pastas,Package.json e Build
Package.json
NODE
MODULES
Estrutura de
README.MD
Este diretório contém
todas as dependências
do projeto, que são
pastas
instaladas por meio do
gerenciador de pacotes React
npm.
PACKAGE. JSON
PUBLIC/
Este arquivo contém as
informações do projeto, Este diretório contém
arquivos estáticos que
como nome, versão,
são acessíveis ao
dependências e scripts
público, como o arquivo
para executar tarefas de
HTML raiz, o favicon e
desenvolvimento e outras imagens.
produção.
SRC/: APP.TEST.JS
Estruturas Este diretório contém Este arquivo contém
todo o código-fonte do
de pastas
testes de unidade para o
aplicativo, incluindo componente App.js.
arquivos CSS, JavaScript
e outros recursos.
APP.CSS
INDEX.CSS
Este arquivo contém
Este arquivo contém
estilos específicos para o
estilos globais para todo
componente App.js.
o aplicativo.
APP.JS
Este arquivo é o
LOGO.SVG
componente principal do
aplicativo. Ele contém o Use gráficos visuais para
código JavaScript que é comunicar informações
executado quando o de forma mais eficaz.
componente é
renderizado.
Estruturas
de pastas
INDEX.JS
Este arquivo é o
ponto de entrada
para o aplicativo e
contém o código
JavaScript que
renderiza o
componente App.js
no DOM.
Exemplo:
A estrutura de arquivos do React
geralmente depende do projeto
específico que você está
trabalhando, mas em geral, ela
segue um padrão comum.
Professor,eu queria saber o que tem dentro da public

Estrutura de pasta
da public
A pasta "public" em um projeto
React é usada para armazenar
os arquivos estáticos que serão
servidos para o navegador do
usuário. Esses arquivos são
públicos, o que significa que
qualquer pessoa pode acessá-
los diretamente pelo URL.
index.html: Este é o ponto
de entrada do aplicativo
React. Ele contém uma tag
HTML <div> com um ID que
será usada pelo React para
renderizar o aplicativo.
favicon.ico: Este é o ícone
que aparece na guia do
navegador.
manifest.json: Este arquivo é
usado para fornecer
informações sobre o
aplicativo, como o nome, a
descrição, as cores de tema,
entre outras informações.
Robots.txt: Este arquivo é
usado para especificar as
regras que os robôs de
pesquisa devem seguir ao
rastrear o aplicativo.
Qualquer outro arquivo de
recursos estáticos, como
imagens, fontes, CSS,
JavaScript, entre outros, que
serão utilizados pelo
aplicativo React.
Professor e esses arquivos com

nome de logo?
Os arquivos "logo192.png" e "logo512.png" são imagens usadas como ícones de
aplicativo progressivo (PWA) em um projeto React.
O ícone "logo192.png" é uma imagem com resolução de 192x192 pixels que é exibida
quando o aplicativo é adicionado à tela inicial de um dispositivo móvel. Já o ícone
"logo512.png" é uma imagem com resolução de 512x512 pixels que é usada em vários
locais, incluindo a página de instalação do aplicativo e o menu de configurações do
sistema.
Essas imagens são importantes para a experiência do usuário, pois ajudam a identificar
rapidamente o aplicativo na tela inicial e fornecem uma sensação de consistência visual
com o aplicativo.
Além disso, as imagens também podem influenciar no desempenho do aplicativo, pois,
se as imagens forem muito grandes, elas podem aumentar o tempo de carregamento do
aplicativo e torná-lo mais lento.
Por isso, é importante escolher imagens com um tamanho e resolução apropriados para
cada caso. É recomendado usar formatos de imagem mais leves, como o PNG, para
reduzir o tamanho do arquivo e, consequentemente, o tempo de carregamento. O uso
de ferramentas de compressão de imagens, como o TinyPNG, pode ajudar a reduzir
ainda mais o tamanho do arquivo, sem perda significativa de qualidade.
Package.json
Package.json
O arquivo package.json é um arquivo
importante em um projeto Node.js
que contém informações sobre o
projeto, como nome, versão,
dependências e scripts para executar
tarefas de desenvolvimento e
produção.
Package.json
name: O nome do projeto. Deve ser único e
pode conter letras, números, hifens e
underscores.
version: A versão atual do projeto.
description: Uma breve descrição do projeto.
main: O arquivo JavaScript principal do
projeto que será executado quando o
módulo for importado.
scripts: Uma lista de comandos
personalizados que podem ser executados a
partir do terminal usando npm run. Por
exemplo, você pode definir um script para
executar o servidor local: "start": "node
server.js"
Package.json
keywords: Uma lista de palavras-chave que
ajudam a descrever o projeto e facilitam a busca.
author: O nome do autor ou organização que
criou o projeto.
license: A licença que se aplica ao projeto.
dependencies: Uma lista de pacotes que o projeto
depende para funcionar corretamente em
produção. Eles serão instalados quando você
executar o comando npm install.
devDependencies: Uma lista de pacotes que o
projeto depende apenas para o desenvolvimento e
testes. Eles serão instalados quando você
executar o comando npm install com a opção --
dev
Build
Uma "build" é o processo de compilar o código
fonte de um projeto de software em um
conjunto de arquivos que podem ser executados
ou implantados em um ambiente de produção.
Durante a construção, o código-fonte é
transformado em uma forma que é mais
adequada para execução ou implantação,
tornando o software mais eficiente, rápido e
escalável.
Execute o comando npm run build para iniciar o processo de construção.
O QUE ACONTECE NO PROCESSO DE BUILD?
C O M P IL A Ç Ã O DO C Ó DI G O F O NT E EM LI NG UA G EM D E M Á Q UI NA OU E M UM A
L IN G UA G E M I NT ER P R ET A D A .
C O N C A T E N A Ç Ã O E M I NI M I ZA Ç Ã O D E A R Q UI V O S D E SC R I P T E E S TI L O E M UM
Ú N I C O A R Q U IV O P A R A M EL H O R A R O D ES EM PENH O DE C A R R E G A M E NTO.
G E R A Ç Ã O D E A R Q U I V O S D E C O NF I G UR A Ç Ã O , C O M O A R Q UI V OS D E
P R O P R I E D A D ES O U A R Q U I V O S X M L, PA R A US O EM A M BI E NTE S D E P R OD UÇ Ã O.
C O M P R E S S Ã O DE A R Q U I V OS D E I M A G EM E V Í D EO PA R A TOR NA R O
A P L IC A T I V O M A I S L EV E.
E X E C UÇ Ã O DE T ES T ES A U TO M A T I ZA D O S PA R A G A R A NTI R A Q UA L I D A D E D O
C Ó D IG O .
E M P A C O T A M ENT O DE A R Q UI V O S EM UM A R Q UI V O ZI P OU E M OUTR O
F O R M A T O P A R A I M P L A NT A Ç Ã O EM S ER V I D O R ES D E PR OD UÇ Ã O.
Github Pages
Para subir o resultado da build do React no GitHub Pages, siga os seguintes passos:
No terminal, navegue até a pasta do seu projeto e execute o seguinte comando para instalar a
dependência "gh-pages":
npm install gh-pages --save-dev

Adicione o seguinte script ao arquivo "package.json" do seu projeto, logo após a chave
"scripts":
"deploy": "npm run build && gh-pages -d build"
Este script irá construir o aplicativo e enviar o conteúdo da pasta "build" para a branch "gh-
pages" do seu repositório.
Github Pages
No terminal, execute o comando abaixo para fazer o deploy do seu aplicativo:
npm run deploy
Acesse as configurações do seu repositório no GitHub, role a página até a seção "GitHub
Pages" e selecione a branch "gh-pages" como fonte.
Aguarde alguns minutos para que o seu aplicativo seja publicado no GitHub Pages.
Você poderá acessá-lo através do link gerado na seção "GitHub Pages" das configurações do
seu repositório.
:)

React Aula 06

Enviado por

Direitos autorais:

Formatos disponíveis

React Aula 06

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

React Aula 06

Enviado por

Direitos autorais:

Formatos disponíveis

Pastas Build

Professor,eu queria saber o que tem dentro da public

Professor e esses arquivos com

npm install gh-pages --save-dev

Você também pode gostar