Ingeniería de Software I

1. Instalar yarn, que es mucho más rápido que npm

[pic 3]

1. Verifica la versión del yarn instalado

[pic 4]

1. El proyecto lo dividiremos en dos partes: cliente (react) y servidor (nodeJs, express y mongoDB). Crea una carpeta que contendrá todo el desarrollo.

[pic 5]

1. Agrega el paquete de react

[pic 6]

1. Desinstalamos el react instalado con npm

[pic 7]

1. Navegas hasta la carpeta creada y creas el proyecto para implementar la parte del front end

[pic 8]

1. Muy posiblemente te indique que se debe de instalar el paquete de react, aceptas.

[pic 9]

1. Dentro de la carpeta del proyecto recién creado con react, lanzas el comando yarn

Esto ayudará a resolver problemas de versiones de dependencias dentro del proyecto.

[pic 10]

1. Corremos el proyecto en el navegador, para esto ejecutamos el comando:

[pic 11]

1. Abres el proyecto en el navegador

[pic 12]

1. En el package.json cambia el script de start por dev

[pic 13]

1. Intentas ejecutar el proyecto con el comando: yarn dev y visualizas la salida en el navegador

[pic 14]

1. Instalas sass en el proyecto

[pic 15]

1. Eliminas el archivo App.css

[pic 16]

1. Ingresas a la carpeta src y creas una nueva hoja de estilos

[pic 17]

1. Importas dicha hoja de estilos en el App.js y eliminas la anterior.

[pic 18]

1. Modifica la estructura del proyecto creando la carpeta de scss

[pic 19]

1. En el archivo _variables.scss puedes crear algunas propiedades de color, tipografia y transiciones

[pic 20]

1. En el archivo index.scss importas el de variables

[pic 21]

1. En el App.scss modificas el color de la clase App

[pic 22]

1. En el App.js creas una etiqueta h1

[pic 23]

1. Ejecutas el proyecto y visualizas el cambio de color

[pic 24]

1. Instalamos Ant design

[pic 25]

1. En el index.js importas la librería de Ant design, antes del import del index.css

[pic 26]

1. Modificas el código del App.js

utilizando algunos componentes de la librería Ant Design

[pic 27]

1. Importa los componentes de la librería Ant Design utilizados en el punto anterior

[pic 28]

1. Visualizar salida en el navegador

[pic 29]

1. Creas una carpeta vacia con el nombre: proy_server y lo abres en vsC

[pic 30]

1. Inicializas el proyecto node: yarn init -y

[pic 31]

...