Portafolio profesional

El proyecto esta desplegado en https://lgzarturo.com, forma parte de mi perfil profesional como desarrollador fullstack.

Vite

El proyecto se migro a Vite + React + TypeScript Setup

Dependencias

"@types/react": "^18.0.24",
"@types/react-dom": "^18.0.8",
"@vitejs/plugin-react": "^2.2.0",
"typescript": "^4.6.4",
"vite": "^3.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",

Estructura del proyecto

dist: Es la carpeta donde se genera el código optimizado para el despliegue.
src: Es la carpeta raíz del proyecto, aquí vive el código fuente.
- assets: En está carpeta se ponen los recursos estáticos de la aplicación.
- components: Aquí se definen los componentes.
- hooks: Se definen los custom hooks para la aplicación.
- pages: Para el router de React se usa está carpeta para las páginas de la aplicación.

Ejecutar el proyecto

Para clonar el proyecto: git clone git@github.com:lgzarturo/my-portfolio.git, se puede hacer un fork del proyecto para hacer uso del código o ejecutarlo de forma local.

Primero es necesario hacer un clone del repositorio.
Con cd {carpeta} se accede al proyecto.
Ahora solo es necesario ejecutar el comando: npm install, para descargar todas las dependencias.
Para correr el proyecto usar el siguiente comando: npm run dev

Comandos disponibles

npm run dev: Ejecutar el proyecto de forma local.
npm run build: Compilar el proyecto para generar el paquete optimizado para el despliegue.
npm run preview: El comando arrancará el servidor web estático local y se despliega de forma local el contenido de la capeta 'dist'.

Linter para Vite y TypeScript

El proyecto incluye: eslint, eslint-airbnb-config, prettier

1.- Instalar el Linter.

npm install --save-dev --save-exact eslint

2.- Configurar eslint npx eslint --init

npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config@0.4.1
Ok to proceed? (y) y
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
The config that selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm

3.- Instar plugin de airbnb javascript style guide

npx install-peerdeps --dev eslint-config-airbnb

4.- Instalar dependencias de airbnb con eslint para TypeScript.

npm install --save-dev eslint-config-airbnb-typescript

5.- Instalar prettier con soporte para eslint

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

Commit 1557ae8 con los cambios necesarios para configurar el linter y prettier.

Instalar entorno de pruebas con Vitest

npm install --save-dev vitest
npm install --save-dev @testing-library/react @testing-library/jest-dom

Commit c4cd711 donde se define la configuración del entorno de pruebas.

Mocking de fetch

npm install --save-dev cross-fetch
npm install --save-dev msw

Uso de API's

Dev.to public api https://dev.to/api/articles?username=lgzarturo
GitHub API https://api.github.com/users/lgzarturo

Proyecto de react desde Cero

Para generar un proyecto con React y Webpack, se pueden requieren las siguientes dependencias.

Instalar React

npm init -y
npm install --save-dev --save-exact webpack webpack-cli
npm install --save-exact react react-dom
npm install react-router-dom@6

Ver la configuración del archivo setupTests.ts

Integrando Babel

El Objetivo es generar el código de JavaScript moderno por un código más estandarizado y optimizado para ponerlo en producción.

npm install --save-exact --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

Librerías de soporte

Permite a webpack mostrar los recursos estáticos y documentos html, se agrega el soporte de CSS y de twitter bootstrap.

npm install --save-exact --save-dev html-webpack-plugin
npm install --save-exact --save-dev webpack-dev-server
npm install --save-exact --save-dev bootstrap
npm install --save-exact --save-dev css-loader style-loader