unidad 6

En este ejercicio prepararemos el proyecto, siguiendo los pasos:

Nivel 1

Ejercicio 1

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/

unidad 6 1

2. Instalar git.

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

https://git-scm.com/
unidad 6 2

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

unidad 6 3

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.

Desplegaremos nuestro proyecto en un entorno local (localhost) ejecutando el comando:

npm start

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

unidad 6 4
unidad 6 5

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

unidad 6 6

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

unidad 6 7

Ejercicio 2

¡Enhorabuena! Ya tienes el proyecto funcionando. Ahora solo haremos pequeños cambios para jugar con React.

Como ya sabrás, una aplicación con React está compuesta de componentes, digamos que cada componente es una pieza del puzzle.

Puedes crear tantos componentes como quieras, y siempre que lo consideres necesario, puedes usar uno o varios componente dentro de otro.

Por ejemplo, si hiciéramos una landing page con react, dentro del componente principal (base de la web) podríamos importar el componente header, menú, formulario de contacto….

En este ejercicio, crearemos un comnponente y lo importaremos en el componente principal App.

1. Crear el archivo book.js.

2. Después copia este código y complétalo para que devuelva el texto “Viaje a la luna”:

export default () => 

Ahora haremos uso del componente Book en App.js. Completa el componente App.js:

import Book from './book';
export default () => {
    return (
        <div>
        </div>
    );
};

El resultado debe ser:

unidad 6 8

Nivel 2

Ejercicio 3

En lugar de harcodear (escribir directamente) el valor del componente en su interior, vamos a pasarselo como prop desde el componente App.

El resultado debería seguir siendo el mismo. Lo único que cambiará será la implementación del código.

Nivel 3

Ejercicio 4

Vamos a leer los libros que mostrará nuestra aplicación desde un fichero JSON. Para ello, importaremos dicho fichero en nuestra aplicación y lo recorreremos con una estructura .map.

Este es el JSON con el array de frases:

[
  {
    "title": "Viaje a la luna",
    "author": "Julio Verne"
  },
  {
    "title": "El médico",
    "author": "Noah Gordon"
  }
]

El resultado final sería algo así:

unidad 6 9

unidad 6 →

Aviso Legal | Política de privacidad