Let us not get too deep into the framework. The focus will be developing the web parts using the framework.
I am assuming you have already set up the basic environment for developing SPFx web parts. In my previous articles, you can learn developing SharePoint framework web parts with out using any third party frameworks like React. Also you can find the steps for setting up prerequisites, CDN and creating the first web part without third party frameworks.
First, you will see how to create SPFx web part with React JS.
Create SPFx web part using React JS
Open the command prompt and run as admin. Navigate to the respective folder and start creating the web part using "yo @microsoft/sharepoint". Provide necessary inputs
The snapshot given below shows the steps for creating the web part. Note, I have selected the "React" as framework for the development.
The react components are written inside .tsx file.
The .tsx file contains a class which extends React.Component with necessary properties and state objects.
The properties are inherited from properties definition file.
The state object is defined using the interface. The state stores the data in multiple forms.
The render method creates virtual DOM to display the data.
Web Part Components
The web part file contains class which inherits BaseClientSideWebPart, with render method and property pane definition method.
The render method in the web part file has React.createElement, which is the entry point for the react components.
It has three parameters. They are type, props and children. The type can be class or string. The props contain the properties for the web part.
In my next article, you will learn developing SPFx web part to retrieve and render list items using react framework.