ezakto code

Preparando el campo de batalla

Vamos a crear el directorio principal de nuestra aplicación, teniendo en cuenta que albergará archivos fuente y compilados, y posteriormente quizás archivos de servidor ;)

Creamos el todopoderoso index.html y los directorios css, js y react. Éste último contendrá los diferentes archivos javascript de la aplicación, que luego se compilarán en un único y comprimido archivo listo para servir. Dentro del directorio react, crearemos un directorio components y un archivo app.js que servirá como glue file, donde se inicializará toda la magia.

Creamos también un archivo style.css dentro de la carpeta css.

Opcional: Podemos crear también un directorio less, sass o stylus si vamos a usar preprocesadores css.

Finalmente, inicializaremos un package.json en el directorio raíz. Para ello, abrimos la consola, nos ubicamos en nuestro directorio, corremos npm init . y respondemos las preguntas como queramos.

Entonces, nuestra estructura de directorios lucirá así:

/
├── css/              
│   └── style.css
├── js/
├── react/
│   ├── components/
│   └── app.js
├── index.html
└── package.json

Ahora volvemos a la consola e instalamos las dependencias básicas para nuestro desarrollo con react. Utilizaremos Browserify para combinar nuestros módulos javascript. Para instalarlo:

npm install -g browserify

Luego, como dependencias locales, necestaremos React y para transpilar la sintaxis JSX automáticamente con browserify, reactify:

npm install --save-dev react reactify

Y con eso estamos listos para empezar!

• Índice
• Siguiente: Planeamiento y divisón lógica de componentes