Understanding React Components On SPFx

Introduction

In this article, let us see how React JS components work along with multiple class hierarchy using SharePoint Framework components.

Web part file 

The TypeScript file present under “src/webparts/solutionname” contains the class and necessary components to render the information. Here, the render method contains the elements to be displayed on the page along with properties passed to the React file.

This element is rendered using ReactDom.render method with the help of React components present in the React.tsx file. The components in the tsx file return the necessary HTML to be rendered on the page.

The below snapshot shows the render method on the main web part file.

public render(): void {
  const element: React.ReactElement<ISpreactProps > = React.createElement(
    Spreact,
    {
      property1: "Data to Root Class from arg 1",
      property2: "Data to Root Class from arg 2"
    }
  );

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

Here, Spreact denotes the main class name present in the React JS file. Any number of parameters can be passed as properties.

Properties file  

 

The properties are declared in the properties file separately (under "src/webparts/solutionname/components" folder). The classes which inherit the property interface should always contain the properties declared in the interface. For example, the interface ISpreactProps contains two properties - property1 and property2. 

export interface ISpreactProps {
 property1: string;
 property2: string
}

React file

 

Let us look at the React JS file now (under "src/webparts/solutionname/components" folder). The main class contains the render method to return necessary data to be displayed on the web part file. 

 public render(): React.ReactElement<ISpreactProps> {
  return (
    <div>
      <div>
        Root Class
      </div>
      <div>
        <ClassA property1="data to from root class to Class A" property2={this.props.property2}/>
        <ClassB property1="data to from root class to Class B" property2=""/>
      </div>
    </div>
  );
}

Any number of sub classes can be added here. Additionally, constructor and the life cycle methods can be implemented.

 

In the sample below, ClassB extends the react component and uses the ISpreactProps interface. So, the defined class will contain the properties defined.

<ClassB property1="data to from root class to Class B" property2=""/>

The properties passed using the classes can be accessed in the respective classes using the props parameter. That is, property1 can be accessed in Class B methods using this.props.property1.

Make sure the React file is imported in the beginning of the file. Likewise, other classes will also contain the constructor, render method, and life cycle methods. The individual classes are used to implement the additional functionalities.

The below sample shows the class. The HTML data is returned to the web part file using render method. The functionalities can be implemented using life cycle methods like componentWillMount, etc.

export class ClassB extends React.Component<ISpreactProps, void> {
   public constructor(props: ISpreactProps){

    super(props);


  }

  public render(): React.ReactElement<ISpreactProps> {
    return (<div>ClassB</div>);
  }
}

Summary

Thus, you have learned rendering the information using React components with SharePoint Framework solutions.