> For the complete documentation index, see [llms.txt](https://uclsanca.gitbook.io/learn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uclsanca.gitbook.io/learn/web-avancado/reactjs/criando-um-projeto.md).

# Criando um projeto

{% hint style="info" %}
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.
{% endhint %}

#### 1. Criar o Projeto

Para criar o projeto, podemos executar o seguinte comando:

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

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

<figure><img src="https://552011742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEJ_IxNzk9of-u9NQeq%2Fuploads%2F3BXnvaXZS3i6EQBZJNrl%2Fimage.png?alt=media&amp;token=9c4e189f-a6d7-45ff-9aa4-dc4d31ab7d76" alt=""><figcaption></figcaption></figure>

#### 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

```jsx
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

```jsx
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:

```jsx
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...