Sesión 1

Primeros pasos

Una vez que tengamos instalado Node.js y create-react-app, el primero lo usaremos como servidor para comprobar el código y el segundo para crear las aplicación react.

Para la gestión y administración de dependencias usamos yarn.

Los comando básicoe de yarn son:

  • yarn init que crea un proyecto nuevo. Nos preguntará: el nombre de nuestro proyecto, versión, descripción, archivo inicial, repositorio, autor y el tipo de licencia de nuestro proyecto. Luego de esto se habrá creado nuestro archivo package.json

  • yarn add mediante este comando Yarn agrega una dependencia a nuestro proyecto. Ejemplo:

  • yarn upgrade que actualiza una dependencia.

  • yarn build ????

  • Más comandos.

Crear un proyecto nuevo.

Para crear un proyecto usamos en la terminal: create-react-app nombre-proyecto.

Esta ejecución creará una estructura de carpetas y documentos:

En node-modules se guardan todas las dependencias ppm del proyecto que vayamos necesitando. Create-react-app ya nos habrá instalado unas cuantas por defecto.

En public estará el archivo principal: index.html y el favicon: icono que aparecerá en la pestaña del navegador cuando despleguemos la aplicación. Habrá una etiqueta <div> dentro de index.html con un id "root" que nos indica dónde se va a introducir el componente principal (App.js) de nuestra aplicación.


En src encontraremos:

  • El componente principal del proyecto: App.js

  • indelx.js cuya función será introdicir el componente App en el <div> del index.html

  • Hojas de estili css: App.css e index.css

  • Una imagen (svg) del logo de React JS

  • Un archivo javascript llamado registerServiceWorker.js que es una API web que entre otra cosas ayuda a almacenar en caché sus activos y otros archivos para que cuando el usuario esté fuera de línea o en una red lenta, pueda ver los resultados en la pantalla.

  • package.json aquí encontramos las dependencias de npm que hayamos instalado en el proyecto, tanto para desarrollo como para producción



Una vez creado el proyecto usaremos yarn start para iniciar el proyecto (index.html) en el servidor local web creado: http://localhost:3000/