Yeomen output is different of the one from the learning page.

[OlivierHogue]

The code generated with Yeoman differ greatly from the learning page. For example, here is the current Yeoman output :

public render(): React.ReactElement<IHelloWorldProps> {
    const {
      description,
      isDarkTheme,
      environmentMessage,
      hasTeamsContext,
      userDisplayName
    } = this.props;

    return (
      <section className={`${styles.helloWorld} ${hasTeamsContext ? styles.teams : ''}`}>
        <div className={styles.welcome}>
          <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
          <h2>Well done, {escape(userDisplayName)}!</h2>
          <div>{environmentMessage}</div>
          <div>Web part property value: <strong>{escape(description)}</strong></div>
        </div>
        <div>
          <h3>Welcome to SharePoint Framework!</h3>
          <p>
            The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It&#39;s the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling.
          </p>
          <h4>Learn more about SPFx development:</h4>
          <ul className={styles.links}>
            <li><a href="https://aka.ms/spfx" target="_blank" rel="noreferrer">SharePoint Framework Overview</a></li>
            <li><a href="https://aka.ms/spfx-yeoman-graph" target="_blank" rel="noreferrer">Use Microsoft Graph in your solution</a></li>
            <li><a href="https://aka.ms/spfx-yeoman-teams" target="_blank" rel="noreferrer">Build for Microsoft Teams using SharePoint Framework</a></li>
            <li><a href="https://aka.ms/spfx-yeoman-viva" target="_blank" rel="noreferrer">Build for Microsoft Viva Connections using SharePoint Framework</a></li>
            <li><a href="https://aka.ms/spfx-yeoman-store" target="_blank" rel="noreferrer">Publish SharePoint Framework applications to the marketplace</a></li>
            <li><a href="https://aka.ms/spfx-yeoman-api" target="_blank" rel="noreferrer">SharePoint Framework API reference</a></li>
            <li><a href="https://aka.ms/m365pnp" target="_blank" rel="noreferrer">Microsoft 365 Developer Community</a></li>
          </ul>
        </div>
      </section>
    );
  }

And here is the one from the learning page:

  const element: React.ReactElement<IDocumentCardExampleProps> = React.createElement(
    DocumentCardExample,
    {
      description: this.properties.description
    }
  );

  ReactDom.render(element, this.domElement);
}

---

Document Details

⚠ Do not edit this section. It is required for learn.microsoft.com ➟ GitHub issue linking.

• ID: b6f89fed-848e-50b9-6be4-657824ad262e
• Version Independent ID: 3d3c5227-7281-ef49-a2d1-686c0a049497
• Content: Use Office UI Fabric React components in your SharePoint client-side web part
• Content Source: docs/spfx/web-parts/get-started/use-fabric-react-components.md
• Service: sharepoint
• Sub-service: sharepoint-framework
• GitHub Login: @VesaJuvonen
• Microsoft Alias: vesaj

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[OlivierHogue]

Uhm, sorry, it was the wrong file I was in the components. My HelloWorldWebPart.ts is similar enough to the learning page. Do I close the ticket ?