En este artículo veremos un ejemplo sencillo de como codificar WebParts (SPFx).
En el artículo Crea un primer Webpart con SharePoint Framework SPFx en SharePoint Online/2019/2016 hemos creado un primer Webpart de Sharepoint Framework (SPFx) y testeado de forma local.
Y en el artículo Agregar nuevas propiedades a un WebPart (SPFx) hemos agregado nuevas propiedades al Webpart de Sharepoint Framework (SPFx).
Ahora vamos a agregar nuevo código para renderizar propiedades en pantalla y poder visualizarlas en nuestro WebPart creado con React.
Para ello editamos el archivo src\webparts\holaMundoReact\components\HolaMundoReact.tsx con Visual Studio Code y agregamos la siguiente línea:
<p className={ styles.description }>{escape(this.props.Sumario)}</p>Como la propiedad Sumario no está definida en el interfaz src\webparts\holaMundoReact\components\IHolaMundoReactProps.ts se mostrarán los errores a tiempo real en Visual Studio Code.
También si tenemos arrancado gulp serve en PowerShell, alestár sirviendo el WebPart a tiempo real el error aparecerá también ahí.
Una vez que definimos la propiedad en interfaz src\webparts\holaMundoReact\components\IHolaMundoReactProps.ts, desaparece el error.
export interface IHolaMundoReactProps { description: string; Sumario: string;}Y se visualizará correctamente el Html que hemos añadido.
Es interensante ver que cuando editamos las propiedades no hay botón de salvar, ya que se guardan automáticamente.
