I am a wordpress developer, I am planning to use angular or reactjs with wordpress theme. I followed couple of articles and after implementation checked the performance on webserver and observe that default wordpress is way too much faster as compared with angularjs or reactjs. I can't shake the felling that something is wrong with my code. It will be very helpful if anyone can guide me to the right direction. I am posting the code that I have used so far.
ReactJs
componentDidMount(){
return fetch('http://www.websitename.com/wp-json/wp/v2/posts/?per_page=100')
.then((response) => response.json())
.then((responsejson) => {
this.setState({data: responsejson});
})
.catch((error)=>{
console.error(error);
});
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 ClassName="App-title">
<div class="row" id="overview"></div>
<div class="row" >
{this.state.data.map((item, i) => (
<div class="col-md-4" key={i}>
<div class="thumbnail">
<a href="{item.slug}"><h3 class="ng-binding"> {item.title.rendered}</h3></a>
<a href={item.slug}>
<img src={item.featured_image} />
</a>
<div class="caption">
{item.excerpt.rendered}
</div>
</div>
</div>
) )}
</div>
React Testing
</h1>
</header>
</div>
);
}
AngularJs
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http({
method : "GET",
url : "http://www.websitename.com/wp-json/wp/v2/posts?per_page=100"
}).then(function mySuccess(response) {
$scope.myWelcome = response.data;
}, function myError(response) {
$scope.myWelcome = response.statusText;
});
});
</script>
for loading 100 posts per page. AngularJs took approx 40 secs, reactJs took more than 1.5 mins and wordpress default wp_query took 15 secs.
