reactjsmuperita

ReactJS mu Perita (VI). La primera aplicación React

Ejercicio: La primera aplicación React

En esta sección se va a crear la primera aplicación react. Para esta aplicación se va a utilizar la utilidad create-react-app que crea el esqueleto de una aplicación react. Este esqueleto podrá ser utilizado para modificarlo y dar forma a la aplicación que se quiera desarrollar.

Instalar create-react-app

instalar create react app

Bastará con ejecutar el siguiente comando:

sudo npm install -g create-react-app

o

sudo npm install -g create-react-app@1.5.2

El segundo comando sirve para instalar una versión concreta de create-react-app

Crear la estructura básica de una aplicación React

Bastará con ejecutar el comando:

sudo create-react-app confusion

Creará un esqueleto de una aplicación básica en React con el siguiente contenido:

esqueleto aplicación react

Instalar YARN

Yarn es una herramienta para gestionar paquetes de aplicaciones Node.js. Es fiable, rápido y seguro y por lo tanto es muy utilizado en Nodejs. Se puede instalar en Ubuntu de una forma sencilla y rápida.

Existen varios métodos para instalar Yarn pero uno muy directo sería instalarlo utilizando NPM. Para instalar Yarn utilizando NPM basta con ejecutar el siguiente comando. Para instalar Yarn de forma global y no solamente para el proyecto actual hay que utilizar el parámetro -g:

sudo npm install yarn -g

instalar yarn

Una vez ejecutado este comando, Yarn estará instalado correctamente.

Ejecutar la aplicación

Para ejecutar una aplicación basta con estar en el directorio donde se ubique la misma y ejecutar el comando:

npm start
o
yarn start

Una vez ejecutado el comando se abrirá el navegador por defecto y se ejecutará la aplicación:

Ejemplo aplicación react

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>