El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Desarrolladores: Trucos semanales

Conoce y usa CLI’s Angular y React

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende los mejores trucos y tips, y descubre los conceptos básicos indispensable para todo desarrollador web, independientemente de tu experiencia. Si ya llevas desarrollando por años o si vienes del mundo del diseño y jamás has tocado una sola línea de código, todo lo que aprenderás con esta serie semanal de trucos serán una gran adición a tu actividad profesional y apuntalará tus habilidades como programador o desarrollador. Descubre desde increíbles consejos para que puedas tratar con tu cliente y saber cómo cobrar adecuadamente, hasta cuestiones técnicas claves para organizar y gestionar mejor tu tiempo y proyectos desarrollando.
07:29
  Añadir a marcadores

Transcripción

CLI significa Command-Line Interface o Interfaz de línea de comandos y es una forma de poder realizar acciones comunes y rápidas con solo ejecutar un comando en la terminal. La idea de este tipo de aplicaciones nace a partir de la necesidad de optimizar tiempo con procesos que pueden ser fácilmente automatizados y programados. Angular 2 y React dos herramientas para generar aplicaciones e interfaces web poseen ya sus propias CLI. Ambas están basadas en NPM, que es el administrador de paquetes de Node.js, y bastará con ejecutar el comando npm install, y el nombre de cada una de estas librerías para que podamos tenerlas disponibles en nuestro sistema operativo; y así poder generar aplicaciones rápido sin necesidad de descargar librerías ni realizar configuraciones adicionales. Increíble, ¿cierto? Ese tipo de herramientas no son exclusivas de Angular o React. En teoría, nosotros podemos generar nuestros propio CLIP para automatizar y configurar nuestras tareas o tareas de cierto framework que estemos usando. Sin duda, automatizar procesos como se hace con los CLIP es bastante bien visto, pues, además, nos ayudan a seguir buenas prácticas y guías de estilo como las de John Papa para Angular 1 y 2. Veamos cómo instalar y comenzar a usar estas CLIP. El CLI de Angular podemos encontrarlo en el sitio web: cli.angular.io. Aquí, tendremos una guía muy detallada de cómo podemos utilizar Angular CLI. Para poder instalarlo, necesitamos ejecutar el comando npm install -g —de global— angular-cli. Entonces vamos a ejecutarlo en nuestra línea de comandos: npm install -g angular-cli. En este caso, escribimos erróneamente la palabra angular, así que vamos a corregirlo, angular-cli ¡Listo! Y con esto comienza a hacer la descarga. Mientras hace el proceso de descarga y de instalación el CLI de Angular, vamos a revisar en dónde se encuentra también el CLI de React. El CLI de React se encuentra dentro del sitio del facebook.github.io. Y allí tendremos que acceder a las sección de Búsqueda y colocar la expresión "Create Apps with No configuration" para que nos envíe al post donde podemos tener el artículo, donde podemos trabajar y generar una aplicación con esto. De cualquier manera, este CLI tiene su GitHub, y en este GitHub te explican cómo funciona completamente esta opción para poder crear una aplicación con React. De cualquier forma, aquí también viene el proceso de instalación, el cual es muy similar al de Angular, donde solamente hay que ejecutar npm install -g create-react-app. Vamos a nuestra línea de comandos y vemos que aún sigue trabajando en la parte de Angular, así que vamos a esperar un poco en lo que eso termina. No te preocupes si esto lleva algo de tiempo, a veces puede variar por la conexión de internet. ¡Listo! Esto ha terminado. Así que vamos a aprovechar y descarguemos de una vez, también la opción de React. Esta fue muchísimo más rápida que trabajar con la de Angular. Así que, vamos a revisar rápidamente los comandos que existen fácilmente para trabajar con Angular. Como vemos, tenemos un método llamado ng new, ng new me va a permitir crear una nueva aplicación, así que vamos a ver qué tal funciona. Vamos a poner "ng new myAngularApp", damos Enter, y esto debe de comenzar a crear una aplicación. De hecho, si te das cuenta, crea todos los elementos que necesita una aplicación de Angular 2, donde tenemos componentes, donde tenemos módulos, donde tenemos todo separado de tal forma y con las librerías y elementos necesarios para correr una aplicación con Angular 2. De igual manera, esto descarga muchos datos de una plantilla, entonces, en ciertas situaciones, puede llegar a tomar algo de tiempo. No te preocupes, eso suele suceder de manera normal. Mientras esto termina de instalar, vamos a revisar rápidamente qué comandos hay disponibles. En este caso, podemos acudir a CLI COMMANDS, y aquí tenemos un documento en PDF, donde podemos ver todos los comandos que tú puedes ejecutar, como ng init, ng completion, ng doc, ng e2e, ng format, ng generate, etc. Y así existen muchos tipos de métodos que podemos utilizar, el más común para utilizar será ng generate. Hay algunos que tienen un alias, es decir, no tienes que escribir: ng espacio generate completamente, simplemente tendrás que decir ng espacio g y lo que necesites crear. En este caso, por ejemplo, podemos crear un componente, una directiva o una ruta. Así que, el siguiente comando que podríamos ejecutar es ng generate component, y esto obviamente me va a ejecutar todo el código necesario para que pueda crear mi componente, y lo único que tendría que poner es un nombre. Por ejemplo, aquí que ya terminó de descargar la aplicación, me voy a pasar a la carpeta que se creó, solamente recordemos el nombre que le pusimos a nuestro aplicativo que se llama myAngularApp. Así que vamos a cambiarnos, y vamos a escribir aquí: "myAngularApp", y listo; vamos a ver qué tenemos aquí adentro. Vamos a escribir ahora sí: ng generate component, y vamos a escribir un componente que se llame hola. Así también, esto comienza a generar todo el componente, y vemos qué hace, me creó un componente dentro de la carpeta SRC/APP, y dentro me creó un componente llamado hola, donde tenemos un css, un html, tenemos el archivo de pruebas y tenemos el archivo de JavaScript. De esta forma, ya tenemos todos los elementos para comenzar a trabajar y seguir creando todos los componentes. Y, lo mejor de todo, es que no tenemos que estar creando todos estos archivos de una manera manual, aunque, bueno, este es un proceso manual, pero lo dejamos automatizado a través del CLIP. De la misma forma, podemos trabajar cuando tenemos React. En este caso, si quiero crear una aplicación en React, simplemente voy a escribir en la línea de comandos: create-react-app, y el nombre de la aplicación. Vamos a ponerle a esta Hello-World, pero vamos a procurar salirnos para no cruzar ningún componente aquí, y vamos a dar Enter. Esto, igual, descarga una plantilla, comienza a trabajar; y mientras lo hace, veamos que también tenemos varios componentes. Al igual, podemos levantar un servidor y podemos comenzar a trabajar. Cuando nosotros ejecutamos npm install, nuestro servidor se levanta. Y aquí también, esto es interesante, con React, conforme vamos escribiendo código y lo vamos compilando, me va arrojando espacios donde se encuentran los errores. Es decir, es muy sencillo encontrar un error cuando estoy trabajando con este tipo de herramientas. También cuando termino, puedo ejecutar un npm run build, es decir, un empaquetado completo de solo el código que se va a necesitar estático para poder ejecutar en un servidor. Entonces, si tú estás trabajando con alguna tecnología como GitHub Pages, donde solamente acepta páginas estáticas, puedes correr aquí esta opción de run build. Lo que te recomiendo es que revises de ambas plataformas cuáles son los métodos disponibles, y así puedas sacarle el mejor provecho. De esta forma, puedes comenzar a construir aplicaciones web con Angular 2 y con React de una manera muy rápida.