Read SharePoint list Items using REST API and ReactJS
Step1: Create a "ReactDemo" list and list columns as shown below.
Step2: Create an HTML page and saved as "react.html" and upload into Site Assets library in SharePoint. Copy the "react.html" file full url from for future reference. Update below in "react.html" file.
react.html:
Step3: Create a webpart page and add content editor webpart in to the page. update content link url with "react.html" page url.
Step1: Create a "ReactDemo" list and list columns as shown below.
react.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<style></style>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var
destination = document.querySelector("#container");
class
LinksClass extends React.Component {
debugger;
constructor() {
super();
this.state
= {
Links: [
{
"Link_x0020_Title": "",
"Title": ""
}
]
};
}
componentDidMount()
{
debugger;
this.RetrieveLinksData();
}
RetrieveLinksData()
{
var reactHandler = this;
var objHeaders = {
type: "GET",
headers: {
"accept": "application/json;odata=verbose"
},
mode: 'cors',
cache: 'default',
credentials: 'include'
}
fetch("https://sharepointonline01.sharepoint.com/sites/dev/_api/web/lists/getbytitle('ReactDemo')/items",
objHeaders).then(function (response) {
return response.json()
})
.then(function (json) {
var results = json.d.results;
reactHandler.setState({Links: results});
})
.catch(function (ex) {
console.log('parsing failed', ex)
})
}
render()
{
debugger;
return (
<div>
<h4>Links</h4>
<ul>
{this
.state
.Links
.map(function (item, key) {
return (
<li key={key}>
<a href={item.Link_x0020_Title.Url}>
{item.Title}
</a>
</li>
);
})
}
</ul>
</div>
);
}
}
ReactDOM.render(
<LinksClass/>,
document.getElementById('container')
);
</script>
</body>
</html>
Step4: final result.
Nice Blog!
ReplyDeleteI've gone through all the the blog regarding Sharepoint with react to design and develop the great app and I believe that this is the best blog one can learn with. I was looking to hire reactjs development company in India and got your blog.
Thanks for such a great article.
Great Article Cloud Computing Projects
DeleteNetworking Projects
Final Year Projects for CSE
JavaScript Training in Chennai
JavaScript Training in Chennai
The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training
Good one to begin। With SharePoint and reactjs You may please add other crud operationd in it।
ReplyDeleteCan you let me know how we can get people or group field value
ReplyDeleteThe article is so appealing. You should read this article before choosing the Big data cloud solutions you want to learn.
ReplyDeletedidn't work
ReplyDelete