Use Functional React components

[Leif-Frederiksen]

General Information

• [ ] Usage
• [ ] Development
• [ ] Documentation
• [ X] Feature Request

Specific generator

• [ ] Addons
• [ ] HandlebarsJS
• [X ] React

Since I switched to functional React components and hooks, I really don't ever want to look back to the old-school class based components.

I would like to have the default scaffolded code to be functional instead of class based.

[StfBauer]

Hi @Leif-Frederiksen - if you are able to provide a sample solution that has templates for all base assets you can create we can make this happen.

I guess the only thing that really makes sense is web part. What do you think?

We can scaffold those together even if you like. Will this work for you?

[StfBauer]

@Leif-Frederiksen Can you provide such a sample?

[Leif-Frederiksen]

Hi Stefan,

After having tried to find heads and tails in how the generatorsystem works, I think I'm going to have to fold. I guess the actual content of the component is not in the PnP template, but inherited for MS's template? Anyways, the resulting code I thought could be good for motivating for writing functional components is something like this: import * as React from 'react'; import styles from './HelloWorld.module.scss'; import { IHelloWorldProps } from './IHelloWorldProps'; import { escape } from '@microsoft/sp-lodash-subset';

export default function HelloWorld(props:IHelloWorldProps) { return ( <div className={ styles.helloWorld }> <div className={ styles.container }> <div className={ styles.row }> <div className={ styles.column }> <span className={ styles.title }>Welcome to SharePoint! <p className={ styles.subTitle }> Customize SharePoint experiences using Web Parts.

<p className={ styles.description }>{escape(props.description)} Learn more ); }

Regards Leif

Den ons. 25. mar. 2020 kl. 18.23 skrev Stefan Bauer < [email protected]>:

@Leif-Frederiksen https://github.com/Leif-Frederiksen Can you provide such a sample?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/pnp/generator-spfx/issues/249#issuecomment-603974544, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGABXNJLJCLKP3DNJD6244TRJI4YFANCNFSM4LPMNM3Q .

[StfBauer]

@Leif-Frederiksen So it is only the React component that actually needs to get adopted like this? The only chance is to overwrite after provisioning.

[Leif-Frederiksen]

Yes exactly. OK, I was beginning to suspect that. Thanks anyway :-)

Regards Leif

Den tir. 31. mar. 2020 kl. 12.35 skrev Stefan Bauer < [email protected]>:

@Leif-Frederiksen https://github.com/Leif-Frederiksen So it is only the React component that actually needs to get adopted like this? The only chance is to overwrite after provisioning.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/pnp/generator-spfx/issues/249#issuecomment-606541952, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGABXNL2WSPXYDUOKTT6ZEDRKHBPLANCNFSM4LPMNM3Q .