How to reuse html customized aspx page in SharePoint online

gopi0415 ,  

Migrating from SharePoint 2016 to SharePoint Online and reusing your existing HTML code in SPFx web parts is a great approach. Here’s a step-by-step guide to help you integrate your HTML code into an SPFx web part:

• Set Up Your SPFx Environment:
• Ensure you have Node.js, Yeoman, and the SharePoint Framework Yeoman generator installed.
• Create a new SPFx web part project using Yeoman.
• Create Your SPFx Web Part:
• Run the Yeoman generator to scaffold a new SPFx web part project:

yo @microsoft/sharepoint​

• Add Your HTML Code:
  • Once your project is set up, navigate to the src/webparts/YourWebPartName directory.
  • Open the YourWebPartNameWebPart.ts file.
  • Replace the default render method with your HTML code. For example:

public render(): void {
  this.domElement.innerHTML = `
    <div>
      <h1>Tip: ${this.properties.tipTrickTitle}</h1>
      <p>Link: <a href="${this.properties.linkToKb}">${this.properties.linkToKb}</a></p>
    </div>`;
}
​

• Include CSS and JavaScript:
  • If your HTML code includes CSS or JavaScript, you can add these to your SPFx web part.
  • For CSS, create a .scss file in the src/webparts/YourWebPartName directory and import it in your web part file.
  • For JavaScript, you can include it directly in the render method or import it as a module.
• Deploy Your Web Part:
  • Build and package your SPFx solution:
  • gulp bundle --ship
  • gulp package-solution --ship
  • Upload the .sppkg file to your SharePoint App Catalog and deploy it.
• Add the Web Part to a Page:
  • Go to your SharePoint Online site, edit a page, and add your new web part.
• Reference : https://blog.enterprisedna.co/how-to-add-html-code-in-sharepoint-online-modern-page/https://www.process.st/how-to/add-html-code-in-sharepoint-online-modern-page/ and  https://sharepoint.stackexchange.com/questions/305886/custom-page-in-sharepoint-online