---
title: React with Webpack File Structure
localeTitle: Reaccionar con la estructura de archivos webpack
---
Ahora es el momento de configurar nuestra estructura de archivos antes de escribir cualquier código.

En primer lugar, vamos a crear un nuevo archivo llamado `.gitignore` :
```
touch .gitignore 
```

Este archivo contendrá una lista de todos los archivos y carpetas que **no** se incluirán cuando impulsemos nuestro proyecto a GitHub. Hay un sitio web que sirve código `.gitignore` para archivos `.gitignore` , que es muy útil, porque a menudo, un archivo `.gitignore` puede ser bastante largo y detallado, y podemos olvidar algunos archivos o carpetas que queremos que Git ignore.

Vaya a [https://www.gitignore.io/](https://www.gitignore.io/) y escriba `Node` en la barra de búsqueda, luego haga clic en `Generate` . Esto generará un archivo que se ve así:
```
# 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 
```

Ahora podemos copiarlo y pegarlo en nuestro archivo `.gitignore` .

Observe que el archivo `.gitignore` siempre debe incluir `node_modules` . Esto es extremadamente importante, porque no queremos incluir nuestra carpeta `node_modules` con nuestros confirmaciones de Git, ya que ocupan mucho espacio en el disco y se pueden instalar con `npm install` , que se refiere a nuestro `package.json` .

La mayoría de los archivos y carpetas enumerados en nuestro archivo `.gitignore` aún no existen en nuestro proyecto, pero si lo hacen en el futuro, no se incluirán en nuestros compromisos Git, lo cual es importante y útil, porque debemos Selectivo sobre lo que cometemos.

Ahora, necesitamos crear una nueva carpeta que contenga el contenido de nuestro código de **desarrollo** . Llamémoslo `src` :
```
mkdir src 
```

Luego, debemos crear una carpeta que contenga los archivos que usamos para fines de **producción** . Llamaremos a esta carpeta `dist` :
```
mkdir dist 
```

*   [Ayuda: Más acerca de las carpetas `src` y `dist`](http://stackoverflow.com/questions/23730882/what-is-the-role-of-src-and-dist-folders/23731040#23731040)

Ahora que hemos instalado nuestros paquetes y creado las carpetas `src` y `dist` vacías, nuestro árbol se verá así (sin incluir `.gitignore` , que es un archivo oculto):
```
. 
 ├── dist 
 ├── node_modules 
 ├── package.json 
 ├── src 
 └── webpack.config.js 
```

Ahora, podemos crear una nueva carpeta `js` que vaya a nuestra carpeta `src` . Esto contendrá todo nuestro código React:
```
mkdir src/js 
```

Podemos seguir adelante y crear un `client.js` vacío en nuestro `src/js` . Este será nuestro principal archivo React:
```
touch src/js/client.js 
```

También necesitamos un `index.html` que **no debe** ir a nuestra carpeta `src` , sino a nuestra carpeta `dist` , porque se requiere para la **producción** de nuestra aplicación:
```
touch dist/index.html 
```

Así que ahora, nuestro árbol se ve algo como esto:
```
. 
 ├── dist 
 │   └── index.html 
 ├── node_modules 
 ├── package.json 
 ├── src 
 │   └── js 
 │       └── client.js 
 └── webpack.config.js 

```