Objetivos

1. Apresentar os arquivos e pastas iniciais do projeto javascript criado pelo vitejs
2. Apresentar os conceitos de componentes, JSX, estado e propriedades do React

Sumário

• Estrutura do projeto javascript (js) inicial
• Brincando com o código para entender conceitos de componentes, estado e propriedades

Estrutura do projeto javascript (js) inicial

• public - Arquivos estáticos públicos
• src - Códigos-fonte do projeto
• .eslintrs.cjs - analizador de código-fonte
• .git - guarda todas as mudanças da pasta
• .gitignore - arquivo com lista de arquivos e pastas a serem ignorados pelo repositório
• index.html - arquivo html base do aplicativo web
• LICENSE - arquivo com a licença do projeto
• package.json - arquivo com definições do projeto js
• README.md - arquivo markdown que mostra informações iniciais no repositório remoto
• tsconfig.json - arquivo de configuração para traduzir de js para ts
• tsconfig.node.json - configuração de execução do ts com o vitejs
• vite.config.ts - arquivo de configuração do vitejs

Brincando com o código para entender conceitos de componentes, estado e propriedades

as modificações serão realizadas sempre no arquivo /src/App.tsx

Passo 1. Baixar o código-fonte, acessar pasta do projeto, instalar bibliotecas e executar aplicação web

Passo 2. Criar componentes React

Passo 3. Usar os componentes react na aplicação

Passo 4. Usar propriedades para personalizar componentes react

Passo 5. Definir valores padrão em propriedades de um componente react

Passo 6. Definir estado do componente

Passo 7. Publicando as mudanças

Referência

Quick start - React