$qu = $db->prepare("SELECT * FROM comment ORDER by id desc");

$pageNum = $_GET['page'];
$qu = $db->prepare("SELECT * FROM comment ORDER by id desc limit 0, $pageNum");

<script src="js/jsFunctions.js" type="text/javascript"></script>
 <script src="build/jquery.min.js"></script>

<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
    <script src="build/browser.min.js"></script>
<script  type="text/babel">

//CommentList Component

var CommentList = React.createClass({
    getInitialState:function(){
    //setting initiall values
    //attach the scroll event listener to our scroll handler function
        window.addEventListener("scroll", this.handleScroll);
        return{
            comments:[], //comment array initially we have zero comment
            page:0,      //for pagination
            loadingFlag:false,   //to avoid multiple fetch request if user is keep scrolling
            url:"loaddata.php"  //url to fetch comments in json format
        }

    },

getComment:function(){
    //method to fetch comments will concat result to state.comment
    var nextPage = this.state.page+10; //display 10 records from databse on each scroll

 $.get(this.state.url+"?page="+this.state.page, function(result) {

     //$.get(this.state.url+"?page="+this.state.page, function(result) {
      if (this.isMounted()) {
        this.setState({
         // comments: this.state.comments.concat(result),  //concating to existing comments
          comments: this.state.comments.concat(result),  //concating to existing comments
          loadingFlag:false,
          page:nextPage
        });

        loading("off");
      }
    }.bind(this));
    },
    componentDidMount: function(){
      //to load comments initially
      loading("on");
        this.getComment();
    },
    handleScroll:function(e){
    //this function will be triggered if user scrolls
    var windowHeight = $(window).height();
    var inHeight = window.innerHeight;
    var scrollT = $(window).scrollTop();
    var totalScrolled = scrollT+inHeight;

    if(totalScrolled+100>windowHeight){  //user reached at bottom

      if(!this.state.loadingFlag){  //to avoid multiple request
          this.setState({
            loadingFlag:true,
          });
          loading("on");
          this.getComment();
      }

    }
    },
    render:function(){
      //creating comment node
       var CommentNode = this.state.comments.map(function (comment) {
          return (
            <div>
        Comment:{comment.content}<br/>
        Auther:{comment.author}<hr />
        </div>
              );
        });
      return (
      <div> {CommentNode} </div>
        );
    }


});
ReactDOM.render(
  <CommentList  />,
  document.getElementById('component')
);


</script>

<?php
header('Content-Type: application/json');
 $pageNum = $_GET['page'];
 //$pageNum = 16;
//sleep(2);
include("db.php");
$insert = $db->prepare("INSERT INTO page_data(pagename)values(:pagename)");
$insert->execute(array(
':pagename' => $pageNum

));
$qu = $db->prepare("SELECT * FROM comment ORDER by id desc limit 0, $pageNum");

        $qu->execute(array());
$gco = $qu->rowCount();

while($row = $qu->fetch()){

$data[] = array("id"=>$row['id'],"content"=>$row['content'],"author"=>$row['author']);

}
echo json_encode($data);
?>

//This js file have nothing to do with React, only Loading function is defined here
  var loading = function(action) {
        // add the overlay with loading image to the page
        if(action=="on"){
        var over = '<div id="overlay">' +
            '<img id="loading" src="loader.gif" >' +
            '</div>';
       //$(over).appendTo('body');
       $('body').append(over);
       $('html, body').css("cursor", "wait");
                console.log("creating overlay");


    }
    else if(action=="off"){
                    $("#overlay").remove();
                    $('html, body').css("cursor", "auto");
                    console.log("removing overlay");

    }


    };