Sp fx connecting to share point & react lifecycle
1 recomendación410 vistas
Este documento describe los conceptos básicos de desarrollo de componentes web con React y su ciclo de vida, así como cómo conectar estos componentes con SharePoint y otras APIs protegidas con Azure Active Directory usando SPFx. Explica cómo crear una jerarquía de componentes, manejar propiedades, estado y eventos, y realizar peticiones a SharePoint y Microsoft Graph de forma segura.
Sp fx connecting to share point & react lifecycle
- 1. SPFx Connecting to SharePoint & React Lifecycle Mario Cortés Flores @mariocortesf
- 4. Desarrollo basado en componentes web con React • Dividir la interfaz en componentes atómicos. • Cada componente es responsable de implementar una funcionalidad. • No conoce los componentes superiores que lo encapsulan. • Solo conoce los controles hijos.
- 5. Componentes • Un componente equivaldría al concepto de función. • Recibe una entrada y genera un elemento de React.
- 6. Composición de componentes • Un componente puede contener a su vez otros componentes. • Crearemos una jerarquía de componentes.
- 7. Interfaz basada en JSX • Expresión que describe cómo se pintara la interfaz. • Manejos de estos objetos mediante programación.
- 8. Render • Genera el DOM del componente. • Los elementos son inmutables, una vez que has creado un elemento no puedes modificarlo. • Podemos bindear a objetos.
- 9. BaseClientSideWebPart.Render • La clase BaseClientSideWebPart contiene un método render encargado de crear los elementos del componente.
- 11. Propiedades (props) • Las entradas de datos de un componente se realiza mediante “propiedades”. • this.props • Las propiedades son de solo lectura.
- 12. Estado (state) • Son como propiedades privadas al componente. • Cada componente mantiene sus propio estado. • State es de lectura/escritura.
- 13. Actualizar el state • Solo se puede actualizar el estado de 2 formas: • setState es asíncrono • El flujo de información siempre es de arriba hacia abajo en la jerarquía de componentes. • Un componente puede pasar su estado a un hijo mediante propiedades.
- 14. Hooks y Lifecycle Inicialización 1. getDefaultProps 2. getInitialState 3. componentWillMount 4. Render 5. componentDidMount Actualizacion de estado 1. shouldComponentUpdate 2. componentWillUpdate 3. Render 4. componentDidUpdate Actualizacion de propiedades 1. componentWillReceiveProps 2. componentWillUpdate 3. Render 4. componentDidUpdate Unmount 1. componentWillUnmount
- 15. Eventos • Permite capturar eventos de nuestro componentes. • Mecanismo que utilizaremos para pasar información hacia arriba.
- 16. Office Fabric UI • Librearía con componentes, estilos e iconos para crear interfaces similares al estándar. • npm i office-ui-fabric-react --save
- 18. SPHttpClient • Cliente que permite realizar peticiones REST en el contexto del usuario.
- 19. Environment.type Permite detectar en qué entorno nos encontramos (EnvironmentType): • Test: el código se ejecuta desde un test unitario. • Local: nos encontramos en un equipo de desarrollo donde estamos probando nuestro desarrollo. • SharePoint: el framework se ha cargado en una página de SharePoint. • ClassicSharePoint: el framework se ha cargado en una página basada en el modelo clásico de páginas de SharePoint.
- 20. PnP JavaScript Core • Librearía con utilidades para conectar con SharePoint de una forma más natural. • No necesitamos conocer la estructura de REST de SharePoint.
- 21. GraphHttpClient • Cliente para consumir Microsoft Graph desde SPFx. • Abstrae del flujo de autorización de tokens. • /_api/SP.OAuth.Token/Acquire • Restricciones: this.context.graphHttpClient.get("v1.0/groups?$select=displayName", GraphHttpClient.configurations.v1) .then((response: GraphHttpClientResponse): Promise<any> => { return response.json(); }) .then((data: any): void => { // ... });
- 22. API’s protegidas con AAD • Consumir API’s securizadas con AAD a través de ADAL (por ejemplo Graph). • https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/connect-to-api- secured-with-aad • https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/call-microsoft-graph- from-your-web-part
- 24. Call to action Join Office 365 developer program https://dev.office.com/devprogram to leverage all resources for Office 365 development learning Build applications on Office 365 platform Attend MVP led local community events to continue learning on Office 365 development Share your feedback on Bootcamp at https://aka.ms/o365devbootcampfeedback