eanton71 / _fullstackopen

Course Full Stack open

University of Helsinki

Enrique Anton Lopez

0. Parte 0: Fundamentos de las aplicaciones web
   • Ejercicios: part0
     • 0.1:leer tutorial de HTML
     • 0.2:leer tutorial de CSS
     • 0.3:leer Mi primer formulario HTML
     • 0.4: diagrama red XHR pagina => diagrama 0.4
     • 0.5: diagrama red crear nota SPApagina => diagrama 0.5
     • 0.6: diagrama red crear nota SPA => diagrama 0.6
1. Parte 1: Introduccion a React
   • Ejercicios:
     • part1/courseinfo
       • 1.1: inforamcion del curso
       • 1.2: refactorizar Content
       • 1.3: refactorizar variables con datos y app
       • 1.4: refactorizar datos a un array
       • 1.5: refactorizar datos a un objeto
     • part1/unicafe
       • 1.6: aplicacion de comentarios con gestion de estados
       • 1.7: añadir estadisticas
       • 1.8: refactorizar componente Statistics
       • 1.9: esperar comentarios para mostrar estadisticas
       • 1.10: extraer componentes Button y StatisticLine
       • 1.11: mostrar estadistica en tabla HTML
     • part1/anecdotes
       • 1.12: aplicacion con frases aleatorias
       • 1.13: añadir votacion por la anecdota o frase
       • 1.14: mostar frase o anecdota con mayor numero de votos
2. Parte 2: Comuicandose con el servidor
   • Ejercicios:
     • part2/courseinfo
       • 2.1: inforamcoin del curso con servidor
       • 2.2: mostrar suma de ejercicios
       • 2.3: calcular suma e ejercicios con array.reduce
       • 2.4: permitir un numero arbitrario de cursos
       • 2.5: Refactorizr Course como modulo separado
     • part2/phonebook
       • 2.6: agenda telefonica con nombres
       • 2.7: comprobar el si el nuevo usuario ya existe en la agenda
       • 2.8: incluir numeros de telefono
       • 2.9: filtrar por nombre
       • 2.10: refactorizar en varios componentes
       • 2.11: alamacenar estado inical en db.json
       • 2.12: guardar ps datos en el servidor backend
       • 2.13: modulo aparte para gestionar backend
       • 2.14: eliminar entradas de la BD
       • 2.15: comprobar que el nuevo usuario existe, si es aasi actuazliar nueevo numero
       • 2.16: mensajes de error con estilo
       • 2.17: gestionar errores en las promesas
     • part2/countries
       • 2.18: aplicacion con información sobre paises. Obtener datos de helsinki countries. Input con filtrado. Cuando el filtrado da <= 10 resultados, se muestran los nombres de paises. Cuando se da un resultado, muestra varios datos: capital, area, bandera, idiomas
       • 2.19: colocar un boton junto al nombre de cada pais para mostar la información
       • 2.20: agregar info meteorologica . Por ejmplo openweathermap
3. Programando un servidor con NodeJS y Express
   • Ejercicios:
     • part3/phonebook-backend
       • 3.1:Servidor Node que retorne la lista de personas: http://localhost:3001/api/persons
       • 3.2:Implementar pagna info: http://localhost:3001/info , horade solicitud, numeros de entaradas
       • 3.3: mostrar una sola entrada de la agenda:http://localhost:3001/api/persons/5
       • 3.4:
       • 3.5:
       • 3.6:
       • 3.7
       • 3.8
       • 3.9
       • 3.10
       • 3.11
       • 3.12
       • 3.13
       • 3.14
       • 3.15
       • 3.16
       • 3.17
       • 3.18
       • 3.19
       • 3.20
       • 3.21
       • 3.22

Instalaciones

Crear aplicacion en React con Vite

• intro React

Instalar servidor JSON

• Parte 2, configuracion JSON Server npm install json-server --save-dev

Instalar axios

• Parte 2, configuracion JSON Server
• npm install axios
• Modificar package.json para ejecuatar serrver

  "scripts": {
      "dev": "vite",
      "build": "vite build",
      "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
      "preview": "vite preview",
      "server": "json-server --port 3001 --watch db.json"
    },

Dotenv para guardar variabels de entorno

• variables de entorno en React
• Se guardan en erchivos .env en la raiz del proyecto

VITE_SOME_KEY=54l41n3n4v41m34rv0

• Acceder edesde la aplicacion al valor
• const api_key = import.meta.env.VITE_SOME_KEY
• En el archivo .girignore por el .env para que no se suba al repositorio (INFORMACION SENSIBLE) ⛔

Leer

https://es.react.dev/learn/synchronizing-with-effects https://es.react.dev/reference/react/useEffect

Problemas y soluciones

Posible mensaje de error

• nameis missing in props validation eslint, react/prop-types
• causado por ESlint
• Añadir la linea 'react/prop-types': 0 al archivo ´eslintrc.cjs, en el array rules`:

    rules: {
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },
     ],
     'react/prop-types': 0
   },

Puertos ocupados

Cannot bind to the port 3001. Please specify another port number either through --port argument or through the json-server.json configuration file

• YA hay un servicio ejecutandose en ese puerto, parapra ese ervicio, configurar con otro `puerto, eteccc

Archivo DS_store en mac

Remove existing .DS_Store files from the repository:

find . -name .DS_Store -print0 | xargs -0 git rm -f --ignore-unmatch
Add this line:

.DS_Store
to the file .gitignore, which can be found at the top level of your repository (or create the file if it isn't there already). You can do this easily with this command in the top directory:

echo .DS_Store >> .gitignore
Then commit the file to the repo:

git add .gitignore
git commit -m '.DS_Store banished!'

https://stackoverflow.com/questions/107701/how-can-i-remove-ds-store-files-from-a-git-repository