Instalación de todo lo necesario para usar React

En este ejercicio prepararemos el proyecto, siguiendo los pasos:

Nivel 1

Ejercicio 2

1. Instalar Nodejs.

Para facilitar la creación del proyecto y gestión de paquetes, usaremos npm. Para poder utilizarlo tendremos que tener descargado Node.js en nuesto ordenador.

https://nodejs.org/en/download/

2. Instalar git.

Para poder ejecutar el comando del siguiente paso, debemos tener instalado git:

https://git-scm.com/

3. Instalar la plantilla de nuestro proyecto.

Clonamos un proyecto que nos servirá de plantilla para nuestros ejercicios:

git clone https://github.com/monteserin/react-template

4. Abrir el proyecto con el Visual Studio Code.

Verás que al ejecutar el comando anterior, se ha creado una carpeta con el nombre del proyecto.

Arrastamos el directorio recien creado al Visual Studio Code para abrir el proyecto con el editor.

Debemos descargar los módulos del proyecto, para ello, abrimos la terminal (atajo del teclado ctrl + ñ) → y ejecutamos el comando:

npm i

5. Comprender la estructura del proyecto creado.

Verás que se han creado varios archivos y directorios, es importante conocer la estructura del proyecto. A continuación se muestra información de cada parte:

• Carpeta node_modules → Aquí se guardan las dependencias del proyecto.

• Carpeta src → Esta carpeta contiene el código de la aplicación. Por defecto el componente principal se llama App.js. También habrá un index.js que se encargará de introducir el componente App en el <div> del index.html.

• package.json → En este archivo se definen las dependencias de npm. Puedes añadir más dependencias instalando los paquetes con el comando:

npm i nombre del paquete 

Cuando ejecutamos el comando:

npm i

Lo que estaremos haciendo será instalar todos los módulos referenciados en el package.json.

• .gitignore → Aquí se definirán los archivos o carpetas que queremos que git, no tenga en cuenta.

6. Arrancar el proyecto y visuarlo en el navegador.

npm start

Instalando la extensión de Visual Studio Code npm de egamma podremos ejecutar el comando anterior haciendo click en un botón.

Una vez ejecutado tendrás que ver el mensaje de éxito:

Si entramos en http://localhost:3000 podremos ver la aplicación: