SPFx visual guide
SharePoint, SPFx, Visual

SPFx visual: tu primer Web Part paso a paso

Esta guía está diseñada para principiantes que quieren ver cómo SPFx transforma SharePoint en un entorno moderno, con diagramas y ejemplos claros.

1. Preparando tu entorno

Antes de escribir código, instala las herramientas básicas: 

npm install -g yo gulp
npm install -g @microsoft/generator-sharepoint
Consejo: Asegúrate de usar Node.js LTS. Versiones muy nuevas pueden generar errores con SPFx.

2. Creando tu proyecto SPFx

Ejecuta: 

yo @microsoft/sharepoint

Selecciona:

  • Web Part
  • Framework: React (recomendado)
  • Nombre descriptivo para tu Web Part

3. Estructura de carpetas (diagrama visual)

src/ ├─ webparts/ │ └─ MiWebPart/ │ ├─ MiWebPart.ts │ ├─ MiWebPart.module.scss │ └─ components/ │ └─ MiComponente.tsx ├─ config/ ├─ node_modules/ └─ package.json

4. Probando tu Web Part

Ejecuta el servidor local: 

gulp serve

Esto abrirá el Workbench de SharePoint donde puedes arrastrar tu Web Part y probarlo en tiempo real.

5. Flujo de desarrollo SPFx

1. Crear proyecto 2. Escribir código 3. Probar con gulp serve 4. Empaquetar 5. Subir al App Catalog 6. Usar en páginas
Consejo de experto: Divide tu Web Part en componentes pequeños. Esto facilita la reutilización y las pruebas unitarias.

6. Empaquetando y desplegando

gulp bundle --ship
gulp package-solution --ship

Sube el paquete `.sppkg` a tu App Catalog y tu Web Part estará disponible para toda la organización.

7. Tips visuales para principiantes

  • Usa React para interfaces dinámicas.
  • SCSS para estilos mantenibles.
  • Documenta props y funciones.
  • Prueba cada cambio antes de empaquetar.
  • Usa nombres descriptivos en archivos y carpetas.
¡Recuerda! SPFx es tu puerta a páginas modernas en SharePoint. Con práctica, tus Web Parts serán útiles y profesionales.