Building a small site in React with one module VS in Html/css/js

Question

I'm new to React.. If I load all my content like so in App.js in the React framework (all as one component). I'm guessing I'm not really using React in the proper way. But does this one component for a whole website approach have any advantage/disadvantage over building it in the normal HTML/CSS/JS format? Would this actually be slower as a site ?

    import React, { Component } from 'react';


import WebFont from 'webfontloader'; 
import urban_tribal_stfregular from './fonts/urban_tribal_stfregular.ttf';  
import urban_brush_zoneregular from './fonts/urban_brush_zoneregular.ttf';  
import urbanpaintsregular from './fonts/urbanpaintsregular.ttf';  
import urbantrailsregular from './fonts/urbantrailsregular.ttf';  
import urbanposterregular from './fonts/urbanposterregular.ttf';  
import urban_rubberregular from './fonts/urban_rubberregular.ttf';   

import logo from './img/logo.png';
import leaf from './img/leaf.png';
import hq from './img/hq.png';

import eyeSprinkle from './img/eye-sprinkle.png';
import docturDotHead from './img/doctur-dot-head.png';
import johnnyVenus from './img/johnny-venus.png';
import pyramid from './img/pyramid.png';
import goldElevator from './img/gold-elevator.png';
import demon from './img/demon.png';
import sword from './img/sword.png';
import stage1 from './img/stage-1.png';
import stage1Fire1 from './img/stage-1-fire-1.png';
import stage1Fire2 from './img/stage-1-fire-2.png';
import stage2Fire1 from './img/stage-2-fire-1.png'; 
import cloud1 from './img/cloud-1.png';
import cloud2 from './img/cloud-2.png';
import stage2 from './img/stage-2.png';
import footerShim from './img/840.png';
import footer from './img/footer.png';
import './App.css';



const styles = {
  urban_tribal_stfregular: { 
    fontFamily: 'urban_tribal_stfregular'
  },
  urban_brush_zoneregular: { 
    fontFamily: 'urban_brush_zoneregular'
  },
  urbanpaintsregular: { 
    fontFamily: 'urbanpaintsregular'
  },
  urbantrailsregular: { 
    fontFamily: 'urbantrailsregular'
  },
  urbanposterregular: { 
    fontFamily: 'urbanposterregular'
  }
};
// CONFIG OBJECT TO PASS TO HOC


class App extends Component {
  render() {
    let projectTitle = 'Earthgang'


    return (
      <div className="App">
        <div className="background-enhance">
          <header className="App-header">  
            <div style={{flexDirection:"row"}}> 




              {/* new wrap for dat perspective ting */} 
              <div className="wrap">
                <div className="bg">
                {/* perspective level 1 (back)*/}  



                  <div style={{ position: "absolute", width: "100%" }}>
                    <div className="plate">
                      <br />
                    </div>
                    <img src={hq} className="hq" alt="HQ" />

                    <div id="imageEye" className="spriteEye"></div>
                    <img src={leaf} className="leaf" alt="weed" />
                    <img src={leaf} className="leaf leaf_right" alt="grass" />
                  </div>

                    <div className="bg">
                    {/* perspective level 2*/}




                    <div id="imageHeadJohny" className="spriteHeadJohny"></div>

                    <div id="imageHeadDot" className="spriteHeadDot"></div>
                        <div className="bg"> 
                        {/* perspective level 3*/}



                      <img alt="" id="myButtn"  className="logoTop" src={logo} />
                      <div className="pyramid-box">
                        <img src={pyramid} className="pyramid" alt="pyramid" />
                        <img src={goldElevator} className="gold-elevator" alt="pain profit" />
                        <img src={eyeSprinkle} className="eye-sprinkle" alt="eye" />
                        <img src={demon} className="demon" alt="demon" />
                        <div className="stages stage-1-box">
                          <img src={stage1}className="stage-1" alt="Stage 1" />
                          <img src={stage1Fire1} className="stage-1-fire-1" alt="Stage 1 Fire 1" />
                          <img src={stage1Fire2} className="stage-1-fire-2" alt="Stage 1 Fire 2" />
                        </div>
                        <div className="stages stage-2-box">
                          <img src={stage2} className="stage-2" alt="Stage 2" />
                          <img src={stage2Fire1} className="stage-2-fire-1" alt="Stage 2 Fire 1" />
                        </div>
                      </div>

                          <div id="imageApe" className="spriteApe"></div>
                          <div id="imageHyena" className="spriteHyena"></div>
                          </div>

                        </div> 

                    </div>

                  </div>

              {/* End of new wrap for dat perspective ting */} 

            </div>
          </header>
          <div id="footer1">
          </div>
          <div id="footer2">
            <p>Footer (or other) content here</p>
          </div>

          <div style={{flexDirection:"row"}}> 
            <div>



            </div>
          </div> 
        </div>
      </div>
    );
  }
}






export default App;

Answer 1

Well , this is entirely just my own opinion which may be wrong .

If you are building with this single component website approach , then there is no need to use react really . You are just loading extra 57 kb or something according to this link React file size since you are not loading extra libraries.

But obviously maintaining this would not be an easy job and you are better off using react features to make you life easier and make the app scalable