React.js prerender html markup before main div application

359 views Asked by At

Having tough times learning React. So I started to rewrite simple HTML + JavaScript page with React.
I want to prerender the html markup before the div with main application. I found that library with custom fonts (simple-line-icons) doesn't load in a way how I've done this. But if I put this <div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div> div inside a component, the fonts are loaded fine. Here is the code of index.html how it looks now:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/preloader.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/simple-line-icons.css">
    <!--[if lt IE 9]>
    <script>
    (function(){
        var ef = function(){};
        window.console = window.console || {log:ef,warn:ef,error:ef,dir:ef};
    }());
    </script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
    <![endif]-->
    <script>
        (function (i, s, o, g, r, a, m) {
            Google Analytics code            
        });         
    </script>
</head>
  <body data-spy="scroll">
      <div id="preloader">
          <div id="status_first">
              <div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div>
          </div>
          <div id="status_second">
              <div className="wow tada infinite" data-wow-duration="8s">K</div>
          </div>
          <div id="status_third">
              <div className="loadicon icon-arrow-right wow tada infinite" data-wow-duration="8s"></div>
          </div>
      </div>    
    <div id="app">
    </div>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="js/jquery.nicescroll.min.js"></script>    
    <script src="js/plugins.js"></script>    
    <script src="//cdn.rawgit.com/noelboss/featherlight/1.7.8/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js"></script>
    <script src="js/js.cookie.js" charset="utf-8" type="text/javascript"></script>
    <script src="js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>            
  </body>
</html>

so, the task is simply perrender this piece of code:

  <div id="status_first">
      <div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div>
  </div>
  <div id="status_second">
      <div className="wow tada infinite" data-wow-duration="8s">K</div>
  </div>
  <div id="status_third">
      <div className="loadicon icon-arrow-right wow tada infinite" data-wow-duration="8s"></div>
  </div>

How it could be done in simple way? Need a working example please

1

There are 1 answers

0
Kuzma On BEST ANSWER

Well, I've solved it by moving the html code to the first child component of the App.