---
title: React with Webpack File Structure
localeTitle: Reaja com a estrutura de arquivos do Webpack
---
Agora é hora de configurar nossa estrutura de arquivos antes de escrevermos qualquer código.

Em primeiro lugar, vamos criar um novo arquivo chamado `.gitignore` :
```
touch .gitignore 
```

Este arquivo conterá uma lista de todos os arquivos e pastas que **não** serão incluídos quando enviarmos o nosso projeto para o GitHub. Existe um site que serve código clichê para arquivos `.gitignore` , o que é muito útil, porque muitas vezes, um arquivo `.gitignore` pode ser bastante longo e detalhado, e podemos esquecer alguns arquivos ou pastas que queremos que o Git ignore.

Vá para [https://www.gitignore.io/](https://www.gitignore.io/) e digite `Node` na barra de pesquisa e clique em `Generate` . Isto irá gerar um arquivo que se parece com isso:
```
# Created by https://www.gitignore.io/api/node 
 
 ### Node ### 
 # Logs 
 logs 
 *.log 
 npm-debug.log* 
 
 # Runtime data 
 pids 
 *.pid 
 *.seed 
 
 # Directory for instrumented libs generated by jscoverage/JSCover 
 lib-cov 
 
 # Coverage directory used by tools like istanbul 
 coverage 
 
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 
 .grunt 
 
 # node-waf configuration 
 .lock-wscript 
 
 # Compiled binary addons (http://nodejs.org/api/addons.html) 
 build/Release 
 
 # Dependency directories 
 node_modules 
 jspm_packages 
 
 # Optional npm cache directory 
 .npm 
 
 # Optional REPL history 
 .node_repl_history 
```

Agora podemos copiar e colar isso no nosso arquivo `.gitignore` .

Observe que o arquivo `.gitignore` deve sempre incluir `node_modules` . Isso é extremamente importante, porque não queremos incluir nossa pasta `node_modules` com nossos commits do Git, pois eles ocupam muito espaço em disco e podem ser instalados com o `npm install` , que se refere ao nosso `package.json` .

A maioria dos arquivos e pastas listados em nosso arquivo `.gitignore` ainda não existe em nosso projeto, mas se eles fizerem no futuro, eles não serão incluídos em nossos commits do Git, o que é importante e útil, porque devemos ser seletiva sobre o que nós cometemos.

Agora, precisamos criar uma nova pasta que contenha o conteúdo do nosso código de **desenvolvimento** . Vamos chamá-lo de `src` :
```
mkdir src 
```

Então, precisamos criar uma pasta que contenha arquivos que usamos para fins de **produção** . Vamos chamar esta pasta `dist` :
```
mkdir dist 
```

*   [Ajuda: Mais sobre as pastas `src` e `dist`](http://stackoverflow.com/questions/23730882/what-is-the-role-of-src-and-dist-folders/23731040#23731040)

Agora que instalamos nossos pacotes e criamos pastas `src` e `dist` vazias, nossa árvore ficará assim (não incluindo `.gitignore` , que é um arquivo oculto):
```
. 
 ├── dist 
 ├── node_modules 
 ├── package.json 
 ├── src 
 └── webpack.config.js 
```

Agora, podemos fazer uma nova pasta `js` que entra na nossa pasta `src` . Isto irá conter todo o nosso código React:
```
mkdir src/js 
```

Podemos ir em frente e criar um `client.js` vazio em nosso `src/js` . Este será o nosso arquivo principal React:
```
touch src/js/client.js 
```

Também precisamos de um `index.html` que **não deve** entrar em nossa pasta `src` , e sim em nossa pasta `dist` , porque ela é necessária para a **produção** de nosso aplicativo:
```
touch dist/index.html 
```

Então, agora, nossa árvore parece algo assim:
```
. 
 ├── dist 
 │   └── index.html 
 ├── node_modules 
 ├── package.json 
 ├── src 
 │   └── js 
 │       └── client.js 
 └── webpack.config.js 

```