Introdução
No mundo do desenvolvimento de web parts para SharePoint Framework (SPFx), a integração com React é uma maneira poderosa de criar interfaces dinâmicas e responsivas. Neste artigo, vamos explorar como construir uma web part simples que exibe uma lista de itens estáticos. Através deste exemplo, você poderá entender melhor a estrutura do SPFx e como React se encaixa nesse cenário.
Estrutura do Projeto
O código que vamos analisar é dividido em partes, sendo o principal o arquivo ReactShowItemsPart1WebPart.ts, que controla a lógica da web part, e o arquivo ReactShowItemsPart1.tsx, que gerencia a apresentação dos itens.
Código Principal: ReactShowItemsPart1WebPart.ts
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
type IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import * as strings from 'ReactShowItemsPart1WebPartStrings';
import ReactShowItemsPart1 from './components/ReactShowItemsPart1';
import { IReactShowItemsPart1Props } from './components/IReactShowItemsPart1Props';
export interface IReactShowItemsPart1WebPartProps {
description: string;
}
export default class ReactShowItemsPart1WebPart extends BaseClientSideWebPart<IReactShowItemsPart1WebPartProps> {
public render(): void {
const items = [
{ Id: 1, Title: "item1" },
{ Id: 2, Title: "item2" },
{ Id: 3, Title: "item3" },
{ Id: 4, Title: "item4" }
];
const element: React.ReactElement<IReactShowItemsPart1Props> = React.createElement(
ReactShowItemsPart1,
{
items
}
);
ReactDom.render(element, this.domElement);
}
protected onInit(): Promise<void> {
return Promise.resolve();
}
protected onDispose(): void {
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}
}
Explicação do Código Principal
- Importações Necessárias:
- O código importa as bibliotecas React, ReactDom e várias classes do SPFx que permitem a criação de web parts.
- Definição da Web Part:
- A classe
ReactShowItemsPart1WebPartestendeBaseClientSideWebParte define a estrutura da web part.
- Renderização:
- O método
rendercria uma lista de itens estáticos e os passa para o componenteReactShowItemsPart1.
- Propriedades da Web Part:
- O método
getPropertyPaneConfigurationdefine as propriedades que podem ser configuradas no painel da web part.
Código do Componente: ReactShowItemsPart1.tsx
import * as React from 'react';
import type { IReactShowItemsPart1Props } from './IReactShowItemsPart1Props';
export default class ReactShowItemsPart1 extends React.Component<IReactShowItemsPart1Props, {}> {
public render(): React.ReactElement<IReactShowItemsPart1Props> {
const { items } = this.props;
return (
<div>
<h2>List Items</h2>
<ul>
{items.map(item => (
<li key={item.Id}>Item: {item.Id} Valor: {item.Title}</li>
))}
</ul>
</div>
);
}
}
Explicação do Componente
- Definição do Componente:
- O componente
ReactShowItemsPart1estendeReact.Componente recebe propriedades definidas na interfaceIReactShowItemsPart1Props.
- Renderização:
- O método
renderexibe um título e uma lista não ordenada (<ul>) que itera sobre os itens passados como props, exibindo o ID e o título de cada item.
Conclusão
Neste artigo, exploramos como criar uma web part simples no SPFx utilizando React para exibir itens estáticos. Com essa base, você pode expandir seu conhecimento e começar a trabalhar com dados dinâmicos, integrando APIs e outros recursos.
Próximos Passos
- Adicionando Funcionalidade Dinâmica: No futuro, considere integrar uma API para obter dados dinâmicos.
- Aprendendo mais sobre React: Explore mais sobre componentes, hooks e gerenciamento de estado para aprimorar suas habilidades em React.
edvaldo b. guimarães filho 
Leave a comment