Criando um projeto

Nesse curso utilizaremos React puro para criar os projetos, porém você pode utilizar bibliotecas melhores e mais rápidas para esse proposito, como o Vite.

1. Criar o Projeto

Para criar o projeto, podemos executar o seguinte comando:

npx create-react-app nome-app --template typescript

Com isso, os seguintes arquivos serão criados automaticamente:

2. Entendendo a estrutura

• node_modules: Armazena as dependências do projeto

• public: Contém os arquivos públicos. Na maior parte das vezes, essa pasta não precisará de modificações.

• src: Contém o código-fonte da aplicação

• package.json: Contém as informações sobre o projeto e suas dependências

A pasta src, por padrão, vem com arquivos desnecessários. Por isso, podemos manter apenas o App.css, App.tsx e index.tsx. A seguir, apresentaremos remoções que podem ser feitas nesses arquivos que mantivemos, mostrando o que deve ser mantido:

src/index.tsx

import React from 'react';  
import ReactDOM from 'react-dom/client';  
import App from './App';  

const root = ReactDOM.createRoot(  
  document.getElementById('root') as HTMLElement  
);  
root.render(  
  <React.StrictMode>  
    <App />  
  </React.StrictMode>  
);

src/App.tsx

import React from 'react';  
import './App.css';  

function App() {  
  return (  
    <div className="App">  
    </div>  
  );  
}  

export default App;

3. Desenvolvimento

Principais comandos que serão utilizados durante o desenvolvimento:

npm start  
    Inicia o servidor de desenvolvimento  

npm run build  
    Gera os arquivos estáticos otimizados do aplicativo para produção.

npm test  
     executa os testes automatizados do projeto.

npm run eject  
   Remove a ferramenta de build padrão e copia as dependências, 
   arquivos de configuração e scripts para o diretório do aplicativo.
   Após isso, você ganha controle total sobre a configuração, 
   mas não pode reverter o processo.

obs: Não se esqueça de rodar os comandos no terminal no recém criado diretório

A partir de agora, vamos começar a colocar a mão na massa...