Skip to main content

Posts

Showing posts with the label React JS

SPFX using Office UI Fabric to Show all the list items

We are going to create a UI as below. https://admin.microsoft.com/Adminportal/Home#/users Using MSGraph API fetch the users from Microsoft Admin page portal, and display on the page. Create react framework Install MS graph types dependency  npm install @microsoft/microsoft-graph-types --save-dev Go to props file in component folder, first we need webpart context. so import webpart context. import { WebPartContext } from '@microsoft/sp-webpart-base' ; then export interface IShowAllItemsOfficeUiFabricProps {   description : string ;   context : WebPartContext ; } now in main ts file, we need to pass value to the context, const element : React . ReactElement < IShowAllItemsOfficeUiFabricProps > = React . createElement (       ShowAllItemsOfficeUiFabric ,       {         description : this . properties . description ,         context : this . context       }     ); No...

react_user.js

import  React  from   'react' ; import  $  from   'jquery' ; class  Users  extends  React.Component {      constructor (){          super ();           this .state = {             FirstName: "" ,             LastName: "" ,             Email: "" ,             Subject: "" ,             Message: "" ,             RetrivedData:[]         }            }     compone...

react_home.js

import  React  from   'react' ; import  $  from   'jquery' ; import  background  from   './images/hero_2.jpg' ; class  Home  extends  React.Component {      constructor (){          super ();          this .state = {             myJsonTask:[],             image: "url('" +background+ "')"         }     }     componentDidMount(){          this .getData();     }     getData(){          let  reactHandler =  this ;          let  urlVal =...

React_contact.js

import  React  from   'react' ; import   './contact.css' ; import  contactImage  from   './images/person_1.jpg' ; class  Contact  extends  React.Component{      constructor (){          super ();          this .state = {            contacts: [],           contactImg:contactImage         }       }       componentDidMount() {         fetch( 'https://jsonplaceholder.typicode.com/users' )         .then(res  =>  res.json())         .then((data)  =>  {     ...