freeCodeCamp/guide/spanish/miscellaneous/react-with-webpack-file-structure/index.md

title, localeTitle

title	localeTitle
React with Webpack File Structure	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/ 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

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