Before proceeding further, please check out the articles below to get to know about building SharePoint Framework applications:
How to create SharePoint Framework Applications?
The following blog posts will help you for sure in detail about building SPFx applications,
When we build a custom web part for existing OOTB News web part we can bring the same look and feel with Office UI Fabric. Even we could achieve the functionalities of the OOTB news web part with SharePoint REST API’s
Check out my article to read the SharePoint promoted news using REST API search in SPFx web part. It not ends by just reading the news using SharePoint Search REST API to get the news details. We need to go one step ahead and think about how to handle the threshold limit of SharePoint REST API through pagination which is explained in our another article on Handling the SharePoint REST API search threshold limit in SPFx.
While customizing OOTB news web part the major problem would be how do you make the users to create the news publishing page ??? how are you going to achieve the functionality of Add News button in OOTB news web part?
HOW SITE PAGE BECOMES A NEWS IN SHAREPOINT ONLINE?
The trick is with the state of the News. SharePoint online news is internally a normal site page but with the promoted state property of news is 2 it becomes a news.
Now we are going to set the promoted state of the site page to be 1 by default and when the user fills the details for the page and click publish. Promoted state will be changed to 2 and hence it becomes news.
Below is the code snippet which would help to create a site page simply by redirecting to specific URL and set it in a promoted state as 1.
let modernPageSuffix = “/_layouts/15/CreateSitePage.aspx?promotedState=1”;
let newNewsUrl: string = this.context.pageContext.web.absoluteUrl.concat(modernPageSuffix);
In SharePoint Framework current context of user and site/web will be there in the context object from which we get the web absolute url and append it with the CreateSitePage.aspx with the query parameter as promotedState=1.
When you set this is as a href link or redirects through code on button click the new site page creation will look like below,
By using this CreateSitePage.aspx with different parameters you could create a normal site page too without help of any REST API/JSOM.
If you have any questions/issues about this article, please let me know in comments.