Basic Understanding of Code in React Framwork
In .ts file we can see a change with Jquery now is In render method, We can see element variable holding the properties. And this element is assigning to the current dom element.
We can observe components folder with Interface file, scss , and on .tsx file
Components folder .ts
In components folder, .ts file has interface properties.
In our react component, if we want to use as many as properties we have to instantiate here in the interface section.
By default one property called description: string.
Components folder .tsx
We can observe importing the react framework from dependencies.
Importing styles from .scss file
Importing Interface properties from .ts interface file
In SPFX react, first I have created an App with react framwork and open the code in VS Code.
It contains a separate render() method and contains return statement with HTML inside.
Here we need to understand that react is component approch.
Each component contains .scss file, HTML from .tsx file and an interface properties from .ts file.
From .tsx file,
className={styles.container} //this is how we can call css from .scss file
<p>{escape(this.props.description)}</p> // this is the way calling the properties from interface .ts file.
Here it is having some value that we are printing.
But the value is coming from manifest.json file under properties description.
SPFX React Reading site properties
Step 1:
Finding the site url, web url, user name details.
Firstly, going to the interface class and creating properties as below
export interface IWebpartWithReactProps {
description: string;
absoluteurl: string;
sitetitle: string;
relativeurl:string;
username: string;
}
In .tsx file, formatting the HTML as below
<p className={ styles.description }>Absolute URL {escape(this.props.absoluteurl)}</p>
<p className={ styles.description }>Site Title {escape(this.props.sitetitle)}</p>
<p className={ styles.description }>Relative URL {escape(this.props.relativeurl)}</p>
<p className={ styles.description }>User Name {escape(this.props.username)}</p>
Step 2: Now go to .ts file.
We can see error in render method.
In React component, we need to supply the values mention for the properties in Interface of .ts file.
We have "this.context.pageContext.web" provides properties for the respective SP site.
const element: React.ReactElement<IWebpartWithReactProps> = React.createElement(
WebpartWithReact,
{
description: this.properties.description,
absoluteurl: this.context.pageContext.web.absoluteUrl,
sitetitle: this.context.pageContext.web.title,
relativeurl:this.context.pageContext.web.serverRelativeUrl,
username: this.context.pageContext.user.displayName
}
);
ReactDom.render(element, this.domElement);
}
React Life Cycle in SPFx
Refer below article for further learning about React Life Cycle using SPFx
Constructor > ComponentWillMount > Render > ComponentDidMount > Custom methods > ComponentWillUnmount
https://tejasadventure.blogspot.com/2021/07/react-lifecycle-using-spfx.html
Comments
Post a Comment