"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Crear una aplicación en React

La manera más sencilla de crear una aplicación en React es usar el paquete oficial que Facebook proporciona y que puedes encontrar en esta página.

Voy a tratar de resumir como usarla, aunque todo lo que os voy a contar esta tanto en su pagina de github que os deje arriba como en su guia oficial que es esta

En primer lugar tenemos que descargarnos globalmente el paquete con este comando

npm install -g create-react-app

Y después situarnos el directorio donde queremos crear nuestro proyecto y volver a escribir en la consola

create-react-app nombre-del-proyecto

Sin embargo si estamos usando una versión de npm igual o superior a la 5.5.2 tenemos la alternativa de usar npx, ¿para que te hagas una idea de para que sirve esto?

En este contexto sirve para ejecutar el comando sin necesidar de tener instalado localmente el paquete, tiene lógica para este tipo de paquetes que no usas habitualmente.

Para este caso concreto de arrancar un proyecto, es una dependencia que solo vas a usar una vez, ¿que sentido tiene hacer una instalación global para esto?, además si en el futuro necesitaras volver a crear un proyecto seguro que tu paquete global ya estará desactualizado y tendrías que hacerle un upgrade, así que tampoco te sirvió de nada tenerlo hasta entonces.

La herramienta npx es ideal para esto, al ejecutar a npx <command> cuando no encuentra <command> en el $PATH, instala el paquete desde el registro de npm y lo invoca. Con este método el paquete no pasará a formar parte de nuestros globales lo que es bueno para mantenerlo limpio de librerías innecesarias. (Lo mismo se puede aplicar con los generadores de Yeoman).

Hecho este inciso el comando recomendado para aquellos que tengamos una versión actualizada de npm es:

npx create-react-app nombre-del-proyecto

Al terminar todo este proceso nos vamos a encontrar con esta estructura en nuestro proyecto

nombre-del-proyecto
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

Con esto ya lo tendríamos creado, ahora solo tenemos que entrar dentro y arrancarlo.

cd nombre-del-proyecto
npm start

Y al final tendremos nuestra aplicación corriendo en el puerto 3000 con este aspecto…

Acabamos de ver que para levantar la aplicación hemos usado un comando de npm, vamos a ver cuales tenemos disponibles, están definidos en el package.json

Comandos

Dentro de scripts tenemos estos 4 comandos, que podemos invocar tanto con npm como con yarn, vamos a ver para que sirven:


  1. El comando npm start o yarn start sirve para arrancar la aplicación en modo desarrollo
  2. El comando npm build o yarn build crea la versión de producción dentro de la carpeta build
  3. El comando npm test o yarn test ejecuta un watcher que corre los test que apliquen a los ficheros afectados desde la última vez que se confirmaron cambios.
  4. El comando npm eject o yarn eject sirve para publicar en el proyecto toda la configuración por defecto y sus dependencias para que podamos alterarla.

Ya que hablamos del comando eject, al ejecutarlo la estrucura cambia, podemos ver dos carpetas nuevas, estas son config y scripts, en la primera podemos cambiar toda la configuración por defecto que tiene la app y en la segunda los scripts arriba mencionados (start, build y test).

Tambien podemos ver como el package.jsonha cambiado completamente, de las 16 lineas que tenía al principio ahora estará en cerca de 100.

Ahora muestra realmente cuales son todas las dependencias del proyecto, como por ejemplo webpack para hacer el empaquetado, jest para el testing o eslint para analizar el código.

Veamos un caso práctico de que podemos hacer…

Por ejemplo, si entramos en la carpeta scripts y vamos al fichero start.js, veremos esta linea para definir el puerto en que arranca el servidor de desarrollo…

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;

Si queremos cambiarlo podemos en ese mismo fichero definir arriba del todo esa variable de entorno poniendo algo así…

process.env.PORT = 1234;

Ahora la siguiente vez que levantes tu aplicación en desarrollo el puerto sería el 1234.

Aunque para este caso también serviría la modificar el comando directamente en el package.json, nos hacemos una idea de como el publicar la configuración nos permite tomar el control de todo nuestro proyecto.

Sin embargo si publicamos la configuración tenemos que tener en cuenta esta advertencia que nos dan sus creadores.

Si su proyecto necesita más personalización, puede expulsarlo y personalizarlo, pero luego tendrá que mantener esta configuración.

 

Componentes

Como indica la pantalla de inicio por defecto, el sitio para empezar a programar nuestros componentes es src/App.js, en el podemos encontrar un componente llamado App que por decirlo así nos sirve como el wrapper de nuestra aplicación.

Podemos tanto modificar ese componente como empezar a crear otros e importarlos dentro de este.

El archivo encargado de hacer el renderizado en nuestra página es src/index.js por si queremos modificar algo o renderizar en varios puntos.

Por defecto esta renderizando este componente App en un div con el identificador ‘root’, si quisieramos cambiar el nombre del identificador, moverlo o crear nuevos puntos donde renderizar el fichero html sobre el que se aplica esto es public/index.html.

 

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)